动态添加文本框并将值保存到asp.net mvc中的数据库中

时间:2014-04-17 05:10:30

标签: asp.net

我想通过单击添加按钮动态添加文本框,可以删除文本框,最后可以保存文本框中的列表值。 我的模型类

public class CustModel
{
    public List<Cust> CustList { get; set; }
}

public class Cust
{
    public string Name { get; set; }
}
My controller class


public class HomeController : Controller
    {
        private DB _entities;

        public HomeController()
        {
            _entities = new DbEntities();
        }

        public ActionResult Index()
        {
                return View(_customers);

        }
        [HttpPost]
        public ActionResult Index(CustModel model)
        {
                // save to the database
                return View();

        }
   } 

我想知道.cshtml代码。或任何其他建议将列表项提交到数据库。

1 个答案:

答案 0 :(得分:9)

这是我将如何做到的:

在CustModel中,我将属性更改为IEnumerable。我将使用EditorTemplate for Cust,这将节省额外的循环。

public class CustModel
{
    public IEnumerable<Cust> CustList { get; set; }
}

我的Index.cshtml视图变化很简单,我已声明强类型模型,然后在表单中我有@Html.EditorFor表示Custlist,一个按钮添加新的cust,一个按钮提交和JQuery脚本添加新卡斯特。请注意,在jquery中我正在创建控件数组,以便模型绑定器可以正确地选择它们。

<强> Index.cshtml

@model MvcApplication2.Models.CustModel

@{
    ViewBag.Title = "Home Page";
}


@using (Html.BeginForm()) {
    <fieldset>
        <legend></legend>
        <div id="divcust">
            @Html.EditorFor(m=>m.CustList)
        </div>
        <input id="btnAdd"  type="button" value="Add Cust" onclick="AddCust();" />
        <br />
        <br />
        <input type="submit" value="Submit" />
    </fieldset>
}
<script>
    function AddCust() {
        var m = $('#divcust input:last-child').attr('name');
        var index = 0;
        if (m != null && m.length > 0) {
            index = m.split('CustList[')[1].replace('].Name', '');
            index++;
        }

        var html = '<label for=\"CustList_' + index + '__Name\">Name</label>' +
            '<input id=\"CustList_' + index + '__Name\" class=\"text-box single-line\"' +
            ' type=\"text\" value=\"\" name=\"CustList[' + index + '].Name\">';
        $('#divcust').append(html);


    };
</script>

我在view / home文件夹中添加了一个EditorTemplates文件夹,并为Cust添加了一个视图:

<强> Cust.cshtml

@model MvcApplication2.Models.Cust

@Html.LabelFor(m=>m.Name)
@Html.EditorFor(m=>m.Name)

现在一切正常,我可以添加新的Custs并发布它们以保存。

enter image description here

如果我想添加删除功能,我必须小心保持控制阵列的完整性。