Validate Bootstrap Modal PopUp using Ajax.BeginForm in ASP.Net MVC

bigbear
 
on Oct 24, 2019 12:34 AM
5199 Views

The modal opens then closes and in a new window the controls of mymodal opens with the validation that should have opened in the modal

<input type="button" class="openModal btn btn-danger" data-quoteid="@Model.ListQuotes[i].QuoteID" value="Edit" />
@using (Ajax.BeginForm("UpdateServiceTables", "Service", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "modal-body"  }))
{
    @Html.AntiForgeryToken()
    <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">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    @Html.HiddenFor(x => x.ServiceVM.QuoteID)
                    @Html.HiddenFor(x => x.ServiceVM.CustomerID)
                    @Html.HiddenFor(x => x.ServiceVM.ContactID)
                    @Html.HiddenFor(x => x.ServiceVM.EmpID)
 
                    <div class="form-group">
                        @Html.LabelFor(x => x.ServiceVM.CustomerName, htmlAttributes: new { @class = "control-label col-3" })
                        <div class="col-9">
                            @Html.TextBoxFor(x => x.ServiceVM.CustomerName, new { @class = "form-control", name = "txtCustName" })
                            @Html.ValidationMessageFor(x => x.ServiceVM.CustomerName, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(x => x.ServiceVM.MachineCount, htmlAttributes: new { @class = "control-label col-3" })
                        <div class="col-9">
                            @Html.TextBoxFor(x => x.ServiceVM.MachineCount, new { @class = "form-control", name = "txtMcount" })
                            @Html.ValidationMessageFor(x => x.ServiceVM.MachineCount, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(x => x.ServiceVM.MachinePrice, htmlAttributes: new { @class = "control-label col-3" })
                        <div class="col-9">
                            @Html.TextBoxFor(x => x.ServiceVM.MachinePrice, new { @class = "form-control", name = "txtMprice" })
                            @Html.ValidationMessageFor(x => x.ServiceVM.MachinePrice, "", new { @class = "text-danger" })
                        </div>
                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <input type="submit" class="btn btn-primary" value="Save" />
                </div> 
            </div>
        </div>
    </div>
}

 

$('.openModal').on('click', function () {
    var quoteid = $(this).attr("data-quoteid");
    $.ajax({
        type: "GET",
        url: "/Service/GetServiceQuote/",
        contentType: "application/json; charset=utf-8",
        data: { "id": quoteid },
        datatype: "Json",
        success: function (data) {
            if (data != null) {
                jsonobj =
                    {
                        "quoteid": data.QuoteID,
                        "customerid": data.CustomerID,
                        "customername": data.CustomerName,
                        "listofsn2s": data.ListOfSN2s,
                        "machinecount": data.MachineCount,
                        "machineprice": data.MachinePrice,
                        "machineaddress": data.MachineAddress,
                        "machinecity": data.MachineCity
                    }
                PopulateModalJSON(jsonobj);
            }
        }
    });
});
function PopulateModalJSON(jsonObject) {
    var modalA = $('#modalInnerSQ');
    var body = $('.modal-body');
    var quoteid = modalA.find(body).find('#ServiceVM_QuoteID');
    var custid = modalA.find(body).find('#ServiceVM_CustomerID');
    var cust = modalA.find(body).find('#ServiceVM_CustomerName');
    var listsn2s = modalA.find(body).find('#ServiceVM_ListOfSN2s');
    var mcount = modalA.find(body).find('#ServiceVM_MachineCount');
    var mprice = modalA.find(body).find('#ServiceVM_MachinePrice');
    var maddress = modalA.find(body).find('#ServiceVM_MachineAddress');
    var mcity = modalA.find(body).find('#ServiceVM_MachineCity');
    if (jsonObject.expirationdate != null) {
        var datePartI = makeDateObject(jsonObject.expirationdate);
        var datePartII = dateToString(datePartI);
    }

    quoteid.val(jsonObject.quoteid);
    custid.val(jsonObject.customerid);
    cust.val(jsonObject.customername);
    listsn2s.val(jsonObject.listofsn2s);
    mcount.val(jsonObject.machinecount);
    mprice.val(jsonObject.machineprice);
    maddress.val(jsonObject.machineaddress);
    OpenServiceQuoteModal();
}
function OpenServiceQuoteModal() {
    $('#modalInnerSQ').modal('show');
}

I have tried with PrtialView but the result is same.

public JsonResult GetServiceQuote(int? id)
{
    if (id == null) { return null; }

    var vm = new ServiceReportViewModel();
    var model = context.Serv_Quotes.Where(x => x.QuoteID == id).FirstOrDefault();

    vm.QuoteID = model.QuoteID;
    vm.CustomerID = model.CustomerID.ToString();
    vm.CustomerName = model.CustomerName;
    vm.MachineCount = model.MachineCount;
    vm.MachinePrice = model.PricePerMachine;
    vm.MachineAddress = model.Address;
    vm.MachineCity = model.City;
    vm.MachineState = model.State;
    vm.MachineZipCode = model.ZipCode;
    return Json(vm, JsonRequestBehavior.AllowGet);
}

[HttpPost]
public ActionResult UpdateServiceTables(ServiceModel model)
{
    model.Customers = GetCustomersSQ();
    model.SerialNumbers = GetSerialNumbersSQ();
    model.City = GetCitiesSQ();
    model.State = GetStatesSQ();

    model.Settings = GetTableSettingsSQ();

    if (ModelState.IsValid)
    {
        var quote = context.Serv_Quotes.Where(x => x.QuoteID == model.ServiceVM.QuoteID).FirstOrDefault();
        quote.QuoteID = model.ServiceVM.QuoteID;
        quote.CustomerName = model.ServiceVM.CustomerName;
        quote.ListOfSN2s = model.ServiceVM.ListOfSN2s;
        quote.MachineCount = model.ServiceVM.MachineCount;
        quote.PricePerMachine = model.ServiceVM.MachinePrice;
        quote.Address = model.ServiceVM.MachineAddress;
        quote.City = model.ServiceVM.MachineCity;
        quote.State = model.ServiceVM.MachineState;
        ////UPDATE Quote Record
        context.Entry(quote).State = EntityState.Modified;
        context.SaveChanges();
        return RedirectToAction("SearchGet", model);
        //return RedirectToAction("Search", model);
    }
    else
    {
        //return View("VirtualService", model);
        //return RedirectToAction("GetServiceQuote", new { id = model.ServiceVM.QuoteID });
        return PartialView("ModalSQUpdate", model);
    }
    //return Json(model, JsonRequestBehavior.DenyGet);           
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 25, 2019 03:53 AM

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">&times;</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.

dharmendr
 
on Oct 28, 2019 05:03 AM

Hi bigbear,

Check this sample without using PartialView.

Model

public class CustomerModel
{
    public int? Id { get; set; }
    public Customer Customer { get; set; }
}

public class Customer
{
    [Required(ErrorMessage = "Name Required!")]
    public string Name { get; set; }
}

Controller

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        return View(new CustomerModel());
    }

    public JsonResult GetServiceQuote(int? id)
    {
        if (id == null) { return null; }
        var vm = new CustomerModel();
        vm.Id = 1;
        Customer c = new Customer();
        c.Name = "Test";
        vm.Customer = c;
        return Json(vm, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult UpdateServiceTables(CustomerModel model)
    {
        if (ModelState.IsValid)
        {
            return RedirectToAction("SearchGet", model);
        }
        return View("VirtualService", model);
    }
}

View

@model _Modal_Popup_Validation_MVC.Models.CustomerModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Index</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
    <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) {
                        if (data != null) {
                            var jsonobj = { "id": data.Id, "name": data.Customer.Name }
                            // Create function to populate Modal
                            PopulateModalJSON(jsonobj);
                        }
                    }
                });
            })
        });

        function PopulateModalJSON(jsonObject) {
            var modalA = $('#modalInnerSQ');
            var body = $('.modal-body');
            var id = modalA.find(body).find('#Id');
            var name = modalA.find(body).find('#Customer_Name');

            id.val(jsonObject.id);
            name.val(jsonObject.name);

            // Open the Modal (It's Populated)
            OpenServiceQuoteModal();
        }

        function OpenServiceQuoteModal() {
            $('#modalInnerSQ').modal('show');
        }
        function CloseServiceQuoteModal() {
            $('#modalInnerSQ').modal('hide');
        }
    </script>
</head>
<body>
    <div class="container">
        <input type="button" class="openModal btn btn-danger" data-quoteid="1" value="Edit" />
    </div>
    @using (Ajax.BeginForm("UpdateServiceTables", "Home", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "ajaxit" }))
    {                                                                                                       //modalInnerSQ
        @Html.AntiForgeryToken()
        <div class="modal" 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="ajaxit">
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        @Html.HiddenFor(x => x.Id)
                        <div class="form-group">
                            @Html.LabelFor(x => x.Customer.Name, htmlAttributes: new { @class = "control-label col-3" })
                            <div class="col-9">
                                @Html.TextBoxFor(x => x.Customer.Name, new { @class = "form-control", name = "txtCustName" })
                                @Html.ValidationMessageFor(x => x.Customer.Name, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Save" />
                    </div>
                </div>
            </div>
        </div>
    }
</body>
</html>
bigbear
 
on Oct 28, 2019 08:06 AM

omg this is all i needed!

HtmlHelper.UnobtrusiveJavaScriptEnabled = true;