C# 如何在ASP.NET MVC中通过AJAX调用关闭提交按钮？

我有一个视图，其中列出了一组项目。我正试图这样做，当用户单击其中一个项目的“操作事件”（从表行中）时，将出现一个弹出窗口。然后，用户可以更新有关此项目的相同信息，并提交信息或将其关闭。无论他们选择哪个选项，我都会尝试关闭弹出窗口

我有90%在那里，我只是不能解决一个小细节-关闭后，提交按钮按下弹出窗口！我看到的许多解决方案似乎都不起作用，我只是在调整它们以解决我的问题时遇到了一些麻烦。给定以下代码，我需要做哪些更改才能使其正常工作

以下是我所拥有的：

查看

Index.cshtml

我确实在这里看到了这个资源：，但我只是不知道如何将它调整到我现在正在进行的事情中

我现在的“取消”按钮工作正常。是否有某种方法可以使用“提交”按钮的数据解除功能，并使其仍像“取消”按钮一样保存数据？我还看到一些解决方案在submit按钮中使用onClick（）参数，但随后它将使用window.close（）选项。我不希望整个窗口关闭，也不希望用户收到提示

---

我解决这个问题的好方法是什么？我希望我的提交按钮像我的取消按钮一样工作，只保存数据。提前感谢您的建议

能否在

Index.cshtml

中尝试以下操作（请确保为表单设置了id并在下面更正）：

如果要向服务器发出AJAX请求并保存数据，可以执行以下操作（只需将下面的代码包含在模式中的Disclose按钮上的click事件中）：

并且有一个MVC动作类似于：

[HttpPost]
public JsonResult SaveData()
{
    // save data
}

编辑： 在对您的问题进行二读之后，您需要将

Edit.cshtml

设置为部分视图，然后在

Index.cshtml

中将您的部分视图包含在模式的div中，如下所示：

<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            @Html.Partial("_EditView")
        </div>
    </div>
</div>

---

JS应该在

Index.cshtml

中，因为那是您的部分存在的地方，尝试一下，您就会看到。

因此，经过多次尝试，我能够想出以下解决方案：

查看

Index.cshtml

@foreach（模型中的var项目）
动作事件
}
对这一事件采取行动
var ActionAway=函数（theid）{
var url=“/Database/Edit？id=“+theid；
$（'#myModalBodyDiv1'）.load（url，函数（）{
$（'myModal1'）.modal（“show”）；
})
}

弹出视图

Edit.cshtml

@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@Html.HiddenFor（model=>model.AID）
@LabelFor（model=>model.Comment）
@Html.TextAreaFor（model=>model.Comment，新的{@class=“formcontrol”，rows=“5”}）
取消
}
@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
}
$（文档）.ready（函数（）{
$（“#btnSave”）。单击（函数（）{
$.ajax({
成功：函数（）{
$（“#myModal”）.modal（“隐藏”）；
}
})
})
})

---

我可以不做任何改变就离开控制器。再次感谢您的帮助

我注意到您正在使用

Html.BeginForm

，那么如何在不刷新页面的情况下发布模式数据呢？通常，

Ajax.BeginForm

用于发布表单而不刷新页面。如果你想在表单的post成功上绑定一个事件，这一点很重要。当用户单击保存时，它将从控制器重定向。事实上，您仍然可以在控制器中看到RedirectToAction（“Index”）调用。显然，一旦我实现了这个弹出窗口，我就不会调用这个RedirectToAction了。有没有更好的方式发布我的数据？我不确定如何使用Ajax.BeginForm来解决这个问题，但我将同时开始寻找。是的，我将使用（Html.BeginForm（null，null，FormMethod.Post，new{@id=“\id”}）执行以下

@

然后有一个jquery函数，该函数可在单击表单中的提交按钮后触发

预防故障

。在这里，您可以隐藏/切换模态，我对如何隐藏/切换模态有点困惑。从我的弹出视图（Edit.cshtml）工作，我更改了@using以匹配您发布的内容。单击按钮后（同样，在我的Edit.cshtml文件中），我使用jquery来preventDefault（）根据您的建议。但是，我不知道如何切换模式。这是我需要在Index.cshtml文件中执行的操作吗？如果是，我如何让我的弹出视图与Index.cshtml文件通信以切换模式？感谢您的回复，iamdlm！我仍然不清楚如何将此代码放入Index.cshtml中文件。表单本身实际上包含在Edit.cshtml文件中，那么这段代码不应该也包含在Edit.cshtml文件中吗？另外，我并不特别喜欢使用AJAX，因为AJAX是最简单的方法。AJAX是我唯一可以使用的东西，可以让我有一个使用视图的弹出窗口。我愿意使用任何东西g、 只要我能得到一个加载视图的弹出窗口，该窗口可以用来编辑该行的数据并保存它（无需重新加载页面）。请参阅我的编辑。您需要使用edit.cshtml中的内容制作一个分部，并将JS包含在Index.cshtml中。感谢您的澄清！

    public ActionResult Index()
    {
        return View(db.ActionableEvents.ToList());
    }

    public ActionResult Edit(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        ActionableEvents actionableEvents = db.ActionableEvents.Find(id);
        if (actionableEvents == null)
        {
            return HttpNotFound();
        }
        return View(actionableEvents);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "AID,Comment")] ActionableEvents actionableEvents)
    {
        if (ModelState.IsValid)
        {
            db.Entry(actionableEvents).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(actionableEvents);
    }

$("form").submit(function(){
   $('#modal').modal('toggle');
});

$.ajax({
    type: "POST",
    url: "SaveData",
    content: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(data),
    success: function (result) {
        // do something
    },
    error: function (result) {
        // do something
    }
});

[HttpPost]
public JsonResult SaveData()
{
    // save data
}

<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            @Html.Partial("_EditView")
        </div>
    </div>
</div>

$("form").submit(function () {
    e.preventDefault();

    formData = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "SaveData",
        content: "application/json; charset=utf-8",
        dataType: "json",
        data: formData ,
        success: function (result) {
            // do something
        },
        error: function (result) {
            // do something
        }
    });

    $('#modal').modal('toggle');
});

<table>
@foreach (var item in Model)
    <tr>
            <td>
                <button class="btn btn-primary" onclick="ActionAway(@item.AID)">Action Event</button>
            </td>
    </tr>
    }
        </tbody>
</table>

<div class="modal fade" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Action This Event</h3>
            </div>
            <div class="modal-body" id="myModalBodyDiv1">

            </div>
        </div>
    </div>
</div>
</div>

<script>
    var ActionAway = function (theid) {
        var url = "/Database/Edit?id=" + theid;

        $('#myModalBodyDiv1').load(url, function () {
            $('#myModal1').modal("show");
        })
    }

</script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.AID)
        <table>
        <tr>
         <td>@Html.LabelFor(model => model.Comment)</td>
         <td>@Html.TextAreaFor(model => model.Comment, new { @class = "form-control", rows = "5" })</td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Save" class="btn btn-primary" id="btnSave"/>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        </td>
        </tr>
    </table>
     </div>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>
    $(document).ready(function () {
    $("#btnSave").click(function () {
        $.ajax({
            success: function () {
                $("#myModal").modal("hide");
            }
        })
    })
})
</script>