ASP.NET MVC - Update Modal pop up after Form submit

Question

I have modal popup containing partial view. this partial view is nothing but form. I have to update/refresh same modal popup with new partial view after Form submit, instead it reloads main page (refreshes browser) with that new view.

so I want all flow in same modal popup like - create employee---submit click---> create employee contact sequentially etc. here employee and employee contact are being used as partial view.

below is form -

@using (Html.BeginForm("EmployeeDetails", "Employee", new { source = string.IsNullOrEmpty(ViewBag.source)? "": @ViewBag.source  }, FormMethod.Post, new { @class = "employee-details" }))
{
  //submit button
}

below is post method -

public async Task<ActionResult> EmployeeDetails(EmployeeViewModel model, string source = "")
{
   // save code
   // after save, I have to return below view as partial view in same modal popup
 return RedirectToAction("EmployeeContact", "Employee", new { employeeId = model.Employee.ID });
}

I also tried using PartialView syntax but that also behaving same (reload browser) -

return PartialView("~/Views/Employee/EmployeeContact.cshtml", new { employeeId = model.Employee.ID });

what I am missing?

If you submit via standard form post the browser will reload the page. You'll need AJAX techniques to prevent the default behavior. Show us the main page that loads the modal. — Jasen, Jul 06 '21 at 18:57
The answer here is basically what you need to do: https://stackoverflow.com/a/31064411/2030565. You can safely ignore/omit the validation stuff. — Jasen, Jul 06 '21 at 19:01
No sure you want to be designating your controller method Async. If you must then try to follow this pattern: https://srramalho.wordpress.com/2017/08/27/asp-net-mvc-loading-partial-views-asynchronously/ — DaniDev, Jul 06 '21 at 20:08
@Jasen your approach worked but javascript is breaking when loading new partial view after submit as `document.ready` function is not getting called for new view. I am stuck. as discussed I have to do all flow in same modal popup like create employee-->submit-->create employee contact--->and so on.. — SSD, Jul 07 '21 at 10:57
@Jasen below code I tried - `$("body #EmployeeModal").on("submit", "#EmployeeNewForm", function (e) { e.preventDefault(); //alert('working'); var form = $(this); $.ajax({ url: form.attr("action"), method: form.attr("method"), // post data: form.serialize(), success: function (result) { $("body #EmployeetModal .modal-body").load('Employee/EmployeeContact?empid=' + result, function () { //here in employeecontact, external js file exist but not loading ` — SSD, Jul 07 '21 at 13:33
@Jasen I also tried using `$.getScript('script file path')` approach after load but no luck. — SSD, Jul 07 '21 at 13:34
Check that your script is loaded on the static parent page. And you shouldn't be calling `.load()` as this is another network request -- your partial view result should be your new populated form which you swap into your DOM. — Jasen, Jul 07 '21 at 20:32
@Jasen I used .html(result) instead of calling again load() but it served only html. external javacript file inside that html are not getting loaded. in that file, some click handler event exist. shall I write those click handler after success block? — SSD, Jul 08 '21 at 06:23
@Jasen I solved this issue using DOMParser. since final html has external js file inside it. I have to execute those so .html(result) didn't work. below is my answer. — SSD, Jul 13 '21 at 15:08

score 0 · Answer 1 · answered Jul 13 '21 at 15:21

I solved this issue using DOMParser to parse html. I used DOMParser and extracted external js file available inside that html after ajax success block. All the help I got from another stackoverflow link -

DOM Parser

below is my code -

function createGetScriptCallback(url) {
          return function () {
            return $.getScript(url);
          }
        }


var form = $(this);
                $.ajax({
                    url: form.attr("action"),
                    method: form.attr("method"),  // post
                    data: form.serialize(),
                    success: function (result) {
                        
        
                        var parser, doc, scriptsEl, callbacks;
                        parser = new DOMParser();
                        doc = parser.parseFromString(result, "text/html")
                        scriptsEl = doc.querySelectorAll("script[src]");
                        callbacks = []
                        for (var i = 0; i < scriptsEl.length; i++) {
                            callbacks.push(createGetScriptCallback(scriptsEl[i].getAttribute("src")));
                        }
                        $.when.apply($, callbacks)
                            .fail(function (xhr, status, err) {
                                console.error(status, err);
                            });
                        //$('body').append(result);
                    
        
                        $("body #EmployeeModal .modal-body").empty();
                        $("body #EmployeeModal .modal-body").append(result);
                        
        
                        $.validator.unobtrusive.parse("form");

ASP.NET MVC - Update Modal pop up after Form submit

1 Answers1