代码之家  ›  专栏  ›  技术社区  ›  Alex P

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

  •  1
  • Alex P  · 技术社区  · 14 年前

    我想使用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')
        });
    });
    
    2 回复  |  直到 14 年前
        1
  •  3
  •   Darin Dimitrov    14 年前

    试试这个:

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

    请注意 venue oldvenue

    还要注意 traditional: true

        2
  •  0
  •   jim tollan    14 年前

    剩下的,

    关于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"];
    

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

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