当用户每次向视图上的输入字段添加值时,如何动态更新MVC模型列表属性
我的应用程序是一个C#Web应用程序,我使用的是razor Views。
因此,我的Model有一个名为workers的数据类型为List的属性:
public class Factory
{
public List<worker> workers { get; set; }
public class worker
{
public string name { get; set; }
}
}
而且,在Razor View中我有以下内容:
@model App.Models. Factory
<div id="worker" class="form-group">
@Html.LabelFor(m => m.workers, new { @class = "col-lg-2 control-label" })
<div class="container">
@Html.TextBoxFor(m => m.workers, new { placeholder = "worker name", @class="form-control", id="workerinput"})
</div>
</div>
输入@Html.TextBoxFor
应该有一个名为“添加工作者”的相应按钮。因此,当用户添加工作人员并单击按钮时,应将工作人员的姓名添加到工作人员列表中。用户可以添加多个工作人员。
如何在客户端添加每个名称(比如5个名称),然后在服务器上更新模型?
答案 0 :(得分:0)
听起来你想要的是将新项目异步发布回服务器,然后刷新模型。以下是如何做到这一点的一个很好的例子:
简而言之,当用户单击“添加工作者”时,视图会将新工作人员发布到服务器,然后服务器会检索完整的工作人员列表以返回到视图。然后可以更新视图以显示完整的工作人员列表。
答案 1 :(得分:0)
这只是一个示例,您可能需要稍微修改一下代码。
<script type="text/javascript">
var workers = new Array();
function addWorker() {
workers.push($("#TextToAdd").val());
}
function submit() {
var postData = { names: workers };
$.ajaxSettings.traditional = true;
$.ajax({
url: '@Url.Action("AddWorker", "Home")',
type: "POST",
dataType: 'json',
data: postData,
success: function () {
alert("Added");
}
});
}
</script>
以下是控件
@Html.TextBoxFor(x => x.TextToAdd)
@Html.DropDownList("workerList", items);
<input type="button" value="addlocal" onclick="addWorker();" />
<input type="button" value="Post" onclick="submit();" />
在控制器中,您需要将所有项目添加回列表。希望这会有所帮助。
public ActionResult AddWorker(List<string> names)
{
List<String> strings = new List<string>();
if (Session["List"] != null)
{
strings = (List<String>)Session["List"];
}
foreach (var s in names)
{
strings.Add(s);
}
Session["List"] = strings;
return Json(strings);
}