Render partial form in jQuery dialog

Question

Most of you probaly know Nerddinner.com, and my page is much like that, so let's imagine doing this to Nerddinner.

When editing a dinner, you'll be redirected to Dinners/Edit.aspx, and presented of the partial view DinnerForm.ascx of type DinnerFormViewModel.

What if you wan't this DinnerForm presented in a jQuery UI Dialog?

I'm thinking: On the page where you choose to edit the dinner, you'll have a div containing the partial view DinnerForm:

<div id="editDinnerForm">
    <% Html.RenderPartial("DinnerForm", chosenDinnerToEdit); %>
</div>

So when you select a dinner to edit, that div is presented as a jQuery UI Dialog, and the chosen dinner is given to the partial view. (?!)

My question is how I can populate the partial view the current dinner to edit?

Thanks in advance.

Answer 1

I'm not sure if I got your problem right, why can't you just load the partial view via Ajax into your document? In this cause you would just have something like this:

<select onchange="$('#editDinnerForm').load(<url>,{dinner:this.value});">
    <option>Dinner1</option>
    <option>Dinner2</option>
</select>

You could also easily cache these requests so that you don't have to render these partial forms again and again....