javascript - AJAX Post to Controller 未正确设置 VIewModel 参数

Question

当字段通过 AJAX 更改时，我试图将参数发布到 Controller 操作，但发现第一个参数始终为 null。

我要发布的 Controller 操作是:

public ActionResult Model_GroupCompanyIDChanged(ActionViewModel vm, int oldVal, int newVal)
     {
            vm.Model.Observation = "Changed from " + oldVal + " to " + newVal;

            return Refresh(vm);
     }

我的发布代码将屏幕上的表单序列化，并将其与刚刚更改的字段的旧值和新值一起发布。在 Action 参数中正确设置了旧值参数和新值参数，但 Controller Action 中的 vm 参数始终为 null。 Controller URL 没有问题，因为我可以调试操作并看到它被调用。

function ChangeRefreshScreen(ControllerURL, formActionUrl, oldVal, newVal) {
    var origModel = $("form[action='" + formActionUrl + "']").serialize();
    var data = {
        "oldVal": oldVal
        , "newVal": newVal
        , "vm": origModel

    };

    RefreshScreenPassData(ControllerURL, formActionUrl, data);
}

function RefreshScreenPassData(ControllerURL, formActionUrl, data) {
    alert(data);
    $.ajax({
        url: ControllerURL,
        type: 'POST',
        data: data,
        success: function (response) {
            RefreshScreenContent(response);
        },
        error: AjaxError
    });

}

将其与同一屏幕上的以下内容进行对比，当单击某个字段时，该屏幕正在处理:

Controller Action :

public ActionResult Model_ActionDateClicked(ActionViewModel vm)
        {
            vm.Model.Observation = "Clicked";

            return Refresh(vm);
        }

JavaScript(使用与上面相同的 RefreshScreenPassData 函数来执行实际的 POST):

function ElementClickedRefresh(ControllerURL, formActionUrl) {
    var origModel = $("form[action='" + formActionUrl + "']").serialize();
    RefreshScreenPassData(ControllerURL, formActionUrl, $("form[action='" + formActionUrl + "']").serialize());
}

简而言之，第一个更改事件示例首先将参数设置到一个对象中，因为有多个参数，并且只有旧的和新的 int 参数在服务器端设置，ViewModel vm 为 null。在第二次单击的示例中，使用序列化形式正确设置了虚拟机。

两者的 formActionUrl 参数相同，这不是问题，因为我调试了帖子，我能看到的唯一区别是第一个示例(更改事件)中的请求正文，vm 参数看起来是 URL 编码的:

oldVal=0&newVal=02&vm=__RequestVerificationToken%3DoeQx0RyQ-nOPQ1namoIeRuAWRzfVltfPx5ntsdpuaFTSdADuG_eC__Y54hlWmf8AOAigvyH8R_6qP77bJr1Mm5Yag7a7R9oSQse6e9NJMYg1%26ViewMode%3DEdit%26Model.ActionDate%3D11%252F07%252F2013%2B09%253A32%253A08%26Model.Observation%3DClicked%26Model.OriginatorUserID%3D1%26Model.ActiononUserID%3D0%26Model.ActionStatusID%3D1%26Model.ActionTypeID%3D0%26Model.ClientID%3D23%26Model.ClientContactID%3D0%26Model.PriorityID%3D0%26Model.CloseOutDate%3D%26Model.ActionNotes%3D%26Model.ProgressNotes%3D%26Model.Comments%3D%26Model.BusinessUnitID%3D0%26Model.GroupCompanyID%3D02%26Model.Confidential%3Dfalse%26Model.Id%3D1%26Model.Archived%3Dfalse%26Model.AddedUserID%3D1%26Model.AddedDateTime%3D11%252F07%252F2013%2B09%253A32%253A19%26Model.ModifiedUserID%3D1%26Model.ModifiedDateTime%3D11%252F07%252F2013%2B09%253A32%253A19

但是对于第二个点击事件是有效的，它不是:

__RequestVerificationToken=oeQx0RyQ-nOPQ1namoIeRuAWRzfVltfPx5ntsdpuaFTSdADuG_eC__Y54hlWmf8AOAigvyH8R_6qP77bJr1Mm5Yag7a7R9oSQse6e9NJMYg1&ViewMode=Edit&Model.ActionDate=11%2F07%2F2013+09%3A32%3A08&Model.Observation=Changed&Model.OriginatorUserID=1&Model.ActiononUserID=0&Model.ActionStatusID=1&Model.ActionTypeID=0&Model.ClientID=23&Model.ClientContactID=0&Model.PriorityID=0&Model.CloseOutDate=&Model.ActionNotes=&Model.ProgressNotes=&Model.Comments=&Model.BusinessUnitID=0&Model.GroupCompanyID=0&Model.Confidential=false&Model.Id=1&Model.Archived=false&Model.AddedUserID=1&Model.AddedDateTime=11%2F07%2F2013+09%3A32%3A19&Model.ModifiedUserID=1&Model.ModifiedDateTime=11%2F07%2F2013+09%3A32%3A19

我试图通过将 javascript 更改为手动设置我的参数字符串:

function ChangeRefreshScreen(ControllerURL, formActionUrl, oldVal, newVal) {
    var origModel = $("form[action='" + formActionUrl + "']").serialize();
    var data = "oldVal=" + oldVal + "&newVal=" + newVal + "&vm=" + origModel
    RefreshScreenPassData(ControllerURL, formActionUrl, data);
}

并且 POST 请求正文更改为

oldVal=02&newVal=023&vm=__RequestVerificationToken=xiYEcz53UNPVoGZ3RQGO_HFn54LIu0bTjQB-PB13tTEWZ7vUHMbsW25s7rI7D7lBLtACutEpynoNnk66jxijzSzFMCBO_nDoXf_FqsR9Cc81&ViewMode=Edit&Model.ActionDate=11%2F07%2F2013+09%3A32%3A08&Model.Observation=Clicked&Model.OriginatorUserID=1&Model.ActiononUserID=0&Model.ActionStatusID=1&Model.ActionTypeID=0&Model.ClientID=23&Model.ClientContactID=0&Model.PriorityID=0&Model.CloseOutDate=&Model.ActionNotes=&Model.ProgressNotes=&Model.Comments=&Model.BusinessUnitID=0&Model.GroupCompanyID=023&Model.Confidential=false&Model.Id=1&Model.Archived=false&Model.AddedUserID=1&Model.AddedDateTime=11%2F07%2F2013+09%3A32%3A19&Model.ModifiedUserID=1&Model.ModifiedDateTime=11%2F07%2F2013+09%3A32%3A19

但它仍然没有绑定(bind) View 模型参数。

当参数来自 JavaScript 对象时我没有设置参数，我做错了什么？

更新 1

我已经尝试手动调用 JSON stringify 来尝试让它工作，但它仍然不起作用:

function ChangeRefreshScreen(ControllerURL, formActionUrl, oldVal, newVal) {
    var origModel = $("form[action='" + formActionUrl + "']").serialize();
    var data = "oldVal=" + oldVal + "&newVal=" + newVal + "&vm=" + JSON.stringify(origModel)
    RefreshScreenPassData(ControllerURL, formActionUrl, data);
}

更新 2

以下对我有用，它将旧的和新的 vals 添加到表单中，但需要再次删除它们，否则下次它们不止一次出现在表单中时，会破坏旧的和新的 vals:

function ChangeRefreshScreen(ControllerURL, formActionUrl, oldVal, newVal) {
    var $myForm = $("form[action='" + formActionUrl + "']");
    $myForm.append("<input type='hidden' name='oldVal' value='" + oldVal + "' id='oldVal' />");
    $myForm.append("<input type='hidden' name='newVal' value='" + newVal + "' id='newVal' />");
    var origModel = $myForm.serialize();
    RefreshScreenPassData(ControllerURL, formActionUrl, origModel);
    $('#oldVal').remove();
    $('#newVal').remove();

}

最好不要将元素添加到 DOM，但至少它是一小段代码并且不会占用 CPU 资源。我仍然希望再次尝试 Gordatron 的解决方案之一，看看我是否可以让它工作，但可能没有时间。

Answer 1

方法一

似乎篡改表单数据对您不起作用。

试试下面的方法怎么样

function ChangeRefreshScreen(ControllerURL, formActionUrl, oldVal, newVal) {
    var $myForm = $("form[action='" + formActionUrl + "']");
    $myForm.append("<input type='hidden' name='oldVal' value='" + oldVal + "' />");
    $myForm.append("<input type='hidden' name='newVal' value='" + newVal + "' />");
    var origModel = $myForm.serialize();
    RefreshScreenPassData(ControllerURL, formActionUrl, origModel);
}

---

更新

方法二

尽管上述解决方案适用于您的情况(因为它适用于与我类似的情况)，但这里还有另一种方法。

向服务器发送数据有两种格式。一种是表单编码，您使用 $("form[action='"+ formActionUrl + "']").serialize() 实现，另一种是使用 JSON。

在你上面的问题中，你混合使用了两者

var data = {
    "oldVal": oldVal,
    "newVal": newVal,
    "vm": origModel
};

即在 JSON 对象中，您将添加序列化形式作为 vm。这就是为什么当 oldVal 和 newVal 被正确填充时，您在操作中的 vm 中得到 null 的原因。

我建议，如果您不想使用我的回答中提供的上述解决方案，您应该使用纯 JSON 方法。即使用您的表单值创建一个 JSON 对象并使用

发布

$.ajax({
    type: 'POST',
    url: ControllerURL,
    contentType: "application/json",
    data: JSON.stringify(data),   
    success: function (response) {
         RefreshScreenContent(response);
    },
    error: AjaxError
});

注意:contentType: "application/json"

我知道使用 id/names 获取表单的所有值并创建一个 JSON 对象会有点累，但对你来说幸运的是我写了一个小的 toJSON plugin一段时间以前，它会为您做这件事。

你只需要跟随

var form = $("form[action='" + formActionUrl + "']").toJSON();

var data = {
    "oldVal": oldVal,
    "newVal": newVal,
    "vm": form 
};

希望对你有帮助