Hi bigbear,
Please follow these steps.
1. Create the class for properties with data annotation for validation purpose.
This class will be used to validate the user input in model popup.
public class CustomerModel
{
[Required(ErrorMessage = "Name is required.")]
public string Name { get; set; }
}
2. Add partial view and place the html with ValidationMessageFor to show inside the modal body.
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<_Ajax_BeginForm.Models.CustomerModel>" %>
<%:Html.AntiForgeryToken() %>
<%:Html.ValidationSummary(true, "", new { @class = "text-danger" })%>
<table>
<tr>
<td>Name</td>
<td>
<%:Html.TextBoxFor(model => model.Name)%>
<%:Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })%>
</td>
</tr>
</table>
3. Add code in controller for Ajax call and update.
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View(new CustomerModel());
}
[ValidateAntiForgeryToken]
[HttpPost]
[HandleError]
public ActionResult UpdateServiceTables(CustomerModel model)
{
if (ModelState.IsValid)
{
ModelState.Clear();
return PartialView("_SearchCustomer", model);
}
return PartialView("_SearchCustomer", model);
}
public JsonResult GetServiceQuote(int? id)
{
if (id == null) { return null; }
var vm = new CustomerModel();
vm.Name = "Test";
return Json(vm, JsonRequestBehavior.AllowGet);
}
}
4. Add View and modal popup html.
Privide id to modal-body and render the Partial View inside the modal-body.
Set modal-body id as UpdateTargetId for AjaxOptions.
<input type="button" class="openModal btn btn-danger" data-quoteid="1" value="Edit" />
<%using (Ajax.BeginForm("UpdateServiceTables", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "modalbody" }))
{%>
<div class="modal fade" id="modalInnerSQ" tabindex="-1" role="dialog" aria-labelledby="lblSQmodal"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<b>Service Quote Details</b></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modalbody">
<%:Html.Partial("_SearchCustomer")%>
</div>
<div class="modal-footer">
<input type="submit" name="btnUpdate" value="Update" />
</div>
</div>
</div>
</div>
<% } %>
5. Write javascript code to open the modal on button click.
<script type="text/javascript">
$(function () {
$('.openModal').on('click', function () {
var quoteid = $(this).attr("data-quoteid");
$.ajax({
type: "GET",
url: "/Home/GetServiceQuote/",
contentType: "application/json; charset=utf-8",
data: { "id": quoteid },
datatype: "Json",
success: function (data) {
var modalA = $('#modalInnerSQ');
var body = $('.modal-body');
var quoteid = modalA.find(body).find('#Name');
$(quoteid).val(data.Name);
OpenServiceQuoteModal();
}
});
});
});
function OpenServiceQuoteModal() {
$('#modalInnerSQ').modal('show');
}
</script>
Then run and check.
Screenshot
Note: In this example i have hardcoded some values. You need to change as per your database values.
