Asp.net mvc 如何使用$.ajax将多个数组传递给ASP.NET MVC操作？

我想使用jQuery$.ajax将两组文本框的内容传递给控制器上的一个操作。到目前为止，我的代码如下（为了便于阅读，所有代码都缩写为）：

在我的html中：

<div class="venue-holder">
    <input class="tb-venue" id="venue" name="venue" readonly="readonly" type="text" value="Esfahan" />
    <input class="oldVenue" id="oldvenue" name="oldvenue" type="hidden" value="Shiraz" />
    <input class="tb-venue" id="venue" name="venue" readonly="readonly" type="text" value="Tehran" />
    <input class="oldVenue" id="oldvenue" name="oldvenue" type="hidden" value="Tabriz" />
</div>

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateVenue(string[] venue, string[] oldvenue)
{
    // do some stuff... 
}

$('form#formUpdateVenue').submit(function(event) {
    event.preventDefault();
    var venue = $('input[name=venue]');
    var oldvenue = $('input[name=oldvenue]')
    $.ajax({
        url: '/Admin/UpdateVenue',
        type: 'POST',
        dataType: 'json',
        data: {venue: venue, oldvenue: oldvenue},
        success: alert()
    });

在我的jQuery中：

<div class="venue-holder">
    <input class="tb-venue" id="venue" name="venue" readonly="readonly" type="text" value="Esfahan" />
    <input class="oldVenue" id="oldvenue" name="oldvenue" type="hidden" value="Shiraz" />
    <input class="tb-venue" id="venue" name="venue" readonly="readonly" type="text" value="Tehran" />
    <input class="oldVenue" id="oldvenue" name="oldvenue" type="hidden" value="Tabriz" />
</div>

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateVenue(string[] venue, string[] oldvenue)
{
    // do some stuff... 
}

$('form#formUpdateVenue').submit(function(event) {
    event.preventDefault();
    var venue = $('input[name=venue]');
    var oldvenue = $('input[name=oldvenue]')
    $.ajax({
        url: '/Admin/UpdateVenue',
        type: 'POST',
        dataType: 'json',
        data: {venue: venue, oldvenue: oldvenue},
        success: alert()
    });

问题：

<div class="venue-holder">
    <input class="tb-venue" id="venue" name="venue" readonly="readonly" type="text" value="Esfahan" />
    <input class="oldVenue" id="oldvenue" name="oldvenue" type="hidden" value="Shiraz" />
    <input class="tb-venue" id="venue" name="venue" readonly="readonly" type="text" value="Tehran" />
    <input class="oldVenue" id="oldvenue" name="oldvenue" type="hidden" value="Tabriz" />
</div>

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateVenue(string[] venue, string[] oldvenue)
{
    // do some stuff... 
}

$('form#formUpdateVenue').submit(function(event) {
    event.preventDefault();
    var venue = $('input[name=venue]');
    var oldvenue = $('input[name=oldvenue]')
    $.ajax({
        url: '/Admin/UpdateVenue',
        type: 'POST',
        dataType: 'json',
        data: {venue: venue, oldvenue: oldvenue},
        success: alert()
    });

上面显示的jquery不起作用。当我提交网页“挂起”时，我的控制器上的操作不会被调用

但是，如果我用以下任一项替换

数据：

部分，则所有操作都可以正常进行：

data: venue,

或：

换句话说，我可以将一组文本框传递给我的操作，通过调试，我确认得到了一个正确值的字符串数组

然而，当我试图通过这两个时，我得到了一个错误。我尝试了以下所有方法，但均无效：

data: {venue: venue, oldvenue: oldvenue},
data: {venue, oldvenue},

如何传递这两个数组

已解决-根据Darin的输入更新jQuery

$('form#formUpdateVenue').submit(function(event) {
    event.preventDefault();
    var tb = $('input[name=venue]');
    var tbVenue = new Array();

    tb.each(function() {
        tbVenue.push($(this).val());
    });

    var tbOld = $('input[name=oldvenue]');
    var tbOldVenue = new Array();

    tbOld.each(function() {
        tbOldVenue.push($(this).val());
    });


    $.ajax({
        url: '/Admin/UpdateVenue',
        type: 'POST',
        dataType: 'json',
        data: { venue: tbVenue, oldvenue: tbOldVenue },
        traditional: true,
        success: alert('Ok')
    });
});

残余物

关于div中的上述html，我注意到的第一件事是重复的id（id=“venue”-id=“oldvenue”）。这会给你带来麻烦。我想你最好先把它弄清楚。然后，看看fiddler或firebug，您应该会看到ajax调用中出现的错误。我的“猜测”是，您的“路由”可能还需要在global.asax文件中进行调整，然后您的操作“应该”（希望）正确启动

正如我所说，可能是萤火虫/小提琴手来营救

[编辑]-有一些“明显的”进一步的想法。您是否尝试了以下操作签名：

public ActionResult UpdateVenue(FormCollection collection)

然后对请求进行如下检查：

var venue = collection["venue"]; 
var oldVenue = collection["oldvenue"];

等等。参见以下示例：

另外，请查看要在代码中使用的$ajax serialize（）方法：

试试这个：

$.ajax({
    url: '/Admin/UpdateVenue',
    type: 'POST',
    dataType: 'json',
    data: { venue: [ 'elem1', 'elem2' ], oldvenue: [ 'elemA', 'elemB' ] },
    traditional: true,
    success: function(result) {
        alert('ok');
    }
});

请注意，

venue

和

oldvenue

参数必须是数组，而不是像您的情况那样是字符串。您只是从返回单个字符串的输入字段的值中复制它们。因此，如果您想要一个数组，您需要构造一个javascript数组对象

---

还要注意

traditional:true

config值，如果使用jquery 1.4或更高版本，则需要该值才能成功执行模型绑定。

您的意思是通过AJAX调用传递整个jquery对象吗？通常只传递值$（…）.val（）是的-我的意思是只要$（…）.val（）…Darin-这是有意义的，我会尝试一下。我确实尝试过将我的文本框值放入数组并将其传递给控制器，但这对我不起作用。请参阅我使用的jQuery代码的更新帖子…根据您的输入，我已经解决了我的问题（请参阅更新帖子）。我按照您的建议将文本框值放入数组中。感谢您花时间帮助我解决这个问题。非常感谢。吉姆-谢谢你的意见。我将尝试一下你的收藏想法，看看它是如何运作的。请注意，我不能使用serialize（），因为texbox不在我的Html.Beginform…Jim中-关于您提出的ID点的快速问题。我理解每个ID都应该是唯一的，这被认为是最佳实践。也就是说，如果我引用文本框的唯一方式是通过jQuery使用name属性，那么重复ID的后果是什么？我的html呈现得很好，jQuery确实像预期的那样捕获了文本框值……剩余-如果您总是按名称引用，并且是项目中唯一的开发人员，那么我认为您可以这样做。但是，如果有不止一个开发人员参与，那么我认为在做这种事情时应该采用一套标准。这些应该逐字记录，只是详细说明在上述情况下，使用重复id是可以的。这实际上只是采用一种做法并严格执行的问题。如果没有很好的理解和记录，我不会觉得这样做很安全。Jim-同意你关于设置编码标准的评论，特别是在团队内部。说得好。我不熟悉网页编程（只是做了一个有趣的个人项目来强制学习mvc和jQuery），我只是想检查一下使用重复ID不会产生对我来说不明显的后果，例如错误的页面呈现、css错误等。