1

Anyone who has used jQuery with .NET web applications has more than likely ran into problems where changes made on the client via jQuery don't necessarily persist to the web server during a postback (because of viewstate, security, etc.).

My scenario: I have a GridView with two different ASP.NET dropdowns. One of the dropdowns is populated during the page_load, while the other is left blank. The one that is left blank is populated like thus: when the user selects an item in the first dropdown it fires off an event that uses jQuery ajax to retrieve data from the web server, and this data is then returned to the client and populated into the second dropdown. It's all elementary, and easy and smooth to boot. I love it.

However, what I don't love is the fact that when the user selects an item in the 2nd dropdown (after it has been populated by a jQuery ajax call) and clicks the Save button (which causes a postback) then the dropdown selection comes up empty on the server end (which essentially means the server has no idea that the dropdown had items in it or that a user had selected an item in it). Obviously, this has to do with the fact that the dropdown is empty in the viewstate, and I fully realize the why behind this, but it leaves me very frustrated at trying to mix jQuery with .NET.

So my question is this: How do I go about using jquery to populate an ASP.NET dropdown and have the items in it persist through postback?

Thanks for the help!

Michael Stum
  • 177,530
  • 117
  • 400
  • 535
Jagd
  • 7,169
  • 22
  • 74
  • 107
  • If all you need is the selected value, then regardless of whether or not the ASP.NET pipeline is able to recreate the children of a control that are dynamically populated by the client, it does have access to the form's variables in the Request.Form KVP collection. The problem comes in persisting it if the client needs to reload the page. In which case Christophe's answer can be used to facilitate that. – GunnerL3510 Nov 09 '12 at 00:51

3 Answers3

3

easy answer: don't postback!

use $.post to a handler (.ashx) or any other page and keep stuff there...

still want to postback? no problem then, since you already have the 2nd item id just pre-populate the 1st and 2nd dropdowns upon process the post.

but I would, never postback... I would simply use $.ajax or it's simple form $.post to post my data making me with 2 different pages, one to handle the layout and other to handle the data... This is very common in ASP.NET MVC, but because the way WebForms work, you need to differentiate it like this.

here's my answer for the entire process in other question.

Community
  • 1
  • 1
balexandre
  • 73,608
  • 45
  • 233
  • 342
  • This is probably the best solution, but it would require a rewrite and I just don't have that kind of time, unfortunately. I actually do use $.ajax frequently to save jquery dialogs, but I've never attempted to hook it up to a Save button that would do the entire webpage. I'll have to mess with it more to see if I like the approach or not. – Jagd Nov 12 '12 at 18:03
2

As you say, "the server has no idea that the dropdown had items in it".

My suggestion: use a simple input field instead of the second drop-down, as what you are really doing from the server's viewpoint is post a text string. You can keep that field hidden, and synchronize it with a pure client side drop-down that will serve as interface for the user.

For the record, this is how some select elements work on SharePoint.

Christophe
  • 27,383
  • 28
  • 97
  • 140
1

I've faced this problem before. As a work around I place a HiddenField control next to the second dropdown and populate that hidden field with the same value as the second dropdown. In code behind you can access the HiddenField Value like so:

HiddenFieldID.Value

Notice a hidden field doesn't have a text property, rather a value property.

boruchsiper
  • 2,016
  • 9
  • 29
  • 53