在ASP.NET MVC中使用jQuery.serializeArray

我將$('#myForm').serializeArray()發佈到ASP.NET MVC（2.0）操作。序列化數組如下所示：在ASP.NET MVC中使用jQuery.serializeArray

filters[0][name] : gemcolor 
filters[0][value] : Yellow 
filters[1][name] : gemcolor 
filters[1][value] : Green 
filters[2][name] : jcOnly 
filters[2][value] : true 
someOtherData  : abc

我想有在消耗：

public ActionResult GetData(Filter filter)

class Filter { 
    string someOtherData; 
    bool jcOnly; 
    List<string> gemcolor; 
}

我可以通過FormCollection只是挖，但我期待一個更優雅的解決方案（我懷疑它會涉及一個自定義模型綁定器）。

來源

2011-01-26 THX-1138

如何使用JSON？我不知道jQuery的序列化數據是否很容易被ASP.NET MVC使用，但是JSON肯定會。 – rsenna 2011-01-26 16:46:31

我找不到一行代碼來做表格 - > JSON。我錯過了什麼嗎？我仍然想知道我的問題的答案，只是FMI。 – 2011-01-26 16:57:53

這不起作用，因爲默認模型聯編程序不希望數據被格式化爲這樣。只需使用.serialize()而不是serializeArray()。例如：

$.ajax({ 
    url: '/foo', 
    type: 'post', 
    data: $('#myForm').serialize(), 
    success: function(result) { 
     alert('ok'); 
    } 
});

或使用優秀jquery form plugin它允許你AJAXify現有的HTML表單在一個優雅的方式簡化你的生活：

$(function() { 
    $('#myForm').ajaxForm(function(result) { 
     alert('ok'); 
    }); 
});

UPDATE：

的解釋後，在您的評論中，您可以繼續：

Y OU可以使用插件從this answer，其將表單元素爲對象由默認的模型綁定可以理解的，可以用其他的一些信息彙總：

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name]) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
};

，然後簡單地說：

data: { filters: $('#myForm').serializeObject(), someOtherData: 'foo bar' }

來源

2011-01-26 16:51:12

我知道這是舊的，但如何對這樣的事情 - 這是我一般用我的網頁上通過AJAX提交：

$(function() { 

    @*-- PostAll--*@ 

    $(".postAll").click(function() { 
     var container = $(this).closest(".postGroup"); 
     var p = {}; 

     container.find("input[type='text'], input[type='radio']:checked, input:checkbox:checked, textarea").each(function (i, e) { 

      p[$(e).attr("name")] = $(e).val(); 

     }); 

     container.find('select').each(function (i, e) { 

      p[$(e).attr("name")] = $(e).find('option:checked').val(); 

     }); 

     $.post($(this).data("url"), p, function (data, status) { 
      //Do Some Notification 
     }) 

    }); 


});

我往往有HTML ST ructure爲：

內含div所有表格元素
A按鈕與格內
按鈕與鏈接

像這樣一個URL屬性：

<div class="postGroup"> 
    <div class="row"> 
     <div class="col-md-2 col-md-offset-3"> 
      <input type="text" name="myText" /> 
     </div> 
     <div class="col-md-2"> 
      <input type="radio" name="myRad" value="A1" /> 
      <input type="radio" name="myRad" value="A2" /> 
      <input type="radio" name="myRadTwo" value="A3" /> 
      <input type="radio" name="myRadTwo" value="A4" /> 

     </div> 
     <div class="col-md-2"> 
      <input type="checkbox" name="mycheck" value="B1" /> 
      <input type="checkbox" name="mycheck" value="B2" /> 
      <input type="checkbox" name="mycheckTwo" value="B3" /> 
      <input type="checkbox" name="mycheckTwo" value="B4" /> 
     </div> 
     <div class="col-md-2"> 
      <select name="mySelect"> 
       <option value="S1">Select 1</option> 
       <option value="S2">Select 2</option> 
       <option value="S3">Select 3</option> 
       <option value="S4">Select 4</option> 
      </select> 
      <select name="mySelectTwo"> 
       <option value="R1">Select 1</option> 
       <option value="R2">Select 2</option> 
       <option value="R3">Select 3</option> 
       <option value="R4">Select 4</option> 
      </select> 
     </div> 
    </div> 
    <button class="postAll" data-url="/MyEndpoint">click</button> 
</div>

然後你可以有一個正常的模型來捕捉你需要的東西。不知道這是否是最好的方式，但我使用這一次。

來源

2015-04-22 12:30:01 user3836415

在ASP.NET MVC中使用jQuery.serializeArray

回答

相關問題