如何从局部视图执行 Ajax 调用。 ASP.NET MVC答案

【问题标题】：How to perform an Ajax call from a partial view. Asp.net MVC如何从局部视图执行 Ajax 调用。 ASP.NET MVC
【发布时间】：2019-03-14 09:51:23
【问题描述】：

我想执行 Ajax 调用，以从处于局部视图中的表单获取数据到控制器并返回响应消息。

Ajax 调用

$("#submitContactInfo").on("click", function () {
if ($('#contact-form').valid() === true) {
    $.ajax({
        url: '@Url.Action("SendEmailAsync", "Home")',
        type: "Post",
        data: {
            "name": Name.value,
            "lastName": LastName.value,
            "email": Mail.value,
            "phone": Mobile.value
        },
        dataType: "json",
        success: function (result) {
            if (result.value === "1") {
               ...
            }
            else {
               ...
            }
        }
    });
  }
});

我的控制器

[HttpPost]
public async System.Threading.Tasks.Task<ActionResult> SendEmailAsync(string name, string lastname, string email, string phone)
{
 var value = 0;
 ...     
  return Json(value, JsonRequestBehavior.AllowGet);
}

【问题讨论】：

标签： json ajax asp.net-mvc

【解决方案1】：

我偶然发现的第一件事是@Scripts{} 不适用于局部视图，所以我不得不考虑另一种方法。

所以我创建了一个外部文件并将其命名为“custom.js”并在 _Layout.chtml 上引用它，位于以下位置： @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") ... @Scripts.Render("~/Scripts/custom.js")

我注意到的第二件事是来自 Ajax 调用的 url 不起作用，因为我在外部 js 文件中使用了 Razor 语法。

所以我把url: '@Url.Action("SendEmailAsync", "Home")',改成了url: '/Home/SendEmailAsync',

之后我收到了 500 错误，所以我想通过将 type: "Post", 更改为 type: "Get", 和 dataType: "json", 更改为 dataType: "html", 并添加 contentType: "application/json; charset=utf-8", 我更接近一点，因为我得到了 404错误。

所以我使用了我的 Controller 方法并删除了 [HTTPPOST]，就是这样。

最终的 Ajax 调用：

$("#submitContactInfo").on("click", function () {
if ($('#contact-form').valid() === true) {
    $.ajax({
        url: '/Home/SendEmailAsync',
        type: "GET",
        data: {
            "name": Name.value,
            "lastName": LastName.value,
            "email": Mail.value,
            "phone": Mobile.value
        },
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (result) {
            if (result === "1") {
               ...
            }
            else {
                  ...
            }               
        }
    });
  }
});

我的控制器

public async System.Threading.Tasks.Task<ActionResult> SendEmailAsync(string name, string lastname, string email, string phone)
{
 var value = 0;
 ...     
  return Json(value, JsonRequestBehavior.AllowGet);
}

如果您有更好的解决方案或要发表任何评论，请随意。我愿意接受建议。

【讨论】：