Jquery 重新发布到现有ASP.net MVC引导模式窗口动态窗体失败_Jquery_Ajax_Asp.net Mvc_Twitter Bootstrap_Bootstrap Modal

Jquery 重新发布到现有ASP.net MVC引导模式窗口动态窗体失败

jquery ajax asp.net-mvc twitter-bootstrap

Jquery 重新发布到现有ASP.net MVC引导模式窗口动态窗体失败,jquery,ajax,asp.net-mvc,twitter-bootstrap,bootstrap-modal,Jquery,Ajax,Asp.net Mvc,Twitter Bootstrap,Bootstrap Modal,我调用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> <s

我调用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>

我的控制器方法获取：

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

        //fetch viewmodel from db

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

上述代码有效

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

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

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

    }

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

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

我做错了什么？

我解决了。表单标签ajax标签似乎有问题。可能与async有关，并且在使用eventhandler的同时使用多个HTTP POST会导致非常奇怪的行为，并且不能很好地使用引导模式

我删除了ajax表单标记

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

而是编写了一个jqueryeventhandler来处理表单submit

$(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');

            }
        });

    });

我仍然有关于模式背景的问题，但我决定使用论坛上提到的解决方案，因为我正在动态加载表单，你的元素在哪里？我在问题中包含了主页html。这只是主页上始终存在的占位符div。我假设您没有通过注释理解-您的ajax表单正在使用

id=“modalDetailPlaceHolder”

更新一个元素，但您没有显示它（它在页面上的什么位置？）。您所显示的是一个id为

id的元素=“modalPlaceHolder”

是同一个占位符Id。我刚刚输入了一个错别字。我在问题中更正了这个错别字。你的模态表单不应该做ajax帖子吗？

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

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

$(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');

            }
        });

    });