can you load a new page into a jquery ui dialog with asp.net mvc

Question

i have a regular html Grid and i am binding my asp.net mvc view to a strongly typed array called MyObject[]. MyObject has 40 properties but i only populate 10 of them because that is what is shown on the main grid. this is in the index view.

i want to add a column to my grid to have a link that says "Edit Details". this would bring up jquery ui dialog with a form to fill out and allow the user to edit the details. i basically want to show my whole edit view inside the jquery ui dialog on top of the index page.

the one issue that i have is there is a lot more data in the details screen than i have brought down from the server. This was fine when Edit was a seperate page because i went back to the server and populated all the detail data and then did the binding the the edit page but i obviously can't do that now.

So, is there anyway to rebind to a particular MyObject that I repopulate from the server or do i have to bring everything down at first and use jquery to populate these fields when i click on the row.

Answer 1

Why not do a partial post back using jQuery to get the model you want to edit? then you can return either the model or a RenderParttial and simply display the generated html in the dialog.

if you need samples let me know.

EDIT

$.post("/Controller/jQueryMethod", { param: paramValue }, function(newCommentListHTML) {
  //do something interesting with the html
});

The above will do a jquery post back to your controller and an action called jQueryMethod.

It also passes a single parameter. Comma seperate these if you want more.

Your controller then grabs the model and it can then pass the model to a PartialView which it then returns.

Much like this return RenderPartial("PartialView", model);

Answer 2

This is a typical design pattern and there are numerous ways to accomplish the task. Here is how I would do it:

Add an onclick handler to your edit link, use it to call a javascript function and pass your record id as a parameter. Use jQuery's getJSON function to perform an AJAX call to your controller.

$.getJSON("/Home/GetDetails/" + yourRecordId, function (data) {
            doSomething(data);
        });

Call a method on your controller that returns a JsonResult.

    public JsonResult GetDetails(int? id)
    {
        Array MyObject = GetDetails(id)
        return Json(MyObject); // MVC 1.0
        //return Json(MyObject, JsonRequestBehavior.AllowGet); // MVC 2.0
    }

Use the callback function to bind your results and display the details in a modal popup.

This assumes the details will fit on a modal popup. If they don't then I would consider keeping your details in a separate view. A good MVC design takes into account a logical separation of concerns. If your view is actually serving two purposes (i.e. list and edit) then this is an ideal reason to split it into two separate views.

See http://stackoverflow.com/questions/659858/asp-net-mvc-json-result-parameters-passed-to-controller-method-issue for more details on passing parameters.