Question

我调用javascript函数myModal打开一个引导模式窗口，该窗口使用ASP.NET MVC部分页面动态插入到html中。

我在主页上的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>

我传递了获取模态窗口内容的网址，例如/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控制器方法返回一个如下所示的部分页面：

_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>

以上代码有效。

但是，当表单提交保存时，它会成功转到控制器的save方法。但是，如果ModelState无效，我想返回保存模式表单。

    [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代码时，会在击中时删除现有的模态窗口 @ {await Html.RenderPartialAsync（＆＃34; _PartialPage＆＃34;，Model）;} 并且只显示模态背景而不是新的模态窗口

查看来源我可以看到

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

这意味着它是空的，尽管控制器/编辑帖子发送数据。

然后我将eventhandler添加到提交函数以强制关闭模式背景以在提交之前清除，但它仍然没有改变屏幕上显示的任何内容的行为。保存表单并希望返回到相同的表单时，它不起作用并且在屏幕上不显示任何内容。在浏览器控制台中甚至没有java脚本错误。

我做错了什么？

Answer 1

我解决了。表单标签ajax标签似乎有问题。可能与异步相关并且导致非常奇怪的行为与多个HTTP帖子结合使用事件处理程序并且与引导模式不兼容。

我删除了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模态窗口动态表单失败

1 个答案: