Question

我有一个主要是信息数据的页面（不是整体的输入表单）。它有一个可以编辑的标题。

单击“编辑标题”按钮会弹出一个模态窗口，用户可以在其中编辑标题并点击提交。

因为这个表单只是页面的一小部分，并且因为我可能需要在同一页面上使用其他小表单，所以我只是在控制器中创建了一个小处理程序来处理这个提交。

[HttpPost]
public ActionResult PageTitle(string title)
{
    // ... Save new title to the database ...

    // I have no PageTitle page, so just redirect back to the source page
    return RedirectToAction("Index");
}

这没关系，但我不喜欢这里的额外重定向。重定向回客户端会导致另一次往返服务器。

是否有更有效的方法来处理页面上的小表单，您不希望每次都重新提交页面上的每个输入元素？

Answer 1

我认为有一种方便的方法可以避免在发布请求后重定向（不使用Ajax）。

您当然可以返回任何视图：

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult ProcessForm1(FormOneData data)
{
    // process form
    return View("Index");
}

[HttpPost]
public ActionResult ProcessForm2(FormTwoData data)
{
    // process form
    return View("Index");
}

因此用户将获得相同的页面，但此解决方案的问题是该URL将是不同的。

您可以为GET请求提供一个功能，为POST请求提供另一个功能，两个具有相同的URL。但是，你必须弄清楚一种行动方法如何处理更多的形式 - 可行但可靠的维护。

如果这些表单可以出现在多个页面上，这会变得更加复杂。

但实际上，它解决了一件事。通过重定向，您可以避免用户在按F5时获得的重新POST对话框（有时会错误地再次提交表单）。

Answer 2

如何通过Ajax发送表单数据如下所示？

@model Models.YourModel

$('form').submit(function (event) {
    event.preventDefault();

    //Send the values of all form controls within the <form> tags including the token
    var formdata = $('#frmRegister').serialize();

    $.ajax({
        type: "POST",
        url: '@Url.Action("ProcessForm", "Controller")',
        cache: false,
        dataType: "json",
        data: formdata,

        error: function (response) {
            $("#error_message").html(data);
        },

        success: function (data, textStatus, XMLHttpRequest) {
            $('#result').html(data);
        }
    });
});

您还可以使用Partial Views在同一个视图中使用多个表单或片段。希望这会有所帮助...

Answer 3

作为@TiesonT。指出，post / redirect / get是一种标准模式。不，它似乎不是最有效的。但是，如果不进行AJAX或更精细的操作，就没有办法回发到专门的处理程序，然后在没有重定向的情况下刷新页面。

希望我忽略了一些简单的东西，但看起来我没有。

处理页面上的多个表单

3 个答案: