MVC 动态列表绑定

Question

我在模型中有一个列表属性

public class MyModel
{
   public MyModel()
    {
        ChildModels = new List<ChildModels>();
    }
  // other properties
  public List<ChildModel> ChildModels {get; set;}
}

public class ChildModel
{
    public int Id {get;set;}
    public int Name {get;set;}
    public int Value {get;set;}
}

在表单中提交生成的html标记是这样的

<div class="form-group">
    <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="ChildModels_0__Id" name="ChildModels[0].Id" type="hidden" value="0">
    <input id="ChildModels_0__Name" name="ChildModels[0].Name" type="hidden" value="value 1">
    <div class="control-label col-md-3">
        <label for="Value">value 1</label>
    </div>
    <div class="control-text col-md-7">
        <input class="form-control" id="ChildModels_0__Value" name="ChildModels[0].Value" type="text" value="">
    </div>
</div>

当表单被回发时，ChildModels 是null。其他属性有值。我什至在 Google Chrome 的“网络”选项卡的“请求标头”中都看不到 ChildModels。

谢谢！

编辑

这个问题是由 Kendo Grid 引起的。在编辑器模板中编辑记录时，它不会解析子对象。 为了解决这个问题，我必须编写一个解析子对象的 javascript 函数。像这样

function serialize(data) {
    serializeArray("ChildModels", data["ChildModels"], data);
}

function serializeArray(prefix, array, result) {
    var listattrs = $(".ValueAttributesClass"); // Add this class to one of the property of your child model 
    for (var i = 0; i < listattrs.length; i++) {
        result[prefix + "[" + i + "].Id"] = $("#" + listattrs[i].id).val();
        result[prefix + "[" + i + "].Name"] = $("#" + listattrs[i].id.replace("Id", "Name")).val();
        result[prefix + "[" + i + "].Value"] = $("#" + listattrs[i].id.replace("Id", "Value")).val();
    }
}

// In create event of kendo grid
.Create(update => update.Action("createactionmethod","controller").Data("serialize");

希望对有需要的人有所帮助。

谢谢！

Answer 1

如果您有一个场景，您必须将列表中的现有值填充到 UI，并且如果该列表可能会因用户交互而增长，那么将动态列表绑定到控制器的最简单方法是映射和创建一个 JS 数组，然后进行字符串化this 并绑定到表单中的隐藏控件，然后提交将这个字符串化的 JS 数组绑定到相应操作方法的字符串参数的表单，然后将该字符串反序列化为该操作方法中的有效格式。 映射和创建 JS 数组可以通过为 HTML 控件和 getElementsByClassName 提供通用类名来完成。

如果您想在 UI 中显示来自 DB 的数据，请从 db 获取数据并将该数据填充到 ChildModels 属性中。

public class MyModel
{
   public MyModel()
   {
       ChildModels = new List<ChildModels>();
   }
   // other properties
   public List<ChildModel> ChildModels {get; set;}

   // if you want to use the same model to submit, bind to this property
   //public string StringifiedJSArray {get; set;}
}

public class ChildModel
{
   public int Id {get;set;}
   public int Name {get;set;}
   public int Value {get;set;}
}

in cshtml :

@model MyModel;
<button onclick="addChild()">Add Child</button>
<form id="myForm" asp-action="submit" asp-controller="..."> 
  <div id="myDiv">
    //only if you need to populate data in UI from backend
    @foreach(var child in Model.ChildModels)
    {        
      <input class="ChildName" value="child.Name">
      <input class="ChildValue" value="child.Value">        
    }
 <div>
 <input hidden name="StringifiedJSArray">
 <button type="button" onclick="submit()">Submit</button>
</form>

<script>
  function addChild(){
    $("myDiv").append('
      <input class="ChildName">
      <input class="ChildValue">
    ');
  }



function submit(){
   var Names = document.getElementsByClass('ChildName');
   var Values = document.getElementsByClass('ChildValue');
   var myArray = [];
   for(var i = 0; i < Names.length; i++)
   {
      var obj = {id:"Your custom logic",Name:Names[i].value,Values[i].value}
      myArray.push(obj);
   }
   document.getElementById('StringifiedJSArray').value = JSON.stringify(myArray);
   document.getElementById('myForm').submit();
  }
</script>

在控制器动作中：

public void submit(string StringifiedJSArray)
{
    public List<ChildModel> Children = JsonConvert.DeserializeObject<List<ChildModel>>(StringifiedJSArray)
    ...
    ... your logic
}

Answer 2

在您的 MyModel 构造函数中，您有 List<ChildModels>，并且您的道具类型是 List<ChildModel>。这可能是问题所在。