bootstrap modal popup with mvc5

when i click on edit link for open modal popup it fills with previous data...?

i'm using partial view..

my partial view given below

@using (Html.BeginForm("Save", "Stock", FormMethod.Post, new { role = "dialog", id = "EditForm" }))

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.HiddenFor(model => model.PKStockInId)

@Html.Label("Product", htmlAttributes: new { @class = "control-label col-md-2" })

@Html.DropDownList("PKProductId", (IEnumerable)ViewBag.Prod, "Select", new { @class = "form-control", @id = "ddlProduct" })

@Html.ValidationMessageFor(model => model.PKProductId, "", new { @class = "text-danger" })

@Html.Label("Quantity", htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })

@Html.Label("Unit", htmlAttributes: new { @class = "control-label col-md-2" })

@Html.DropDownList("PKUnitId", (IEnumerable)ViewBag.Unit, "Select", new { @class = "form-control", @id = "ddlUnit" })

@Html.ValidationMessageFor(model => model.PKUnitId, "", new { @class = "text-danger" })

@Html.Label(" Unit Price", htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.UnitPrice, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.UnitPrice, "", new { @class = "text-danger" })

@Html.Label("Total Price", htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.TotPrice, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.TotPrice, "", new { @class = "text-danger" })

@Html.Label("Stock Date", htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.StockDate, new { htmlAttributes = new { @class = "form-control", @id = "datepicker" } })

@Html.ValidationMessageFor(model => model.StockDate, "", new { @class = "text-danger" })

}

main view is given below...

link loads popup given below

Refer the following Link:

http://www.c-sharpcorner.com/blogs/bootstrap-modal-popup-using-asp-net-mvc

I would recommend using AJAX and a single 'Edit' modal which would be cleared and repopulated when the user clicks 'edit' for each row.

Essentially, you will have a partial view which will be called via AJAX and injected onto the page, the method will have a parameter of productId.

Template

Please note the important part here is the onclick attribute of the edit button.

Javascript

$(function() {
$('.editModal').modal();
});
function editProduct(productId) {
$.ajax({
url: '/Product/GetProductDetailsModal/' + productId, // The method name + paramater
success: function(data) {
$('#modalWrapper').html(data); // This should be an empty div where you can inject your new html (the partial view)
}
});
}

Add the following to your top-level view

1 Reply

Know the answer? Post it — somebody with the same question will find it here.