发送 post 请求并忽略响应

Question

我一直在尝试在 ASP.net 框架 (4.8) 中使用 MVC 模式设置模式弹出窗口

我有一个分页表，其中包含许多行和工作过滤器（使用 datatables.net）。每行都有一个按钮，该按钮使用 ajax 调用通过局部视图呈现模式弹出窗口。我可以更改数据并使用 POST 请求将其发回。

但现在我不知道如何在保持原始索引页面的同时简单地摆脱我的局部视图。这是我的代码：

索引视图

@model  List<Models.TestModel>

<script>
    $(function() {
        $('#editModal').modal();
    });

    function editProduct(productId) {
        $.ajax({
            url: '/Home/Edit/' + productId,
            success: function (data){
                $('#modalWrapper').html(data);
            }
        });
    }
</script>

<div>
    <table id="JrmTable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th></th>
            </tr>
        </thead>

        <tbody>
            @foreach (var i in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(m => i.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(m => i.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(m => i.Age)
                    </td>
                    <td>
                        <button onclick="editProduct(@i.Id)">ClickMe</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

<div id="modalWrapper"></div>

忽略样式（我没有使用引导程序，但在我的测试中具有相同的类名），这是完美呈现的局部视图

部分视图

<div id="editModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1>EDIT</h1>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("Edit", "Home", Model, FormMethod.Post, null))
                {
                    <p>Id = @Model.Id</p>
                    @Html.EditorFor(m => m.Age)
                    <input type="submit" />
                }
            </div>
            <div class="modal-footer">
                <p>Footer</p>
            </div>
        </div>
    </div>
</div>

在提交时，我目前正在将编辑后的模型传递给 HomeController：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var x = new Data().GetSampleModelList
        return View(x);
    }

    [HttpGet]
    public ActionResult Edit(int id)
    {
        var x = new Models.TestModel() { Id = id, Age = 0, Name = "" };
        return PartialView("Edit", x);
    }

    [HttpPost]
    public ActionResult Edit(Models.TestModel m)
    {
        SaveTheModelMethod();
        // Now What?
    }
}

就是这样 - 我将发布请求发送到 ActionResult，它期望某种返回 View() 等 - 但我真的不想返回任何东西，我只想关闭部分视图（这将使表格显示旧数据，但这是另一个问题）

Answer 1

如果你想使用 AJAX，这里有另一种解决方案：

JavaScript（修改）

<script>
    $(function() {
        $('#editModal').modal();
    });

    function editProduct(productId) {
        $.ajax({
            url: '/Home/Edit/' + productId,
            success: function (data){
                $('#modalWrapper').html(data);
            }
        });
    }
    function saveProduct() {
        // get data from the form
        var payload = {
            Id: $("input[name=Id]").val(),
            Age: $("input[name=Age]").val()
        };
        // post to your edit action
        $.ajax({ 
            url: "/Home/Edit", type: "POST", 
            data: JSON.stringify(payload),
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $('#editModal').hide();
                // CAVEAT: Hide your window using the appropriate command.
                // Here I am just hiding it with jQuery
            }
        });
    }
</script>

MVC 视图片段（修改）

<div class="modal-body">
@using (Html.BeginForm("Edit", "Home", Model, FormMethod.Post, null))
{
    <p>Id = @Model.Id</p>
    @Html.HiddenFor(m => m.Id)
    @Html.EditorFor(m => m.Age)
    <button type="button" id="saveModelButton" onclick="saveProduct()" />
    // This Button changes to have an 'onclick' attribute 
}
 </div>

MVC 动作

[HttpPost]
public JsonResult Edit(Models.TestModel m)
{
    SaveTheModelMethod();
    // Now What?
    return Json(new { success = true });
}

Answer 2

如果您不想重新加载页面。您应该返回一个空结果。

[HttpPost]
public ActionResult Edit(Models.TestModel m)
{
    SaveTheModelMethod();

    return new EmptyResult();
}

来源：https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.emptyresult?view=aspnet-mvc-5.2

在我看来，您应该重新加载索引页面，因为否则您的更改将不会显示在 UI 上。

[HttpPost]
public ActionResult Edit(Models.TestModel m)
{
    SaveTheModelMethod();

    return RedirectToAction(nameof(Index));
}

来源：https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.emptyresult?view=aspnet-mvc-5.2

编辑：您得到一个空白页面，因为您使用的是按钮类型提交。您应该将其转换为类型按钮并使用 ajax（您可以提供您选择的成功）。

<script>
    $("#submit_button").click(function () {
        let form = this.parents("form");

        $.ajax({
            type: "POST",
            url: form.attr("action"),
            data: form.serialize()
        });
    });
</script>

改变

<input type="submit" />

到

<input type="button" id="submit_button" />

免责声明：从头开始，可能包含错误。

Answer 3

我认为您应该通过重定向回您的 Index 操作来重新加载列表视图。

[HttpPost]
public ActionResult Edit(Models.TestModel m)
{
    SaveTheModelMethod();
    // Now What?
    return RedirectToAction("Index");
}

然后你又回到了你开始的地方。