重新发布到现有 ASP.net MVC Bootstrap 模态 window 动态表单失败

Question

我调用了一个 java 脚本函数 myModal 来打开一个 bootstrap 模式 window，它使用 [=50= 动态插入到 html ] MVC 部分页面。

我在主页上的html简化为

<html>
//header stuff
<body>
<span class="btn btn-default btn-sm btn-color-primary" onclick="myModal('mycontroller/edit?id=1')"></span>
<br>
<span class="btn btn-default btn-sm btn-color-primary" onclick="myModal('mycontroller/edit?id=2')"></span>
<br>
<span class="btn btn-default btn-sm btn-color-primary" onclick="myModal('mycontroller/edit?id=3')"></span>
<br>
<div id="modalPlaceHolder"></div>
//script libraries.
</body>
</html>

我将 url 传递给它以获取模态 window 内容，例如/myconroller/myaction/?id=1

function myModal(data) {
        $.ajax({
            url: data,  //e.g./myconroller/myaction/?id=1`
            success: function (response) {
                debugger;
                $('#modalPlaceHolder').html(response);//empty div on the main page
                $('#resultModal').modal('show');
            }
        })
    }

我的控制器方法得到：

    [HttpGet]
    public async Task<IActionResult> Edit(int id)
    {

        //fetch viewmodel from db

        return PartialView("~/_PartialPage.cshtml", myViewModel);
    }

ASP.NET MVC 控制器方法return是一个部分页面，如下所示：

_PartialPage.cshmtl

<div class="modal fade" tabindex="-1" role="dialog" id="resultModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Detail</h4>
        </div>
        <div class="modal-body">
            <form action="@(Url.Action("Edit", "MyController"))" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#modalPlaceHolder" id="formDetail" method="post">
             //rest of the form
             <button class="btn btn-sm btn-primary" id="btnSave">Save</button>
             </form>

以上代码有效。

但是当表单提交保存时，成功进入了controller的save方法。但是，如果 ModelState 无效，我想 return 保存模态形式。

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(MyViewModel myViewModel)
    {

        try
        {
            if (ModelState.IsValid)
            {
                //save data
                return RedirectToAction("Index");
            } else {
                 return PartialView("~/_PartialPage.cshtml", myViewModel);
            }
        }

    }

然而，当我这样做并且它到达前端上方的 return PartialView 代码时，在点击时删除了现有的模态 window @{await Html.RenderPartialAsync("_PartialPage", Model);} 并且只显示模态背景而不是新模态 window

查看源我可以看到

<div id="modalPlaceHolder"></div>

这意味着它是空的，尽管 controller/edit post 向它发送数据。

然后我将事件处理程序添加到提交函数以强制关闭模态背景以在提交之前清除但它仍然不会改变屏幕上不显示任何内容的行为。当保存表格并想 return 到相同的表格时，它不起作用并且在屏幕上不显示任何内容。浏览器控制台中甚至没有 java 脚本错误。

我做错了什么？

Answer 1

我解决了。表单标签 ajax 标签似乎有问题。可能与异步有关，并导致多个 HTTP Post 与事件处理程序结合使用时出现非常奇怪的行为，并且不能很好地与 bootstrap 模态一起使用。

我删除了 ajax 表单标签

form action="@(Url.Action("Edit", "MyController"))" id="formDetail" method="post">

而是编写了一个 jquery 事件处理程序来处理表单提交

$(document).ready(function () {

    $("#formDetail").submit(function (e) {
        e.preventDefault();

        $.ajax({
            processData: false,
            contentType: false,
            data: new FormData(this),
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function (data) {
                $('#modalPlaceHolder').html(data);
                $('#resultModal').modal('show');

            }
        });

    });

模态背景仍然存在问题，但我使用论坛上提到的解决方案解决了这个问题，因为这似乎是因为我正在动态加载表单

重新发布到现有 ASP.net MVC Bootstrap 模态 window 动态表单失败

Reposting to an existing ASP.net MVC Bootstrap modal window dynamic form fails

ajax

asp.net-mvc

jquery

twitter-bootstrap

bootstrap-modal