Link to home
Start Free TrialLog in
Avatar of skaleem1
skaleem1Flag for Canada

asked on

Reading htmlSelect items from the C# code behind

I am trying to implement the client side listbox using javascript. I am trying to fill two htmlSelect listboxes and am able to fill the first listbox successfully by feeding the data from a dataset. Here is the code behind:
 
string
js = "";
foreach (DataRow row in dsDropDown.Tables[COUNTRIES].Rows)
{
js = js +
"AddItem('" + lstCountries.ClientID + "', '" + row["CountryNM"].ToString().Replace("'", "") + "', '" + row["CountryID"].ToString() + "'); ";
}
Page.ClientScript.RegisterStartupScript(
this.GetType(), "AddItem", js, true);

and here is the javascript function:
 
function
AddItem(selectbox, text, value )
{
var optn = document.createElement("option");
optn.text = text;
optn.value = value;
if(selectbox='lstCountries')
var elSel = document.getElementById('lstCountries');
else if(selectbox='lstCountriesofOrigin')
var elSel = document.getElementById('lstCountriesofOrigin');
elSel.add(optn);
}
and here are the aspx htmlSelect object defined:
 
<p><select id="lstCountries" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px">
</select></p>
<p><select id="lstCountriesofOrigin" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px">
</select></p>

The first htmlSelect listbox named lstCountries is populated successfully. When I tried to populate the second htmlSelect  listbox lstCountriesofOrigin using the same javascript function called from the following code behind loop, I am having problems reading the items from the lstCountries htmlSelect listbox. The items I added to this htmlSelect liatbox using the javascript function in the above code are no longer there and the lstCountries.Items.Count is zero. Here is the code behind I am trying to use:
foreach
(DataRow row in dsSearchResults.Tables[COO].Rows)
{
foreach (DataColumn column in dsSearchResults.Tables[COO].Columns)
{
if (column.ColumnName.ToString() == "CountryNM")
{
for (int i = 0; i < lstCountries.Items.Count; i++)
{
if (lstCountries.Items[i].Text == row["CountryNm"].ToString())
{
js = js +
"AddItem('" + lstCountriesofOrigin.ClientID + "', '" + row["CountryNM"].ToString().Replace("'", "") + "', '" + row["CountryID"].ToString() + "'); ";
break;
}
}
}
}
}
Page.ClientScript.RegisterStartupScript(
this.GetType(), "AddItem", js, true);
Any ideas why I am not getting the already added items in the lstCountries listbox? Why are they lost and what is the way to get the added items info in the code behind?
Avatar of magicdlf
magicdlf

Let me have a guess. You have a button and need to click the button to populate the second listbox, right? If the button is server side, your page will be refreshed, that's why your data in the first listbox is lost. I am not sure if this is your case.
Avatar of skaleem1

ASKER

This is one of the issues I am going to face once I reach that step. Currently, my issue is regarding the fact that the items in the first htmlSelect listbox populated with data through client-side javascript are lost when I try to access the same htmlSelect listbox through my C# codebehind. Does it make sense?
I am still not sure what do you want exactly. Did you try to use the server side controls instead of the client side listbox? I think your problem is that you need to find a way to make the data persists while you are refreshing the form (which will call your C# codebehind). Am I right?
magicdlf,

As you can see in the code, I am using the htmlSelect control which is a client side html control used as a substitute for the server side asp listbox control. The reason I chose the client side htmlSelect control is to avoid the annoying postbacks that always happen when using server controls such as listbox. Everytime you select an item from the server side listbox control or try to add remove items from it, a postback occurs that is annoying to the users. I want to avoid this. In order to implement the client side htmlSelect control, I first added the items fed from a dataset as shown in the following block of code:

foreach (DataRow row in dsDropDown.Tables[COUNTRIES].Rows)
                {
                    js = js + "AddItem('" + lstCountries.ClientID + "',  '" + row["CountryNM"].ToString().Replace("'", "") + "', '" + row["CountryID"].ToString() + "'); ";
                }

                Page.ClientScript.RegisterStartupScript(this.GetType(), "AddItem", js, true);

The java script function AddItem called from the loop above adds the items to the htmlSelect control as follows:

function
AddItem(selectbox, text, value )
{
var optn = document.createElement("option");
optn.text = text;
optn.value = value;
if(selectbox='lstCountries')
var elSel = document.getElementById('lstCountries');
else if(selectbox='lstCountriesofOrigin')
var elSel = document.getElementById('lstCountriesofOrigin');
elSel.add(optn);
}

Here is the html control:

<p><select id="lstCountries" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px">          
        </select></p>
        <p><select id="lstCountriesofOrigin" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px">          
        </select></p>


The issue I am having is that the items added to the htmlSelect control in the above code do not seem to persist when I try to reference those items from the code behind to add items to another htmlSelect as shown below:

foreach
(DataRow row in dsSearchResults.Tables[COO].Rows)
{
foreach (DataColumn column in dsSearchResults.Tables[COO].Columns)
{
if (column.ColumnName.ToString() == "CountryNM")
{
for (int i = 0; i < lstCountries.Items.Count; i++)
{
if (lstCountries.Items[i].Text == row["CountryNm"].ToString())
{
js = js +
"AddItem('" + lstCountriesofOrigin.ClientID + "', '" + row["CountryNM"].ToString().Replace("'", "") + "', '" + row["CountryID"].ToString() + "'); ";
break;
}
}
}
}
}
Page.ClientScript.RegisterStartupScript(
this.GetType(), "AddItem", js, true);

The line of code above shows that lstCountries.Items.Count  is zero, which should not be the case as I have just added items to this lstCountries control through javascript above.

I hope this time I have explained better, what do you think?




ASKER CERTIFIED SOLUTION
Avatar of Solar_Flare
Solar_Flare

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Solar_Flare:

Thanks for your reply. This is exactly the case however I have now been able to maintain a hashtable on the server side to utilize the values for the listitem I added. Here is the code modified on the code behind:

Hashtable hshTableCountries = new Hashtable();
            Hashtable hshTableCountriesofOrigin = new Hashtable();

            string js = "";
            foreach (DataRow row in dsDropDown.Tables[COUNTRIES].Rows)
            {
                js = js + "AddItem('" + lstCountriesAll.ClientID + "',  '" + row["CountryNM"].ToString().Replace("'", "") + "', '" + row["CountryID"].ToString() + "'); ";
                hshTableCountries.Add(row["CountryID"].ToString(), row["CountryNM"].ToString().Replace("'", ""));
            }

Below I am using the hash table to retrieve the values I added to the html select listbox:

foreach (DataRow row in dsSearchResults.Tables[COO].Rows)
            {
                foreach (DataColumn column in dsSearchResults.Tables[COO].Columns)
                {
                    if (column.ColumnName.ToString() == "CountryNM")
                    {
                        for (int i = 1; i < hshTableCountries.Count; i++)
                        {
                            if (hshTableCountries[i.ToString()].ToString() == row["CountryNm"].ToString())
                            {
                                js = js + "AddItem('" + lstCountriesofOrigin.ClientID + "',  '" + row["CountryNM"].ToString().Replace("'", "") + "', '" + row["CountryID"].ToString() + "'); ";
                                hshTableCountriesofOrigin.Add(row["CountryID"].ToString(), row["CountryNM"].ToString().Replace("'", ""));
                                js = js + "RemoveItem('" + lstCountriesAll.ClientID + "',  '" + row["CountryNM"].ToString().Replace("'", "") + "', '" + row["CountryID"].ToString() + "'); ";
                                break;
                            }
                        }
                    }
                }
            }

Thanks a lot anyways and because your reply answers the point, I will give you the points.