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

时间:2013-08-24 01:57:31

标签: c# asp.net-mvc-3 razor

当用户每次向视图上的输入字段添加值时,如何动态更新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个名称),然后在服务器上更新模型?

2 个答案:

答案 0 :(得分:0)

听起来你想要的是将新项目异步发布回服务器,然后刷新模型。以下是如何做到这一点的一个很好的例子:

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

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

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