Blog Archives

How to open partial view as modal dialog in asp.net mvc

Asp.Net MVC is picking up fast and yet there is not much expertise around it. Main reason I feel is now developer has complete control on markup so they approach in different ways. It is difficult to for a beginner to implement any design principles.

Anyway, today I am going to showcase how to open a partial view dynamically as a popup using Jquery. I am hoping you have basic idea of how MVC works and you know the Jquery syntax.

View code: Main page ProductView.cshtml. click on the image to see the .cshtml code.
wordpress

Partial view html for list.
code2

Old classic view of productList page (it is also a partial view which rendres as a grid) with edit/delete links in each row. When you click on edit link in the grid, updateDialog div will open as a modal popup and load a partial view in that div dynamically using below code.

Controller action method which returns the partial view to be loaded in div updateDialog.

public ActionResult EditPartialGet(int id)
{
ProductViewModel productVM = new ProductViewModel();
Product p = new Product();
p = productVM.GetById(id);
return PartialView("ProductUpdatePartial",p);
}

finally jquery code to open popup and load partial view using ajax call.

$(function () {
// on click of editLink in grid.
$(“#editLink”).live(‘click’, function () {

var hrefValue = $(this).attr(“href”);
var index = hrefValue.lastIndexOf(“/”) + 1;
var productId = hrefValue.substring(index, hrefValue.length);
// this will call EditPartialGet action method in Products controller which returns
// a partial view html.
$.ajax({
type: “GET”,
url: “Products/EditPartialGet?id=” + productId,
datatype: “json”,
contentType: “application/json”,
success: function (data) {
$(“#updateDialog”).html(data);// returned data is an html view which will be rendered inside the div.
return false;
},
error: function (a, b, c) { alert(b); }
});

$(“#updateDialog”).dialog(
{
modal: true,
buttons: {
// in modal dialog popup Save button will be created. write what you want to do here.
Save: function () {

var ctx = $(“#updateDialog”);
debugger;
// parse the DOM within context of div id.
var product = {
ProductID : $(“#ProductID”,ctx).val(),
ProductName : $(“#ProductName”,ctx).val(),
SupplierID : $(“#SupplierID”, ctx).val(),
CategoryID : $(“#CategoryID”, ctx).val(),
QuantityPerUnit: $(“#QuantityPerUnit”, ctx).val(),
UnitPrice : $(“#UnitPrice”, ctx).val(),
UnitsInStock : $(“#UnitsInStock”, ctx).val(),
UnitsOnOrder : $(“#UnitsOnOrder”, ctx).val(),
ReorderLevel : $(“#ReorderLevel”, ctx).val(),
Discontinued : $(“#Discontinued”, ctx).attr(“checked”)
};

$.ajax({
type: “POST”,
url: “Products/Update”,
data: JSON.stringify(product),
datatype: “json”,
contentType: “application/json”,
success: function (data) {
// submit the data
alert(‘done’);
return false;
},
error: function (a, b, c) { debugger; alert(b); }
});

$(“#updateDialog”).dialog(‘close’);
return false;
},
Cancel: function () { $(“#updateDialog”).dialog(‘close’); }
}
});
return false;
});
});

I think the above code is all you need to implement dynamically loading of partial view in a div.

I hope it helps.

Advertisements