Building the ListBoxesFT_C ASP.NET Web User Control in Visual Studio 2005: Part III

We have finished the "server" side (part 1, part 2) and are ready to write the "client" side of our control.

We face two problems. The first one is to "pass" selected items from the ListBoxFrom to the ListBoxTo (or vice versa) . We will solve it with the help of the client script (JavaScript) . The second problem is to "keep" all "item" changes when clicking some Button server control on the page (this is : "PostBack" event !) and to change the server variables _DT_In and _DT_Out acoording to "item" changes of the ListBox controls. We will solve this problem with the help of four Input(Hidden) controls and the code that we will add to the UserControls_ListBoxesFT_C class. The value of every Input(Hidden) control will consist of items (value or text) of the certain ListBox control, divided by separator (for example : ",") . With the help of the split method we can change these strings (I mean values of the "Hidden") to DataTable, some Array , etc.

Now inside the source of the ListBoxesFT_C.ascx under line:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListBoxesFT_C.ascx.cs" Inherits="UserControls_ListBoxesFT_C" %>

place the following script:

// <!CDATA[

function ButtonHTML_onclick(ListBoxFrom,ListBoxTo,

HiddenToText,HiddenToValue,

HiddenFromText,HiddenFromValue,

bOrderByText,bDoFromList)

{

var iOption;

var iCountHelp;

var iItemList;

var iItemSelect;

var sHelp ;

var iHelp ;

var sForSplit = ":";

var arrList = Array();

var arrListHelp = Array();

var arrHelp = Array();

var sListFrom;

var sListTo;

if (typeof(bDoFromList)== "undefined")

{

bDoFromList=true;

}

else

{

if (typeof(bDoFromList)!= "boolean")

{

bDoFromList=true;

};

if (bDoFromList)

{

sListFrom="ListBoxFrom";

sListTo="ListBoxTo";

}

else

{

sListFrom = "ListBoxTo";

sListTo = "ListBoxFrom";

};

if (typeof(bOrderByText )== "undefined")

{

bOrderByText=true;

}

else

{

if (typeof(bOrderByText )!= "boolean")

{

bOrderByText=true;

};

iCountHelp=0;

eval("iItemList=" + sListFrom + ".length");

for(iOption=0;iOption< iItemList;iOption++)

{

if (eval(sListFrom+".options[iOption-iCountHelp].selected"))

{

eval("sHelp="+sListFrom+".item(iOption-iCountHelp).text");

eval("iHelp="+sListFrom+".item(iOption-iCountHelp).value");

eval(sListFrom+".remove(iOption-iCountHelp)");

iCountHelp=iCountHelp+1;

eval(sListTo +".options["+sListTo+".length]= new Option(sHelp,iHelp)");

};

eval("iItemSelect=" + sListTo+ ".length");

for(iCountHelp=0;iCountHelp<iItemSelect; iCountHelp++)

{

eval("sHelp="+sListTo+".item(iCountHelp).text");

eval("iHelp="+sListTo+".item(iCountHelp).value");

if (bOrderByText)

{

arrList[iCountHelp]= sHelp + sForSplit + iHelp;

}

else

{

arrList[iCountHelp]= iHelp + sForSplit + sHelp;

};

arrList = arrList.sort();

for(iCountHelp=0;iCountHelp<iItemSelect; iCountHelp++)

{

arrHelp= arrList[iCountHelp].split(sForSplit);

if (bOrderByText)

{

sHelp=arrHelp[0];

iHelp=arrHelp[1];

}

else

{

sHelp=arrHelp[1];

iHelp=arrHelp[0];

};

eval(sListTo +".item(iCountHelp).text=sHelp ");

eval(sListTo +".item(iCountHelp).value=iHelp");

};

fillHidden(ListBoxFrom,HiddenFromText,HiddenFromValue);

fillHidden(ListBoxTo,HiddenToText,HiddenToValue);

}

//---------------------------------------------------------

function fillHidden (ListBox,HiddenText,HiddenValue)

{

var iOption;

var sHelp = "";

var iHelp= "";

var sHiddenText = "";

var sHiddenValue = "";

iOption= ListBox.length;

hiddenClear(HiddenText,HiddenValue);

for (var i=0 ;i<iOption; i++)

{

sHelp=ListBox.item(i).text;

iHelp=ListBox.item(i).value;

sHiddenText = sHiddenText + sHelp ;

sHiddenValue = sHiddenValue + iHelp;

if (i != iOption - 1)

{

sHiddenText = sHiddenText + ",";

sHiddenValue = sHiddenValue + ",";

};

HiddenText.value = sHiddenText;

HiddenValue.value = sHiddenValue;

}

//-------------------------------------------------------

function hiddenClear(HiddenText,HiddenValue)

{

HiddenText.value = "";

HiddenValue.value = "";

}

// ]]>

</script>

To the ListBoxesFT_C.ascx.cs (inside UserControls_ListBoxesFT_C) add code which is "carried out " only when _Client = true. For "Load" event this is:

if (!IsPostBack)

{

if (_Client)

{

//fill the Hidden controls according to input DataTable

fillHidden(_DT_In, HiddenFromText, HiddenFromValue);

fillHidden(_DT_Out, HiddenToText, HiddenToValue);

}

else

{

if (_Client)

{

//get _DT_In and _DT_Out "from" the Hidden controls

getDT_Hidden();

buildListBox(ListBoxFrom, _DT_In);

buildListBox(ListBoxTo, _DT_Out);

}

For "PreRender" event this is:

if (_Client)

{

ButtonHTMLFrom.Visible = true;

ButtonHTMLTo.Visible = true;

ButtonHTMLFrom.Attributes.Add("onClick",

"javascript:ButtonHTML_onclick(" +

this.Parent.ID + "." + FindControl(ListBoxFrom.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(ListBoxTo.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(HiddenToText.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(HiddenToValue.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(HiddenFromText.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(HiddenFromValue.ID).ClientID + "," +

_SortByText.ToString().ToLower() + "," + "true" + ")");

ButtonHTMLTo.Attributes.Add("onClick",

"javascript:ButtonHTML_onclick(" +

this.Parent.ID + "." + FindControl(ListBoxFrom.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(ListBoxTo.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(HiddenToText.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(HiddenToValue.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(HiddenFromText.ID).ClientID + "," +

this.Parent.ID + "." + FindControl(HiddenFromValue.ID).ClientID + "," +

_SortByText.ToString().ToLower() + "," + "false" + ")");

}

The full text of the ListBoxesFT_C.ascx.cs you can find in the fourth part. If you do not need that, you can pass to the fifth part.

Good luck in programming !