c# - 在 ASP.NET MVC 站点中实现 jQuery AJAX 调用

Question

我正在构建一个 ASP.NET MVC 站点，我想在其中的某些地方实现 jQuery AJAX 调用。我已经阅读了有关该主题的内容，但仍有一些问题。

---

模型绑定(bind)

首先，通过 AJAX 调用传递数据并将其模型绑定(bind)到我的 Controller Action 中的对象的正确方法是什么？

到目前为止，我在一些地方读到 jQuery 以键值对的形式发送数据，因此我不需要做任何额外的事情，而在其他地方，我读到我必须首先使用JSON 反序列化器，然后绑定(bind)结果。我目前已经将我的 Controller 操作实现为接受 HTTP POST 的操作。

它实际上是如何工作的？你能给我一些示例代码吗？

---

多条数据

接下来，如何发送多条数据？例如，我有一个提交评论的AJAX方法。在 AJAX 调用中，我想发送两个参数:一个 ID 参数(发表评论的帖子)和一个 Text 参数(评论的文本)。

我认为最好的方法是创建一个包含所有参数的类，然后通过 AJAX 调用发送该类，以绑定(bind)到 Controller 内的相同类中。我说得对吗？

---

身份验证

最后，是否会通过这样的 AJAX 调用传递表单例份验证？

如果用户已经登录，是否会发送身份以便我可以像往常一样在我的 Controller 操作中使用它？

提前致谢。

Answer 1

您可以按如下方式发布数据，这非常简单:

var formData = $(this).serialize()
        + "&Id=" + Id
        + "&otherVal=" + otherVal;

$.post($(this).attr("action"), formData, function(res)
{
    // do stuff with response

}, "json");

ActionMethod 定义为

public ActionResult MyAction(int id, string otherVal)
{
    return PartialView();
}

模型绑定(bind)器知道将您传递给要绑定(bind)到的变量的参数名称匹配。

或者您可以使用如下功能从表单上的所有选择下拉列表和复选框中提取数据:

    // frm is $('form') that gets passed to the function
    // includeContextObjects determines if it's only the elements in the 
    // current form, or from all over the page.
    function GatherFormDataAndSubmit(frm, includeContextObjects)
    {

        var data = frm.serializeObject(); 
        data = GetSelectData(frm, data, includeContextObjects);
        data = GetCheckBoxData(frm, data, includeContextObjects);

        $.post(frm.attr("action"), data, function(res)
        {
            UpdateSuccessMessage(res);
        }, "json");
    }

    function GetSelectData(frm, data, includeContextObjects)
    {
        var objSelects;
        if (includeContextObjects)
        {
            objSelects = $("select");
        }
        else
        {
            objSelects = frm.find("select");
        }

        if (objSelects.length)
        {
            data = GetDataObjectFromSelects(objSelects, data);
        }

        return data;
    }


    function GetDataObjectFromSelects(selects, data)
    {

        var valuesArray = selects.map(function()
        {
            return $.getAttributes($(this).find(":selected"));
        });

        var obj = new Array();
        $.each(valuesArray, function(item) { obj.push($(this)[0]); });

        if (!data)
        {
            data = {};
        }
        $.each(obj, function()
        {
            for (var propertyName in $(this)[0])
            {
                data[propertyName] = $(this).attr(propertyName);
            }
        });

        return data;
    }

function GetCheckBoxData(frm, data, includeContextObjects)
{
    var objCheckBoxes;
    if (includeContextObjects)
    {
        objCheckBoxes = $("input:checked");
    }
    else
    {
        objCheckBoxes = frm.find("input:checked");
    }

    if (objCheckBoxes.length)
    {
        data = GetDataObjectFromCheckBoxes(objCheckBoxes, data);
    }

    return data;
}

function GetDataObjectFromCheckBoxes(objCheckBoxes, data)
{

    var valuesArray = objCheckBoxes.map(function()
    {
        return $.getAttributes($(this));
    });

    var obj = new Array();
    $.each(valuesArray, function(item) { obj.push($(this)[0]); });

    $.each(obj, function(i)
    {
        data["configuredFactsheets[" + i + "].configuredFactsheetId"] = $(this).attr("configuredFactsheetId");
    });

    return data;
}

请注意，serializeObject() 依赖于 this ，而 getAttributes 依赖于 this

在这种情况下，我的操作方法是:

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult EditConfiguredPanel(ConfiguredPanel cfp, List<ConfiguredFactsheet> configuredFactsheets) 
{

    bool success = repos.UpdateConfiguredPanel(cfp, configuredFactsheets);

    return Json(success);
}

哪里List<ConfiguredFactsheet>的 ID 对应于使用 GetCheckBoxData() 收集的 ID ConfiguredPanel 的 id 对应于从选定的选择列表选项中收集的 id。

修改它以包含评论文本和另一个 Id 值并不需要太多。

Forms Authentication 数据将作为 cookie 与每个请求一起传输，所以是的。