如何更新MVC模型列表属性首先是在客户端上编译列表

本文关键字：列表 客户端 编译 属性 更新 模型 MVC 何更新 | 更新日期: 2023-09-27 18:28:54

当用户每次向视图上的输入字段添加值时，我如何动态更新MVC模型列表属性

我的应用程序是一个C#网络应用程序，我正在使用剃刀视图。

因此，我的模型有一个名为workers of data type List:的属性

public class Factory
{
    public List<worker> workers { get; set; }
    public class worker
    {
        public string name { get; set; }
    }
}

而且，在Razor视图中，我有以下内容：

@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个名称），然后在服务器上更新模型？

如何更新MVC模型列表属性首先是在客户端上编译列表

这只是一个示例，您可能需要对代码进行一些修改。

<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);
    }

听起来您想要的是异步地将新项目发布回服务器，并刷新模型。下面是一个如何做到这一点的好例子：

http://blog.krisvandermast.com/UsingJQueryAjaxToLoadAPartialViewInASPNETMVC2AndThenRetrieveTheInputOnTheServerAgain.aspx

简言之，当用户单击"添加工作者"时，视图会将新工作者发布到服务器，然后服务器会检索完整的工作者列表以返回到视图。然后可以更新视图以显示完整的工作人员列表。

相关文章：