Loading partial view in jquery.dialog

Question

I am completely new to mvc and trying to create a dummy application for learning mvc 3. I worked my way through the music store example and now I am trying to expand it in a more real world. With an example, when you want some new element, you are redirected to Create, but that’s good, but I want instead of doing a full page post back. I want to use jquery.dialog to open a modal popup that will allow the user to insert a new element.

still i

<script type="text/javascript"> $(function () { $('#dialog').dialog({ autoOpen: false, width: 400, resizable: false, title: "hi there", modal: true, buttons: { "Close": function () { $(this).dialog("close"); } } }); $('#my-button').click(function () { $('#dialog').dialog('open'); });}); </script> <div id="dialog" title="Create Album" style="overflow: hidden;"> @Html.Partial("_CreateAlbumPartial")</div> 

The problems with this is a partial view that is not loaded every time through ajax, and I don’t know where I should place the partial view. Shoukld is it in a general location or in a folder with other views? How to update the controller class for partial viewing?

Sorry if this is easy to do, im 3 days in mvc :)

Answer 1

Try something like this:

 <script type="text/javascript"> $(function () { $('#dialog').dialog({ autoOpen: false, width: 400, resizable: false, title: 'hi there', modal: true, open: function(event, ui) { //Load the CreateAlbumPartial action which will return // the partial view _CreateAlbumPartial $(this).load("@Url.Action("CreateAlbumPartial")"); }, buttons: { "Close": function () { $(this).dialog("close"); } } }); $('#my-button').click(function () { $('#dialog').dialog('open'); }); }); </script> <div id="dialog" title="Create Album" style="overflow: hidden;"> 

We used an open function that runs when the dialog opens and inside we send an AJAX request to the controller action, which returns a partial:

 public ActionResult CreateAlbumPartial() { return View("_CreateAlbumPartial"); } 

Answer 2

To improve Darin’s answer, we can move the div loading code to the button click event. Thus, all new dialogue algorithms are displayed in the new text, so the dialogue is placed correctly.

 <script type="text/javascript"> $(function () { $('#dialog').dialog({ autoOpen: false, width: 400, resizable: false, title: 'hi there', modal: true, buttons: { "Close": function () { $(this).dialog("close"); } } }); $('#my-button').click(function () { //Load the CreateAlbumPartial action which will return // the partial view _CreateAlbumPartial $('#dialog').load("@Url.Action("CreateAlbumPartial")", function (response, status, xhr) { $('#dialog').dialog('open'); }); }); }); </script> <div id="dialog" title="Create Album" style="overflow: hidden;">