ASP.NET MVC - 表单提交后弹出更新模式答案

【问题标题】：ASP.NET MVC - Update Modal pop up after Form submitASP.NET MVC - 表单提交后弹出更新模式
【发布时间】：2021-07-06 18:42:41
【问题描述】：

我有包含部分视图的模态弹出窗口。这种片面的观点只不过是形式。提交表单后，我必须使用新的局部视图更新/刷新相同的模式弹出窗口，而是使用该新视图重新加载主页（刷新浏览器）。

所以我希望所有流程都在相同的模式弹出窗口中，例如 - 创建员工---提交点击--->按顺序创建员工联系等等。这里员工和员工联系被用作部分视图。

下面是表格-

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

下面是post方法-

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 });
}

我也尝试过使用 PartialView 语法，但行为也相同（重新加载浏览器）-

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

我错过了什么？

【问题讨论】：

如果您通过标准表单提交，浏览器将重新加载页面。您将需要 AJAX 技术来防止默认行为。向我们展示加载模式的主页。
这里的答案基本上就是你需要做的：stackoverflow.com/a/31064411/2030565。您可以放心地忽略/省略验证内容。
不确定是否要指定控制器方法异步。如果您必须尝试遵循此模式：srramalho.wordpress.com/2017/08/27/…
@Jasen 您的方法有效，但是在提交后加载新的局部视图时 javascript 会中断，因为 document.ready 函数没有被调用以获取新视图。我被困住了。正如所讨论的，我必须在相同的模式弹出窗口中完成所有流程，例如创建员工-->提交-->创建员工联系人--->等等..
@Jasen 下面的代码我试过 - $("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

标签： asp.net-mvc bootstrap-modal asp.net-mvc-partialview

【解决方案1】：

我使用 DOMParser 解析 html 解决了这个问题。我使用 DOMParser 并在 ajax 成功块之后提取了该 html 中可用的外部 js 文件。我从另一个 stackoverflow 链接获得的所有帮助 -

DOM Parser

下面是我的代码 -

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");

【讨论】：