情景：
用户可以输入他/她的姓名，成绩和辅导员姓名。然后需要输入主题标记。主题表单字段是动态的，换句话说，一个用户可以具有5个主题而另一个可以仅具有3个主题。
当前修正：
目前，我已经修复了意大利面条代码，在按钮点击事件中使用了jQuery＆＃39; append。并将表单数据作为FormCollection传递，然后将formcollection更改为model。
我需要什么：
我需要使用Model而不是表单集合。也就是说，我需要将表单数据作为模型而不是formcollection传递。
这就是我的所作所为：
型号：
public class StudentModel
{
public string Name { get; set; }
public string Grade { get; set; }
public string Tutor { get; set; }
public List<SubjectModel> Subjects { get; set; }
}
public class SubjectModel
{
public string Subject { get; set; }
}
控制器：
public class HomeController : Controller
{
....
[HttpPost]
public ActionResult Index(FormCollection form)
{
var subjects = form["Subject"].Split(',');
var modelsubjects = new List<SubjectModel>();
foreach (var subject in subjects)
{
modelsubjects.Add(new SubjectModel() { Subject = subject });
}
var model = new StudentModel();
model.Name = form["Name"];
model.Grade = form["Grade"];
model.Tutor = form["Tutor"];
model.Subjects = modelsubjects;
//Here I get the model from a dynamic form
return View();
}
}
查看：
<div class="jumbotron">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div class="row">
<div class="col-sm-3">
<label for="Name">Name</label>
<input type="text" id="Name" name="Name" />
</div>
<div class="col-sm-3">
<label for="Grade">Grade</label>
<input type="text" id="Grade" name="Grade" />
</div>
<div class="col-sm-3">
<label for="Tutor">Tutor</label>
<input type="text" id="Tutor" name="Tutor" />
</div>
<div class="col-sm-1">
<a class="btn btn-primary" id="addSubject">Add Subject</a>
</div>
<div class="col-sm-1">
<input class="btn btn-primary" type="submit" value="Submit" />
</div>
</div>
<div id="subjectInfo" style="padding-top:10px;">
</div>
}
</div>
<script type="text/javascript">
var count = 0;
$("#addSubject").click(function () {
$("#subjectInfo").append("<div class='row'>" +
"<div class='col-sm-8'>" +
"<label for='Subject_" + count + "'>Subject " + count + "</label>" +
"<input type='text' name='Subject' id='Subject_" + count + "' />" +
"</div>" +
"</div>");
count++;
});
</script>
任何建议都会有所帮助。谢谢。
答案 0 :(得分：1)
由于SubjectModel只包含一个简单属性，因此如果您只使用包含属性List<string> Subjects的视图模型，那么这将更加容易，然后您只需要输入`
public class StudentVM
{
public string Name { get; set; }
public string Grade { get; set; }
public string Tutor { get; set; }
public List<string> Subjects { get; set; }
}
Subjects属性将是文本框值的数组，然后您可以在POST方法中映射到您的数据模型
[HttpPost]
public ActionResult Index(StudentVM model)
{
var student = new StudentModel();
student.Name = model.Name;
....
foreach (var subject in model.Subjects)
{
student.Subjects.Add(new SubjectModel() { Subject = subject });
}
// Save and redirect
如果SubjectModel包含多个属性，则需要生成带有名称前缀和索引器的输入（对于某些选项，请参阅this answer）
附注：您应该使用强类型HtmlHelper方法生成输入，以便获得正确的双向模型绑定以及客户端和服务器端验证。
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(m => m.Name)
@Html.ValidationMessageFor(m => m.Name)
答案 1 :(得分：1)
我认为你期待这个解决方案
<强>型号：
public class StudentModel
{
[Required]
public string Name { get; set; }
public string Grade { get; set; }
public string Tutor { get; set; }
public List<SubjectModel> Subjects { get; set; }
}
public class SubjectModel
{
[Required]
public string Subject { get; set; }
}
<强>控制器：
public class HomeController : Controller
{
....
[HttpPost]
public ActionResult Index(StudentModel stu)
{
if (ModelState.IsValid)
{
//db operations
return RedirectToAction("Index");
}
return View(stu);
}
public ActionResult Subjects(int count)
{
ViewBag.count = count;
return PartialView("SubjectPV");
}
查看：
@{
ViewBag.Title = "Index";
}
@model DynamicModelForm.Models.StudentModel
<div class="jumbotron">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div class="row">
<div class="col-sm-3">
<label for="Name">Name</label>
@*<input type="text" id="Name" name="Name" />*@
@Html.TextBoxFor(x => x.Name)
@Html.ValidationMessageFor(x => x.Name)
</div>
<div class="col-sm-3">
<label for="Grade">Grade</label>
@*<input type="text" id="Grade" name="Grade" />*@
@Html.TextBoxFor(x => x.Grade)
</div>
<div class="col-sm-3">
<label for="Tutor">Tutor</label>
@*<input type="text" id="Tutor" name="Tutor" />*@
@Html.TextBoxFor(x => x.Tutor)
</div>
<div class="col-sm-1">
<a class="btn btn-primary" id="addSubject">Add Subject</a>
</div>
<div class="col-sm-1">
<input class="btn btn-primary" type="submit" value="Submit" />
</div>
</div>
<div id="subjectInfo" style="padding-top:10px;">
@{
if (Model.Subjects != null)
{
var count = 0;
foreach (var sub in Model.Subjects)
{
<div class='row'>
<div class='col-sm-8'>
<label for="Subject_@count">Subject @count</label>
@*@Html.TextBoxFor(x => x.Subject, new { id = "subject_" + count })*@
<input type="text" class="SubjectsSubject" name="Subjects[@count].Subject" id="subject_@count" value="@sub.Subject" />
@Html.ValidationMessageFor(x => x.Subjects[count].Subject)
</div>
</div>
count++;
}
}
}
</div>
}
</div>
<script type="text/javascript">
//var count = 0;
$("#addSubject").click(function () {
var count = $('.SubjectsSubject').length
$.ajax({
url: '@Url.Action("Subjects","Home")' + "?count=" + count,
success: function (result) {
$("#subjectInfo").append(result);
//count++;
},
error: function (req, status, error) {
alert(error);
}
});
});
</script>
动态部分视图：
@model DynamicModelForm.Models.SubjectModel
<div class='row'>
@{
var count = ViewBag.count;
}
<div class='col-sm-8'>
<label for="Subject_@count">Subject @count</label>
@*@Html.TextBoxFor(x => x.Subject, new { id = "subject_" + count })*@
<input type="text" class="SubjectsSubject" name="Subjects[@count].Subject" id="subject_@count"/>
@Html.ValidationMessageFor(x => x.Subject)
@*<span class="field-validation-valid" data-valmsg-for="Subjects[@count].Subject" data-valmsg-replace="true"></span>*@
</div>
</div>
在github中完成项目