Menu
I am a completely new to mvc and trying to create a dummy application to learn mvc 3. I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application. With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.
so far I have
<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> Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views? How do I update the controller class to cater for the partial view?
Sorry if these are easy to do, im 3 days into mvc :)
685
In order to add Partial View, you will need to Right Click inside the Controller class and click on the Add View option in order to create a View for the Controller.
You can't render a partial view using only jQuery. You can, however, call a method (action) that will render the partial view for you and add it to the page using jQuery/AJAX.
To create a partial view, right-click on view -> shared folder and select Add -> View option. In this way we can add a partial view. It is not mandatory to create a partial view in a shared folder but a partial view is mostly used as a reusable component, it is a good practice to put it in the "shared" folder.
JavaScript functions can be bound to elements on the partial view; the partial view is rendered at the same time as the parent view. This happens when loading the partial view with a @Html.
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 the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:
public ActionResult CreateAlbumPartial() { return View("_CreateAlbumPartial"); } To improve Darin answer, we can move the div loading code in the button click event. In this way all position's alghorithms of the dialog works on the new text, and so the dialog 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;"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
