如何在控制器中执行操作从未知数量的输入接收更多数据

时间:2017-12-27 13:58:27

标签: asp.net-mvc

如何在控制器中执行操作以从未知数量的输入接收更多数据?

我想点击更多选项时输入更多信息,这意味着HTML页面上的DOM树正在增加,因为我不知道如何让动作从HTML页面上的未知数量的输入接收数据。

这是我的html代码

<div class="form-group">
<label class="col-md-2 lableAlign">Course Name</label>
<div class="col-md-6">
<input class="col-md-6" type="text" name="courseTitle" id="courseTitle" value="Thamar" maxlength="20">
@Html.ValidationMessageFor(model => model.courseTitle, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
<label class="col-md-2 lableAlign">Certificate</label>
<div class="col-md-6">
<input class="col-md-6 r" type="file" name="courseCertificate" id="courseCertificate" val`enter code here`ue="">
@Html.ValidationMessageFor(model => model.courseCertificate, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group more" id="corceMore">
<label class="col-md-3 more" onclick="corceAdd()">More +</label>

</div>

这是我的javascript代码

function corceAdd() {
++corcecount;
if (corcecount < 20) {
        $("<div class=\"divStyle\"><div class=\"form-group\"><label class=\"col-md-2 lableAlign\">اسم الدورة</label><div class=\"col-md-6\"><input class=\"col-md-6\" type=\"text\" name=\"corceTitle" + corcecount + "\" id=\"corceTitle" + corcecount + "\" value=\"\"></div></div><div class=\"form-group\"><label class=\"col-md-2 lableAlign\">الشهادة</label><div class=\"col-md-6\"><input class=\"col-md-6 r\" type=\"file\" name=\"corceCertificate" + corcecount + "\" id=\"corceCertificate" + corcecount + "\" value=\"\"></div></div>").insertBefore("#corceMore");

}
}

当点击更多选项时,新元素的ID和名称增加1,现在我的问题是当我点击提交时我希望将所有元素值发送到控制器中的帖子操作。

1 个答案:

答案 0 :(得分:0)

关于这个问题,有很多文章和主题:

http://techiesweb.net/2012/09/17/asp-net-mvc3-dynamically-added-form-fields-model-binding.html

ASP.NET MVC Dynamic Forms

我将展示主要观点。如何将动态输入绑定到动作模型。

您需要将集合作为模型。

public class SampleViewModel
{
  public IEnumerable<SampleItemViewModel> Items {get;set;}
}

public class SampleItemViewModel
{
   public string Id {get;set;}
}

然后在Razor视图中你应该创建一个这样的输入:

<input id='Items__0__Id' type='hidden' name='Items[0].Id' />
<input id='Items__1__Id' type='hidden' name='Items[1].Id' />

因此,您应该使用索引将输入的名称绑定到集合的属性。然后在你的行动中:

public ActionResult Post(SampleViewModel model)
{
   var items = model.Items; // Here you should have your collection
}