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

Question

我想通过使用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... 
} 

在我jQuery：

$('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:部分下面的一切工作正常：

data: venue, 

或：

data: old venue, 

换句话说，我可以在一组文本框的传递给我的行动和调试我确认我得到正确值的字符串数组。

但是，当我试图通过这两个我得到一个错误。我试过以下所有无效：

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

我该如何传递两个数组？

解决 - 更新基于输入来自达林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') 
    }); 
}); 

Answer 1

试试这个：

$.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数组对象。

另请注意，如果使用jquery 1.4及更高版本，则成功执行模型绑定所需的配置值为traditional: true。

Answer 2

残，

第一件事，我注意到有关在div上面的HTML，是重复的标识（ID =“会场“ - id =”oldvenue“）。这会导致你的问题。我认为你最好先排序。然后，看看小提琴手或萤火虫，你会看到你的ajax调用中发生的错误。我的'猜测'是你的'路线'可能还需要在global.asax文件中进行调整，然后你的动作'应该'（希望）会正确激发。

正如我所说的，萤火/小提琴手救援也许......

[编辑] - 有几个“明显”的进一步思考。你尝试以下操作签名：

public ActionResult UpdateVenue(FormCollection collection) 

，然后检查请求这样：

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

等等，等等。见例如在：

http://code-inside.de/blog-in/2009/04/06/howto-from-the-view-to-the-controller-in-aspnet-mvc-with-modelbinders/

也，看$ AJAX序列化（）方法，在你的代码中使用：

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