场景:
用户可以输入他/她的姓名、年级和导师姓名。然后需要输入主题分数。主题表单字段是动态的，换句话说，一个用户可能有 5 个主题，而另一个用户可能只有 3 个。
当前修复:
目前，我已经用意大利面条代码修复了这个问题，利用了 jQuery 的 append 按钮单击事件。并将表单数据作为 FormCollection 传递，然后将 formcollection 更改为 model。
我需要什么:
我需要使用模型而不是表单集合。也就是说，我需要将表单数据作为模型而不是表单集合传递。
这就是我所做的:
型号:
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; }
}
Controller :
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>
任何建议都会有帮助。谢谢。
最佳答案
我认为您期待这个解决方案
型号:
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; }
}
Controller :
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>
动态部分 View :
@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上的完整项目
关于javascript - 如何以动态形式使用模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42016797/