根据 ajax 调用的检查显示部分视图或点击控制器操作答案

【问题标题】：Display a partial view or hit controller action upon a check from an ajax call根据 ajax 调用的检查显示部分视图或点击控制器操作
【发布时间】：2018-08-10 11:41:02
【问题描述】：

我有以下 ajax 调用：

    $.ajax({
                    url: "@Url.Action("GetMatch", "Test")",
                    data: {
                        Name: $("[name='Name']").val(),
                        Surname: $("[name='Surname']").val(),
                        Email: $("[name='Email']").val(),
                    },
                    dataType: "text",
                    type: "POST",
                    success: function (data, textStatus, jqXHR) {
                        alert(data.length);
                        if (data.length <= 13){
                            SaveQuote();
                        } else {
                            alert("matche")
                            }
});

控制器中的GetMatch动作如下：

[HttpPost]
public ActionResult GetClientMatch(ClientBusinessModel contactPerson)
{
    *search for a list*
    if (list.Count > 0)
    {
        return PartialView("~/Views/Shared/Partials/_Client.cshtml", list);
    } else
        return Json(new { data = contactPerson }, JsonRequestBehavior.AllowGet);
}

我想做的是成功后，如果列表不为空，则显示部分视图_Client.cshtml。还行吧。但如果列表为空，请调用控制器的另一个操作：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CreateClient(SchoolModel school, ClientBusinessModel contactPerson, long QuotationId, long LeadId)
{
    *some aciotns*
}

第一件事是我如何测试在 ajax 调用操作 GetClientMatch 时返回的数据是部分视图还是联系人？现在，我正在对数据的长度进行测试。还有如何保存表单数据和第一个ajax调用返回的contactPerson？

我的 SaveQuote 功能：

function SaveQuote() {
        var obj = $('#frmSchool').serialize();
        var jsonObj = @Html.Raw(Json.Encode(Model));
        $.ajax({
                 type: "POST",
                 url: "@Url.Action("CreateClient", "Test")",
                 data: obj + "
                            Name: $("[name='Name']").val(),
                            Surname: $("[name='Surname']").val(),
                            Email: $("[name='Email']").val(),
                 success: function (data) {
                     $('#ProductInformation').html(data);
                 },
                 error: function (xhr, status, error) {
                     alert(error);
                 }
             });
    }

当第一个 ajax 调用中返回的列表为空时，如何使用表单数据和 contactPerson 模型点击控制器操作？

【问题讨论】：

提示：您需要使用serializeArray() 而不是serialize() 才能推送更多数据。推送的数据仍然可以通过与serialize()一相同的方式发布。
@TetsuyaYamamoto : 我如何使用 serializeArray() 来处理表单数据和模型？
只需使用var obj = $('#frmSchool').serializeArray(); 并使用一系列obj.push() 方法来附加附加数据。然后在 AJAX 调用中使用data 属性，如data: obj。

标签： c# ajax asp.net-mvc

【解决方案1】：

您需要使用serializeArray()，而不是使用serialize() 来序列化表单，这可以在分配给AJAX 回调之前推送其他数据，如下例所示（参见相关问题here）：

function SaveQuote() {
    var obj = $('#frmSchool').serializeArray();

    // pushing additional data to existing array
    obj.push({ name: "Name", value: $("[name='Name']").val() });
    obj.push({ name: "Surname", value: $("[name='Surname']").val() });
    obj.push({ name: "Email", value: $("[name='Surname']").val() });

    var jsonObj = @Html.Raw(Json.Encode(Model));
    $.ajax({
        type: "POST",
        url: "@Url.Action("CreateClient", "Test")",
        data: obj,
        success: function (data) {
            $('#ProductInformation').html(data);
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });
}

此外，如果您想检查响应是否返回包含contactPerson 的部分视图或JSON 响应，请放置一个if-条件来检查指定对象键的存在：

控制器

[HttpPost]
public ActionResult GetClientMatch(ClientBusinessModel contactPerson)
{
    // *search for a list*
    if (list.Count > 0)
    {
        return PartialView("~/Views/Shared/Partials/_Client.cshtml", list);
    } 
    else
    {
        // key name intentionally changed for disambiguation
        return Json(new { contact = contactPerson }, JsonRequestBehavior.AllowGet);
    }
}

jQuery

function SaveQuote() {
    var obj = $('#frmSchool').serializeArray();
    obj.push({ name: "Name", value: $("[name='Name']").val() });
    obj.push({ name: "Surname", value: $("[name='Surname']").val() });
    obj.push({ name: "Email", value: $("[name='Surname']").val() });

    var jsonObj = @Html.Raw(Json.Encode(Model));
    $.ajax({
        type: "POST",
        url: "@Url.Action("CreateClient", "Test")",
        data: obj,
        success: function (data) {
            // check if contact person exists
            if (data.contact == undefined) {
                // returns partial view
                $('#ProductInformation').html(data);
            }
            else {
                // call another action here, e.g. create client function
                createClient(data.contact, ...);
            }
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });
}

调用另一个操作的方法取决于在该操作中设置的操作属性（GET/POST 方法）以及与该操作一起传递所需的参数。

【讨论】：