从表单提交传递复杂数据?

时间:2013-09-26 23:44:35

标签: c# forms knockout.js

我有一个对象数组,每个对象都有5个字段,我想在表单提交上发送该数组。但我一直都是空的,不知道我做错了什么。

<form method="post" ....>
<table>
<!-- ko foreach: items-->
<tr>
   <td>
      <span data-bind="text: Category"></span>
      <input type="hidden" data-bind="value:ko.toJSON($data)" />
   </td>
</tr>
<!-- /ko -->
</table>
</form>


 [HttpPost]
 public void MyItems(List<Item> data)
 {

 }

项目与javascript对象的JSON匹配。

如何将我的数组项目添加到C#中?

3 个答案:

答案 0 :(得分:2)

您可以将listitem序列化为字符串作为javascript中的参数,并在动作mvc中反序列化。

<form method="post" ....>
<table>
<!-- ko foreach: items-->
<tr>
   <td>
      <span data-bind="text: Category"></span>
      <input type="hidden" value="ko.toJSON($data)" />
   </td>
</tr>
<!-- /ko -->
</table>
</form>

控制器

 [HttpPost]
 public void MyItems(string data)
 {
    JavaScriptSerializer parser = new JavaScriptSerializer();
    var info = parser.Deserialize<List<Item>>(data);
 }

答案 1 :(得分:1)

您必须将JSON数组的提交包装在像“items”这样的变量中,变量名称必须匹配。 ASP.NET会自动将JSON反序列化为您的对象,无需手动执行。我已经对此进行了全面测试并经常这样做,所以我知道它有效。

[HttpPost]
// Note how the argument name is "items"
 public ActionResult MyItems(List<Item> items)
 {
     // set a breakpoint and check the items List
     return Content("success")
 }

public class Item
{
// Make sure to use public properties get/set
    public string Category {get;set;}
}

和你的javascript

function Item()
{
    this.Category = ko.observable();
}

function ViewModel()
{
    this.Items = ko.observableArray();

    this.submit = function() {
        // note how we make sure argument name matches "items" as in Controller
        var myData = ko.toJSON(  { items: this.Items() });

        $.ajax({
            url: '/Home/MyItems',
            contentType: 'application/json',
            type: 'POST',
            data: myData,
            success: function(data){
                // check result
            }
        })

    }
}

var vm = new ViewModel();
ko.applyBindings(vm);

var item1 = new Item();
item1.Category("Cat1");
vm.Items.push(item1);

vm.submit();

答案 2 :(得分:0)

问题是你发布了一个html表单而不是JSON,你需要进入原始表单发布的数据来获取你的JSON字符串。通常这是Request.Form完成的?看起来您隐藏的标记上的name属性缺失了。一旦你有了它,它应该像这样简单:

<input type="hidden" name="MyHiddenElement" data-bind="value:ko.toJSON($data)" />

string json = Request.Form["MyHiddenElement"];

也有一点可能有用的是,如果你丢弃一些隐藏的标签并给它们所有相同的名称,你可以做一个给定名称的Request.Form,你将得到一个逗号分隔的数组<Input隐藏值的列表。这对于复杂的数据发布方案非常有用。

<input type='hidden' name="MyHiddenElement" value="1" />
<input type='hidden' name="MyHiddenElement" value="2" />
<input type='hidden' name="MyHiddenElement" value="3" />

string csvList = Request.Form["MyHiddenElement"];