Reader Level:
Articles

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

By Michael Livshitz on November 10, 2006
In multi-part article, I share how you can build your own ASP.NET web user control.
  • 0
  • 0
  • 11125

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:

 

<script language="javascript" type="text/javascript">

// <!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 !

Michael Livshitz

Michael is a lead programmer for a large technological firm. He has experience working with .NET projects (ASP.NET and Windows) since 2002. Currently used languages are C#, VB.NET, T-SQL and JavaScript. He also has exper... Read more

COMMENT USING

Trending up