將哈希表{}從javascript傳遞給mvc3控制器？

Question

如何將以下內容傳遞回mmvc3控制器ActionResult？

var hashtable = {};
hashtable['screaming'] = ["1", "2"];
hashtable['mellow'] = ["3", "4", "5"];
$.get('@Url.Action("PerformMagic")', { 'theValues': hashtable }, function (data) {
    //Callback..    
});

我的控制器方法sig會是什么樣的？

public ActionResult PerformMagic(/*What type goes here? string[] theValues or string[][] theValues)
{
}

Answer 1

如果要將哈希表值傳遞給操作，最自然的方法是將其作為字典傳遞給操作

public ActionResult PerformMagic(Dictionary<String, List<int>> theValues)
{
    // the magic!
}

使用jQuery Ajax功能將值傳遞給ASP.NET MVC操作時，您將面臨一個巨大的框架誤解。 ASP.NET MVC ModelBinder期望使用此命名方案將值綁定到請求正文或URL中的Dictionary

theValues[0].key=key0
theValues[0].value[0]=values0.0
theValues[0].value[1]=values0.1
theValues[1].key=key1
theValues[1].value[0]=values1.0
theValues[1].value[1]=values1.1
theValues[1].value[2]=values1.2

此博客文章提供了有關字典和列表的ASP.NET MVC命名方案的更多詳細信息。

但是jQuery使用這個命名方案來傳遞請求體或URL中的值

theValues[key0][]=value0.0
theValues[key0][]=value0.1
theValues[key1][]=value1.0
theValues[key1][]=value1.1
theValues[key1][]=value1.2

在這兩個示例中，我省略了'＆'並將請求值拆分為單獨的行以獲得更好的可讀性。

因此，如果您希望將值作為Dictionary傳遞給action方法，則需要使jQuery和ASP.NET MVC Model Binders交談。 我可以想到兩個選擇：

1. 更改ASP.NET MVC期望的請求參數的命名方案
2. 更改jQuery用於構建請求參數的命名方案

方法1需要您編寫自己的Model Binder，並且由於綁定到Dictionary動作參數的命名功能隱藏在內部UpdateDictionary方法中，因此編寫自己的Model Binder意味着要復制許多ASP.NET MVC DefaultModelBinder代碼。 ..

方法2應該相當簡單，因為jQuery使用param函數來構建請求參數，而jQuery ajax函數允許您傳遞由自定義函數轉換的原始值以請求參數。 有關jQuery ajax函數的更多細節可以在這里找到 。 請參閱“processData”部分。

我將給出一個原型 jQuery實現，將hashtable var作為字典參數傳遞給ASP.NET MVC控制器動作：

function buildParams(prefix, dict) {
    var s = [],
    add = function (key, value) {
        // If value is a function, invoke it and return its value
        value = jQuery.isFunction(value) ? value() : value;
        s[s.length] = encodeURIComponent(key) + "=" + encodeURIComponent(value);
    };

    var i = 0;

    jQuery.each(dict, function (key, values) {
        add(prefix + '[' + i + '].key', key);

        jQuery.each(values, function (j, value) {
            add(prefix + '[' + i + '].value[' + j + ']', value);
        });

        i++;
    });

    return s.join('&');
}

$(function () {
    $('#submithashes').click(function (e) {
        var hashtable2 = {};
        hashtable2['screaming'] = ["1", "2"];
        hashtable2['mellow'] = ["3", "4", "5"];

        $.ajax({
            type: "POST",
            url: '@Url.Action("PerformMagic")',
            dataType: 'json',
            processData: false,
            data: buildParams('theValues', hashtable2),
            success: function () {

            }
        });

        e.preventDefault();
    });
});

這個原型實現中有趣的部分是它使用POST，它使用jQuery ajax而不是$ .get或$ .post快捷方式，因為快捷方式不會暴露指定processData的可能性：false並且使用自定義構建請求參數buildParams函數而不是通過$ .param jQuery函數。

Answer 2

您希望控制器看起來像什么？ 你可以這樣打破它：

public ActionResult PerformMagic(string[] screaming, string[] mellow) { }

$.get('@Url.Action("PerformMagic")', { screaming: hashtable.screaming, mellow: hashtable.mellow }

或者如果你想傳遞一個string[][] ，這可能會有效

var hashtable = [];
hashtable.push(["1", "2"]);
hashtable.push(["3", "4", "5"]);

$.get('@Url.Action("PerformMagic")', { arrayOfArrays: hashtable }