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},

如何通过两个数组？

已解决 - 根据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')
    });
});

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 =“venue” - id =“oldvenue”）。这会引起你的问题。我认为你最好先排序。然后，看看fiddler或firebug你应该看到你的ajax调用中发生的错误。我的'猜测'是你的'路线'也可能需要在global.asax文件中进行调整，然后你的行动'应该'（希望）正确地解雇。

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

[edit] - 有一些“明显的”进一步的想法。你有没有尝试过以下动作签名：

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 serialize（）方法：

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

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

2 个答案: