locked
C# MVC Modal Validation not running on UPDATE RRS feed

  • Question

  • User-544325736 posted

    Hello All,

    I have a C# view that opens a Modal on a button click of a record.

    When I click the save button if the record is correct it saves it perfectly. If but record is not valid it skips the validation from displaying in the modal and just goes back to my view runs everything outside of if (ModelState.IsValid)

    How can I display my validation in my modal?

    <div class="modal fade" id="modalInnerSQ" tabindex="-1" role="dialog" aria-labelledby="lblSQmodal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                @*   *@
                @using (Html.BeginForm("UpdateServiceTables", "Service", FormMethod.Post, new { model = Model.ServiceVM }))
                {
                    <div class="modal-header">
                        <h3 class="modal-title">Service Quote Details</h3>
                        <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)
     <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" })
                                @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" })
                                @Html.ValidationMessageFor(x => x.ServiceVM.MachineCount, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        }
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        @* SAVE BUTTON  [ <button} or form <input> ]*@
                        <input type="submit" class="btn btn-primary" value="Save" />
                        @*@Html.ActionLink("Save", "UpdateServiceTables", "Service", new { model = Model }, new { @class="btn btn-primary" })*@
                    </div>
                }
            </div>
        </div>
    </div>
    
    Controller
            [HttpPost]
            public ActionResult UpdateServiceTables(ServiceModel model)
            {
                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;
     context.Entry(quote).State = EntityState.Modified;
                    context.SaveChanges();
     return RedirectToAction("SearchGet", model);
                    //return RedirectToAction("Search", model);
                }
                //return RedirectToAction("GetServiceQuote", new { id = model.ServiceVM.QuoteID });
                //return Json(model, JsonRequestBehavior.DenyGet);
                return RedirectToAction("SearchGet", model);
            }

    Monday, October 21, 2019 4:32 PM

Answers

  • User-17257777 posted

    Hi ExceedingLife,

    In addition to the method mgebhard mentioned, I think it is better to do the validation at the client side, you don't need to re-open the modal. You can use jquery form validation to implement this. Test with the following codes:

    View:

    <div class="modal fade" id="modalInnerSQ" tabindex="-1" role="dialog" aria-labelledby="lblSQmodal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                @*   *@
                @using (Html.BeginForm("UpdateServiceTables", "Service", FormMethod.Post, htmlAttributes: new { Id = "myform" }))
                {
                    <div class="modal-header">
                        <h3 class="modal-title">Service Quote Details</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @Html.HiddenFor(x => x.ServiceVM.QuoteID)
                        <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 = "CustomerName" })
                            </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 = "MachineCount" })
                            </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>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalInnerSQ">
        Launch demo modal
    </button>
    
    <style>
        .errors {
            color: red
        }
    </style>
    
    @section scripts{
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#myform').validate({ 
                    errorClass: 'errors',
                    rules: {
                        CustomerName: {
                            required: true
                        },
                        MachineCount: {
                            required: true
                        }
                    },
                    messages: {
                        CustomerName: {
                            required: "CustomerName is required!"
                        },
                        MachineCount: {
                            required: "MachineCount is required!"
                        }
                    }
                });
            })
        </script>
    }
    
    
    
    

    Controller:

    [HttpPost]
            public ActionResult UpdateServiceTables(ServiceVM serviceVM)
            {
                //your codes
                ServiceModel model = new ServiceModel();
                model.ServiceVM = serviceVM;
                return RedirectToAction("SearchGet", model);
            }

    Result:

    Best Regards,

    Jiadong Meng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 22, 2019 8:57 AM

All replies

  • User475983607 posted

    Your code is functioning as expected but not has you expect. 

    The main issue is the code does a POST then a redirect (GET) when the model is invalid.  This causes the browser to refresh the page with new content.  That content does not include re-opening the model and displaying the model validation.

    Simply follow standard MVC model validation patters and return the same View.  You need to write a little JavaScript to re-open the modal so the user can see the error.

    Monday, October 21, 2019 6:05 PM
  • User-17257777 posted

    Hi ExceedingLife,

    In addition to the method mgebhard mentioned, I think it is better to do the validation at the client side, you don't need to re-open the modal. You can use jquery form validation to implement this. Test with the following codes:

    View:

    <div class="modal fade" id="modalInnerSQ" tabindex="-1" role="dialog" aria-labelledby="lblSQmodal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                @*   *@
                @using (Html.BeginForm("UpdateServiceTables", "Service", FormMethod.Post, htmlAttributes: new { Id = "myform" }))
                {
                    <div class="modal-header">
                        <h3 class="modal-title">Service Quote Details</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @Html.HiddenFor(x => x.ServiceVM.QuoteID)
                        <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 = "CustomerName" })
                            </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 = "MachineCount" })
                            </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>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalInnerSQ">
        Launch demo modal
    </button>
    
    <style>
        .errors {
            color: red
        }
    </style>
    
    @section scripts{
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#myform').validate({ 
                    errorClass: 'errors',
                    rules: {
                        CustomerName: {
                            required: true
                        },
                        MachineCount: {
                            required: true
                        }
                    },
                    messages: {
                        CustomerName: {
                            required: "CustomerName is required!"
                        },
                        MachineCount: {
                            required: "MachineCount is required!"
                        }
                    }
                });
            })
        </script>
    }
    
    
    
    

    Controller:

    [HttpPost]
            public ActionResult UpdateServiceTables(ServiceVM serviceVM)
            {
                //your codes
                ServiceModel model = new ServiceModel();
                model.ServiceVM = serviceVM;
                return RedirectToAction("SearchGet", model);
            }

    Result:

    Best Regards,

    Jiadong Meng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 22, 2019 8:57 AM
  • User-544325736 posted

    This is exactly what I was looking for. 

    But I do have 1 question. Is there a way I can get my Model to work as the normal validation instead of having to rewrite this validation in JavaScript?

     public class ServiceReportViewModel
        {
            [Display(Name = "Quote ID")]
            public int QuoteID { get; set; }
            public string SN1 { get; set; }
            public string SN2 { get; set; }
            [Display(Name = "List of SN2's")]
            public string ListOfSN2s { get; set; }
            [Display(Name = "Customer ID")]
            public string CustomerID { get; set; }
            [Display(Name = "Customer Name")]
            [Required(ErrorMessage = "Customer Name MUST be filled out.")]
            public string CustomerName { get; set; }
            [Display(Name = "Machine Count")]
            public int? MachineCount { get; set; }
            [Display(Name = "Machine Price")]
            public int? MachinePrice { get; set; }
            [Display(Name = "Machine Address")]
            [Required]
            public string MachineAddress { get; set; }
            [Display(Name = "Machine City")]
            public string MachineCity { get; set; }
            [Display(Name = "Machine State")]
            public string MachineState { get; set; }
            [Display(Name = "Machine Zip Code")]
            public string MachineZipCode { get; set; }
            [Display(Name = "Machine Country")]
            public string MachineCountry { get; set; }
            [Display(Name = "Expiration Date")]
            [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
            public DateTime? ExpirationDate { get; set; }
            [Display(Name = "Contact ID")]
            public string ContactID { get; set; }
            [Display(Name = "Contact Name")]
            public string ContactName { get; set; }
            [Display(Name = "Contact Email")]
            public string ContactEmail { get; set; }
            [Display(Name = "Contact Phone")]
            public string ContactPhone { get; set; }
            [Display(Name = "Employee ID")]
            public string EmpID { get; set; }
            [Display(Name = "First Name")]
            public string EmpFirstName { get; set; }
            [Display(Name = "Last Name")]
            public string EmpLastName { get; set; }
            [Display(Name = "Email")]
            public string EmpEmail { get; set; }
            [Display(Name = "Position")]
            public string EmpPosition { get; set; }

    Tuesday, October 22, 2019 1:48 PM
  • User475983607 posted

    But I do have 1 question. Is there a way I can get my Model to work as the normal validation instead of having to rewrite this validation in JavaScript?

    And openly explained above.  1) Return the original view which has the validation HTML.   This is a standard MVC pattern found in any getting started tutorial.   2) Open the modal when there is a Model Validation error.  Generally, modals are hidden when a page first loads. 

    Tuesday, October 22, 2019 2:39 PM
  • User475983607 posted

    Basic example...

    Model

        public class MainVm
        {
            public ServiceVM ServiceVM { get; set; }
        }
        public class ServiceVM
        {
            public int QuoteID { get; set; }
            [Required]
            public string CustomerName { get; set; }
            [Required]
            public int MachineCount { get; set; }
        }

    Actions

            // GET: BsModal/Modal
            public ActionResult Modal()
            {
                return View();
            }
    
            [HttpPost]
            public ActionResult Modal(MainVm vm)
            {
                ViewBag.IsValid = ModelState.IsValid;
                if (ModelState.IsValid)
                {
                    //Save
      return RedirectToAction("Modal"); } return View(vm); }

    View

    @model MainVm
    @{
        ViewData["Title"] = "Modal";
    }
    
    <h1>Modal</h1>
    <div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalInnerSQ">
            Launch demo modal
        </button>
    </div>
    
    
    <div class="modal fade" id="modalInnerSQ" tabindex="-1" role="dialog" aria-labelledby="lblSQmodal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                @using (Html.BeginForm("Modal", "BsModal", FormMethod.Post))
                {
                    <div class="modal-header">
                        <h3 class="modal-title">Service Quote Details</h3>
                        <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)
                        <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" })
                                @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" })
                                @Html.ValidationMessageFor(x => x.ServiceVM.MachineCount, "", 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>
    
    @section scripts {
    
        @if (ViewBag.IsValid != null && !(bool)ViewBag.IsValid)
        {
            <script>
                $('#modalInnerSQ').modal('show');
            </script>
        }
    
        <script>
            $('#ServiceVM_QuoteID').val(1);
        </script>
    
    }

    Tuesday, October 22, 2019 2:56 PM
  • User-544325736 posted

    So I am EXTREMELY close to having this working.

    I can open my modal and populate it correctly. When I click the save button my validation runs BUT it opens it to a new window (like a new view of all the controls of my modal) and the validation messages show up.

    It gets rid of the pop up window it was in and opens it as a new window with all the correct validation messages.

    How can I keep my modal open and just have my validation messages show in the modal?

            [HttpPost]
            [ValidateAntiForgeryToken]
            [HandleError]
            public ActionResult SQUpdateRecord(ServiceModel model)
            {
                if (ModelState.IsValid)
                {
                    ///UPDATE Quote Record
                    //Search Customer by NAME to update CORRECT ID
                    //Split SN2s up by ','
                    /// Possibly Search by ContactName to update ContactID ?
                    // Find CustomerID and Update it by NAME [ajax Autocomplete]
                    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;
                    quote.ZipCode = model.ServiceVM.MachineZipCode;
                    quote.Country = model.ServiceVM.MachineCountry;
                    quote.ExpirationDate = model.ServiceVM.ExpirationDate;
                    quote.ContactName = model.ServiceVM.ContactName;
                    quote.ContactEmail = model.ServiceVM.ContactEmail;
                    quote.ContactPhone = model.ServiceVM.ContactPhone;
    
                    ////UPDATE Quote Record
                    context.Entry(quote).State = EntityState.Modified;
                    context.SaveChanges();
    
                    ViewBag.ValidMessage = "ServiceQuote record updated.";
                    ModelState.Clear();
                    return PartialView("SQupdate");
                }
                
                
                    return PartialView("SQupdate", model);
                    //ViewBag.InvalidObject = "true";
                    //return Json(model);
                
            }

    Here is my Save Action. SQupdate is my modal.

    Here are the directions I followed.

    https://qawithexperts.com/article/asp.net/validate-pop-up-modal-using-ajaxbeginform-in-c-mvc/52

    Wednesday, October 23, 2019 2:32 PM
  • User475983607 posted

    You're using Ajax.BeginForm in the View?

    Wednesday, October 23, 2019 3:57 PM
  • User-544325736 posted

    Yes..

    @using (Ajax.BeginForm("UpdateServiceTables", "Service", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "modal-body" }))
    {

    I been messing with this all morning so far trying tons of different ways.

    My modal disappears and a new window opens the correct validation on it. if only i could get it to work on the modal itd be done..

    Wednesday, October 23, 2019 5:20 PM
  • User475983607 posted

    ExceedingLife

    Yes..

    @using (Ajax.BeginForm("UpdateServiceTables", "Service", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "modal-body" }))
    {

    I been messing with this all morning so far trying tons of different ways.

    My modal disappears and a new window opens the correct validation on it. if only i could get it to work on the modal itd be done..

    There's no modal-body id as configured in the Ajax.BeginForm.  There is a modal-body class.

    <div class="modal-body">

    Secondly, you did not post the View so we cannot see the resulting HTML and if it matches what you intend to replace.

    Seems that you have decided on using the Ajax.BeginForm helper.  I recommend visiting the reference documentation and take the time to learn how to use the Ajax.BeginForm helper method before moving forward. There are a lot of tutorials on the web.

    If you want the community debugging support, then the community will need all the relevant code.

    https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.ajax.ajaxextensions.beginform?view=aspnet-mvc-5.2

    https://www.aspsnippets.com/Articles/ASPNet-MVC-AjaxBeginForm-Tutorial-with-example.aspx

    Wednesday, October 23, 2019 6:13 PM
  • User-544325736 posted

    Here is everything that im doing. I been have the modal inside of my view but I also created the same modal in a partial outside of the view. im thinking ill have to use the one outside of the view so i can call that at the end of my action to keep the modal open? or will the ajax just leave my modal alone and let the validation pop up.

    3 different ways opening up the modal button clicks

    Main View Buttons for all views. Modal 1 and start of modal 3
    Modal Btn 1
    <input type="button" class="openModal btn btn-danger" data-quoteid="@Model.ListQuotes[i].QuoteID" value="Edit" />
    
    Modal Btn 2
     <button type="button" class="btn btn-info" data-toggle="ajax-modal" data-target="#modalSQ" data-quoteid="@Model.ListQuotes[i].QuoteID" data-url="@Url.Action("OpenModalSQ")">
             ExternalSQ
    </button>
    
    ModalBtn 3
    <button type="button" class="openOtherModal btn-success" data-toggle="modal"
            data-quoteid="@Model.ListQuotes[i].QuoteID">
            Test Val
    </button>
    
    [In same view a ways down] 
    Modal 1
    @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="form-group">
    @Html.LabelFor(x => x.ServiceVM.MachineAddress, htmlAttributes: new { @class = "control-label col-3" })
    <div class="col-9">
    @Html.TextBoxFor(x => x.ServiceVM.MachineAddress, new { @class = "form-control", name = "txtMaddress" })
    @Html.ValidationMessageFor(x => x.ServiceVM.MachineAddress, "", new { @class = "text-danger" })
    </div>
    </div>
    <div class="form-group">
    @Html.LabelFor(x => x.ServiceVM.MachineCity, htmlAttributes: new { @class = "control-label col-3" })
    <div class="col-9">
    @Html.TextBoxFor(x => x.ServiceVM.MachineCity, new { @class = "form-control", name = "txtMcity" })
    @Html.ValidationMessageFor(x => x.ServiceVM.MachineCity, "", new { @class = "text-danger" })
    </div>
    </div> (more fields ....)
     }
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    @* SAVE BUTTON [ <button} or form <input> ]*@
    <input type="submit" class="btn btn-primary" value="Save" />
    @*@Html.ActionLink("Save", "UpdateServiceTables", "Service", new { model = Model }, new { @class="btn btn-primary" })*@
    </div>
    JavaScript
     $('.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,
                            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');
     quoteid.val(jsonObject.quoteid);
            custid.val(jsonObject.customerid);
            cust.val(jsonObject.customername);
            listsn2s.val(jsonObject.listofsn2s);
            mcount.val(jsonObject.machinecount)
            OpenServiceQuoteModal();
     function OpenServiceQuoteModal() {
    $('#modalInnerSQ').modal('show'); }

    OpenOtherModal() is a copy of all of this above just to a different ModalID
    C# Controller Actions
     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;
       return Json(vm, JsonRequestBehavior.AllowGet);
            }
     [HttpPost]
            [ValidateAntiForgeryToken]
            [HandleError]
            public ActionResult SQUpdateRecord(ServiceModel model)
            {
                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;
     context.Entry(quote).State = EntityState.Modified;
                    context.SaveChanges();
     return PartialView("SQupdate");
                }          
                return PartialView("SQupdate", model);    
            }
    
    [HttpPost]
            public ActionResult UpdateServiceTables(ServiceModel model)
            { same as SQupdaterecord pretty much }
    
    Model is a normal model with a viewmodel in it and validation properties.. 

    Modal 3
    @using (Ajax.BeginForm("SQUpdateRecord", "Service", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "modalOpen" }))
    { <div> <div class="modal fade" id="modalTestSQ" tabindex="-1" role="dialog" aria-labelledby="lblSQmodal" aria-hidden="true">
    <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header">
    <h3 class="modal-title">Service Quote Details</h3>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body" id="modalOpen">
    @Html.Partial("SQupdate") </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>
    </div>
    Sepearate View for body of Modal 3
    Seperate View that Holds SQupdate.Cshtml
    @model Messer_PartNumbers.Models.ServiceModel
    @Html.AntiForgeryToken()
    
    @if (ViewBag.ValidMessage != null)
    {
    <span class="text-success">@ViewBag.ValidMessage</span>
    }
    
    <span class="alert-danger">
    @Html.ValidationSummary()
    </span>
    
    @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" })
    @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" })
    @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" })
    @Html.ValidationMessageFor(x => x.ServiceVM.MachinePrice, "", new { @class = "text-danger" })
    </div>
    </div>
    
    ... (more fields)
    
    
    Wednesday, October 23, 2019 7:24 PM
  • User475983607 posted

    I did not go through all the code because you presented 3 different ways to move data to a modal.  I prefer the Bootstrap's approach. 

    One thing that I did find and I mentioned this issue above, the AJAX.BeginForm helper method is not correct.  The UpdateTargetId property is pointing to a class name.  The property should contain the element Id to replace with the results of the Action.

    @using (Ajax.BeginForm( 
        "UpdateServiceTables", 
        "Service", 
        new AjaxOptions() { 
            HttpMethod = "POST", 
            UpdateTargetId = "modal-body" }))
    {
    

    Wednesday, October 23, 2019 7:58 PM
  • User-544325736 posted

    I moved it to UpdateTargetId = "modalInnerSQ" which is my modal the part that the info should be changing but it has been the same as before. 

    I know I am extremely close to getting this to work but i dont have it 100% yet. that's why im trying multiple methods to do it to see if i can get 1 of them correct.

    Wednesday, October 23, 2019 8:34 PM
  • User475983607 posted

    I moved it to UpdateTargetId = "modalInnerSQ" which is my modal the part that the info should be changing but it has been the same as before. 

    I know I am extremely close to getting this to work but i dont have it 100% yet. that's why im trying multiple methods to do it to see if i can get 1 of them correct.

    You changed the HTML target to modalInnerSQ which is the entire modal.  The original partial view returns the modal body.  Did you update the partial view to return the all the modal HTML?  

    The community can only see the code that you share on the forum.  At this point I think you need to pay a bit more attention to the details.

    Wednesday, October 23, 2019 8:49 PM
  • User-544325736 posted

    This is what I was missing in my code.

    All I needed to make my Ajax work..

    @{
            HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
    
    }

    Tuesday, October 29, 2019 1:42 PM