哪一个更好？当页面中只有一个表单时，Ajax 发布或页面发布[Controller httppost]？答案

【问题标题】：Which one is better? Ajax post or page post[Controller httppost] when only one form is there in a page?哪一个更好？当页面中只有一个表单时，Ajax 发布或页面发布[Controller httppost]？
【发布时间】：2015-02-09 08:47:20
【问题描述】：

我有一个名为 Bookprogram 的页面，其中包含 6 个输入控件，即 txtName、txtEmail、txtPhone、selectcat[类别下拉列表]、txtDate、txtMessage。现在，当完成上述控件的所有验证后，我想将数据存储在 db 中。我知道如何在 ajax 和完整的页面发布中执行。

如果它在 ajax 中，在验证后，我只需调用 $.ajax 并将数据作为字符串发布并在控制器中获取它，如下所示：

[HttpPost]
public JsonResult BookProgram(string name, string email, string phone, string category, string date, string message)
{
       //code to save into db
       return Json(result);
}

如果我必须发布整个页面，在验证后我只需执行 $(form).submit(); 并在控制器中编写如下：

[HttpPost] 
public ActionResult Bookprogram(Mymodel model)
{
     //Code to save the data 
     return View();
}

我只是想知道哪个更好，更安全，更好用，因为我必须在提交成功后显示一条消息。我知道我可以采用任何一种方式来显示消息，但是在这种情况下是否真的需要回发[页面刷新]，如果是的话，它与 ajax 发布相比有什么优势？

编辑：

我刚刚通过 this 链接并尝试实施第二个投票最高答案的解决方案，但由于我的运气不好，它并没有击中控制器本身。我在控制器中保留了断点。

$(form).on("submit", function (e) {
        e.preventDefault();
        ValidateForm(form);
        var selectedVal = $(form).find('select').children(":selected").val();
        if(selectedVal=="")
        {
            $(form).find('div.bootstrap-select').children(":first").addClass('alert-danger');
            $(form).find('div.bootstrap-select').next('.text-danger').html('Please select a category!');
        }
        var formContainer = $(form + ' .text-danger');
        if ($(formContainer).text().length == 0) {
            $.ajax({
                url: '/Home/BookProgram/',
                type: "POST",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: $('#fbookprogram').serializeArray(),
                success: function (data) {
                    if (data.result == "Success") {
                          alert('success');
                    }
                    else {
                         alert('fail');
                        return false;
                    }
                    return true;
                }
            });
        }
        $(form).unbind('submit');
        return false;
    });

控制器：

public ActionResult BookProgram(MyModel model)
{
    if(ModelState.IsValid)
    {
        //code to save data
    }
    return Json(new { success = false });
}

我在这里缺少什么。

【问题讨论】：

你仍然可以使用 public ActionResult Bookprogram(Mymodel model) 来发布 ajax 帖子（你应该这样做，因为你可以利用模型绑定和检查 ModelState.IsValid）
@StephenMuecke 好的，这很酷。发布数据的安全性和时间消耗有什么不同吗？
您采用哪种方式实际上取决于您保存数据后的操作。如果你所做的只是显示一条消息，我只会做一个正常的提交。如果模型有错误，您可以返回视图（利用ModelState 错误和ValidationMessageFor() 来显示它们）。如果数据保存正常，则重定向到另一个视图（例如可以显示成功消息的索引或详细信息视图（使用TempData）。但是，如果您想返回视图以在页面上执行其他操作，则ajax 可能会更好。
根据您的第一个代码 sn-p，我怀疑您必须手动构建回发值 - 您可以使用 $.post(url, $('form').serialize(), function(data) { // do something ...
这是很好的解释@StephenMuecke.. 谢谢你..

标签： ajax asp.net-mvc http-post postback form-submit

【解决方案1】：

回帖

浏览器处理 - 我能想到的唯一优点是浏览器将为您处理重定向和进度加载。您无需编写逻辑来重定向用户或显示加载栏。

AJAX

异步 - 使用 AJAX，您将获得异步调用，因此浏览器线程不会被阻塞。这允许用户在等待您的请求响应时仍与 UI 进行交互。
更好的性能 - 您通常不需要重新加载整个页面，从而减少开销和发出的 HTTP 请求。

仅供参考 - 您仍然可以使用 JsonResult 进行模型绑定

public JsonResult BookProgram(Mymodel model)
{
       //code to save into db
       return Json(result);
}

【讨论】：

现在清除了！对这两种情况下的数据安全有什么要说的！！
AJAX 和 Post Back 最终都会创建 HTTP 请求，因此您不能认为其中一种方法的安全性低于另一种。
@heymaga... 请告诉我如何将模型与 JsonResult 绑定？？
请求数据与模型的绑定方式与ActionResult完全相同。请记住 JsonResult 和 ActionResult 只是您方法的返回类型。您使用控制器的事实允许您（默认情况下）使用默认模型绑定器。因此，您可以在控制器中建模绑定任何公共方法
@heymaga.. 我现在刚刚尝试的是在验证之后我刚刚通过 ajax 调用了我的 Controller Jsonresult 方法，并且我尝试将模型作为您在答案中指定的方法中的参数。但该模型即将无效。您能否详细说明一下，如果可能的话，请举例说明..

【解决方案2】：

回发 - 是一个经典的工作流程。将大部分内部工作委托给您的网络浏览器。您所有的响应逻辑都在服务器端计算。

AJAX - 是一种构建动态 Web 应用程序的现代方式。单页应用程序的基本方法。在这种情况下，大部分工作应该在客户端完成。

【讨论】：