How to ajax load a parent-child listbox in JQuery/Asp.net MVC popup?

Question

hi guys,

i'm new to the asp.net mvc. and i have a link which will popup show a 3 panes listbox which allows the user to select country, region and language.

and when the user click on the language, this will redirect back to the controller and refresh the page and show the proper localized content.

i was thinking of using a jquery dialog/modal to do this but so i try using fancybox for this which will load the hidden div of the three listbox up.

is there a better way to do this? or i'm not using the proper jquery plugin? i was thinking of putting the whole three panes inside a html file and do ajax call to get the content into that page and load the listbox like that and just use the html popup like a normal popup.

Any suggestions? i'm stuck, help!!

Answer 1

You could use a partial view in ASP.Net MVC to store the pop-up window. If you use ASP.Net MVC 2 you can include the Partial View in your page using

<% Html.RenderAction("LanguageSelection", "SomeController") %>

Let your controller return a PartialView() in stead of a View().

If you use ASP.Net MVC 1, download the ASP.Net MVC 1 futures for this functionality.

Then, you can use any modal dialog box plugin you want. I prefer using the JQuery UI Dialog, but I'm sure prettybox will work in a similar way.

After the listbox is selected, submit the form. On the partialview you can do something like:

     // POST:   
     [AcceptVerbs(HttpVerbs.Post)]  
     public ActionResult LanguageSelect(...)  
     {  
         ...
         [Change language setting somehow]
         return RedirectToAction(...);
     }