ASP.NET DropDownlists manipulate with AJAX

AJAX don’t work with ASP.NET ViewState

How to add or remove DropDownList-ListItems with Javascript and the ViewState already works?

Sometimes its an big advantage to use the ASP.NET ViewState for controlls like DropDownLists. One of this is you can use comfortable return values from this controls in the background code. Thats occures if you had build a “dynamic” webpage and the controls were build up data-driven, e.g. with values fetched out of a database.

But if you use intensly the ViewState mechanism, it meens you wand to read the values from the controls, e.g. DropDownLists, after a Postback, the dynamic from your ASP.NET webpage don’t allow AJAX manipulation on this ViewState using controls.

DropDownList-and -AJAX

Add all possible ListItems already with server code …
… and remove unused LIstItems with jQuery.

  1. Add all DropDownList ListItems, which you want to use later with AJAX on server-side (in the code behindert)
  2. Mark ListItems which you don’t want, e.g. with the value=displayNone, for …
  3. … remove the marked ListItems with jQuery in the browser
  4. Make AJAX interactions with the DropDownList control
  5. Now, after a ASP.NET-Postback all attributes like .SelectedItem or .SelectedValue were possible and known

Technicaly its explanable with the possibilities from HTTP and HTML. Its the upward approached ViewState which can be used after a ASP.NET reload, a Postback. All ASP.NET dynamic parts are nested within a form tag with runat=server attribute (<form runat="server">), the “ViewState” would be store in a hidden field and will send back to the server with a HTTP POST. The ASP.NET mechanism don’t send new added HTML elements added with AJAX. Only this which were stored in the actual page-ViewState.

The only disadvantage is you have to know all values, which you want to add new later with your Ajax interactions till the next postback. (ASP page live cycle or server-side event like a asp:button with runat=server)

Codebehing .aspx.cs // Part. 1

Add all DropDownList ListItems, which you want to use later with AJAX on server-side (in the code behindert)

Add all possible ListItems to DropDownList, but mark it to remove the unused with jQuery.

SearchValueTwo.Items.Clear();

// add ListItems
foreach(string n in ListItems)
{
	ListItem Item = new ListItem(n, HttpUtility.UrlEncode(n));
	if(n == ValueChangesWithAJAX.Text)
	{
		Item.Selected = true;
	}
	SearchValueTwo.Items.Add(Item);
}

// add all other ListItems, which were possible with AJAX, but mark them
// to remove it after PageLoad with jQuery
string[] Others = AllListItems.Except(ListItems).ToArray();

foreach(string n in Others)
{
	ListItem Item = new ListItem("displayNone", HttpUtility.UrlEncode(n));
	SearchValueTwo.Items.Add(Item);
}

.ASPX

Remove the marked ListItems with jQuery in the browser

$("select#SearchValueTwo option").each(function (index)
{
	// search for all not jet displayed ListItems
	var that = $(this);
	if (that.text() == "displayNone")
	{
		that.remove();
	}
});
...
<asp:DropDownList ID="SearchValueTwo" ClientIDMode="Static" runat="server" />

Codebehing .aspx.cs // Part. 2

If IsPostBack ASP.NET ViewState attributes were known.

Attributes like .SelectedItem or .SelectedValue were known.

// read selected ListItems
if(IsPostBack)
{
	// Get search params from UI for displayed items
	SearchValue = SearchValueOne.SelectedItem.Value;

	ValueChangesWithAJAX.Text = HttpUtility.UrlDecode(SearchValueTwo.SelectedValue);
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress PlugIns & E-Commerce - Kometschuh © 2024