动态添加文本框并将值保存到ASP.NET MVC中的数据库

问题描述

我想通过单击添加按钮动态添加文本框，可以删除文本框，最后可以保存文本框中的列表值.我的模特班

I would like to add text box dynamically by clicking add button , can delete text box and finally can save the list values from the text boxes .My model class

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代码.或将列表项提交到数据库的任何其他建议.

I want to know .cshtml code . Or any other suggestion to submit list item to the database .

推荐答案

这是我的处理方式:

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

In the CustModel, I will change the property to IEnumerable. I will use EditorTemplate for Cust and this will save extra looping.

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

我的Index.cshtml视图非常简单，我已经声明了强类型模型，然后以Custlist的形式是 @ Html.EditorFor ，一个用于添加新客户的按钮，一个用于提交的按钮和JQuery脚本添加新客户.请注意，在jquery中，我正在创建控件数组，以便模型活页夹可以正确选择它们.

My Index.cshtml view is vary simple, I have declared strongly typed model, then in the form I have @Html.EditorFor for Custlist, a button to add new cust, a button to submit and JQuery script to add new cust. Notice that in the jquery I am creating array of controls so that model binder can pick them properly.

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添加了视图:

I have added a EditorTemplates folder in my view/home folder and added a view for Cust:

Cust.cshtml

@model MvcApplication2.Models.Cust

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

现在一切正常，我可以添加新的Cust，并将其发布以保存.

Everything works fine now, I can add new Custs and post them to save.

如果要添加删除功能，则必须注意保持控件数组的完整性.

If I want to add delete function, I have to be careful to keep integrity of my control array.

这篇关于动态添加文本框并将值保存到ASP.NET MVC中的数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！