使用 jquery 创建一个列表并将其发布到 asp.net mvc

Posted 2023-04-13

【中文标题】使用 jquery 创建一个列表并将其发布到 asp.net mvc

【英文标题】：Create a list with jquery and post it to asp.net mvc

【发布时间】：2012-01-15 23:53:42

【问题描述】：

我正在寻找一种方法将给定类的所有现有复选框的值存储到某种列表或数组中，并通过 jquery 将结果发送到 asp.net mvc 控制器。复选框不必勾选，我需要全部。

更多细节：

我的复选框看起来像这样

<input type="checkbox" value="1" class="a-checkbox"
<input type="checkbox" value="2" class="a-checkbox"
<input type="checkbox" value="3" class="a-checkbox"

如果我的 MVC 控制器看起来像这样就好了

public JsonResult SaveList(List<String> values)  //... 

我知道我可以通过以下方式访问复选框

 $('input.a-checkbox').each(
    function () 
        // create the list with the help of $(this).val()
    
 );

 // jquery post would happen here

但我不知道如何创建这样的数据结构。你能帮帮我吗？

谢谢

编辑：很好，谢谢。你能告诉我这有什么问题吗？我的控制器确实被调用了，但列表为空（在服务器端）

var list = [];
            $('a-checkbox').each(
                function () 
                    list.push($(this).val());
                
            );

            $.ajax(
                type: "POST",
                url: myUrl,
                data: list,
                success: function (data) 
                    alert(data.Result);
                ,
                dataType: "json",
                traditional: true
            );

【问题讨论】：

如果值为 null，则表示您有模型绑定错误。这是我用来在调试中将绑定错误转储到控制台的扩展方法：pastebin.com/S0gM3vqg

【参考方案1】：

这会将所有checkbox 值（value 属性）放入Array：

var values = [];
$(".a-checkbox").each(function () 
    values.push($(this).val());
);

// values now equals ["1", "2", "3"]

【讨论】：

谢谢大家，也许你可以看看上面的m编辑？帖子有问题

jQuery 将使用param 序列化您的list。在链接页面上有一个关于Arrays 如何序列化的示例。

【参考方案2】：

试试这个

var list = [];
$('input.a-checkbox').each(
    function () 
        // create the list with the help of $(this).val()
        list.push($(this).val());
    
);

现在您可以将 list 对象发布到您的 mvc 控制器操作。

【参考方案3】：

我使用 .Serialize() 为我的 mvc ajax 操作格式化表单数据。

var checkPostData = $(".a-checkbox").serialize();

http://api.jquery.com/serialize/

【讨论】：

这会产生一个查询字符串（例如：a=1&b=2&c=3&d=4&e=5），而不是一个数组。

嗯，他确实说“这会很好......”而不是“它是必需的”：P mvc 模型绑定器通常可以很好地处理细节。不过，你的权利可能不是 OP 所追求的。

【参考方案4】：

在我的 MVC 模式下，我遇到了同样的 Nulls 问题。我发现使用 $("input:checked") 作为我的数据而不是尝试将值提取到 js 中的数组效果更好，并且我通过为复选框提供名称值来修复 Nulls 问题，因为 MVC 绑定在输入名称上。

html

<a class="post-checkboxes" href="#">post checkboxes</a>
<input name="[MVC viewmodel list variable name]" type="checkbox" value="1" />
<input name="[MVC viewmodel list variable name]" type="checkbox" value="2" />

javascript

$('.post-checkboxes').click(function (e) 
    e.preventDefault();
    $.post("[location to post to]", $("input:checked"));            
);