如何使用 MVC 将动态生成的下拉列表值插入 DB

Question

在 MVC 中需要帮助：请帮助根据下拉列表中选定值（整数）的计数创建下拉列表（子） - 将其视为父控件。并使用 MVC 将子下拉列表选择值插入数据库。如果在父下拉列表中选择了 3，则需要创建 3 个新的下拉列表，并且需要将 3 个下拉列表的选定值插入 DB--通过使用 MVC 下拉列表。当我尝试时，只有第一个子下拉列表选择的值被插入或三次..请帮助解决它

Answer 1

首先创建父下拉列表。从 Home Controller 开始，我创建了一个列表

public ActionResult Index()
    {
        List<int> key =new List<int>();
        key.Add(1); key.Add(2); key.Add(3); key.Add(4); key.Add(5);
        ViewBag.RequiredKey = new SelectList(key);
        return View();
    }

在索引视图中，我显示父下拉列表

 @using (Html.BeginForm("SelectedDropDownResult", "Home",FormMethod.Post))
    {
        @Html.DropDownList("SelectedDropDownValue", (SelectList)ViewBag.RequiredKey, new { @class = "form-control" })
        <input type="submit" value="Submit">
    }

在此下拉列表中，用户选择一个值，该值将发布到 Home 控制器中名为 SelectedDropDownResult 的操作

 public ActionResult SelectedDropDownResult(FormCollection fc)
        {
            int dropDown = int.Parse(fc["SelectedDropDownValue"]);
            ViewBag.dropDownValue = dropDown;

            List<int> key = new List<int>();
            key.Add(1); key.Add(2); key.Add(3); key.Add(4); key.Add(5);
            ViewBag.RequiredKey = new SelectList(key);

            return View();
        }

使用FormCollection 可以在父下拉列表中提取用户选择的值

 @{
        ViewBag.Title = "SelectedDropDownResult";
    }

    <h3> Generating @ViewBag.dropDownValue based on parent drop down selected value</h3>

    @using (Html.BeginForm("ChildDropDown", "Home", FormMethod.Post))
    {
        <input type="hidden" name="childDropDownValue" value=@ViewBag.dropDownValue>

        for (int i=0; i< @ViewBag.dropDownValue;i++ )
        { 
        @Html.DropDownList("SelectedDropDownValue"+i, (SelectList)ViewBag.RequiredKey, new { @class = "form-control" })
        }
        <input type="submit" value="Submit">
      }

这里根据父列表的计数创建子下拉列表，并调用动作ChildDropDown将数据保存到数据库

 public ActionResult ChildDropDown(FormCollection fc)
        {
            List<int> child=new List<int>();
            int dropDown = int.Parse(fc["childDropDownValue"]);
            for(int i=0;i<dropDown;i++)
            { 
              child.Add(int.Parse(fc["SelectedDropDownValue"+i]));
            }

            // code to add data child list to the database

            return View();

        }

    }

您现在可以在 Home 控制器的 ChildDropDown 操作中添加代码以将数据保存到数据库中

Answer 2

如何保存子下拉列表值的示例。

ViewModels-

public class TestModelViewModel
{
    public int ParentId { get; set; }

    public IEnumerable<ParentListViewModel> ParentList { get; set; }

    public int ChildId { get; set; }

    public IEnumerable<ParentListViewModel> ChildList { get; set; }

    public IEnumerable<int> ChildIds { get; set; }
}

public class ParentListViewModel
{
    public int Id { get; set; }

    public string Value { get; set; }
}
public class ChildListViewModel
{
    public int ChildId { get; set; }

    public string ChildValue { get; set; }
}

控制器-

    public ActionResult Index()
    {
        var model = new TestModelViewModel
        {
            ParentList = new List<ParentListViewModel>
            {
                new ParentListViewModel{
                    Id = 1,
                    Value = "One"
                },new ParentListViewModel{
                    Id = 2,
                    Value = "Two"
                },new ParentListViewModel{
                    Id = 3,
                    Value = "Three"
                },
            }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(TestModelViewModel model)
    {
        var ChildIds = model.ChildIds;
        /* now you can save these ChildIds to your db */

        return View(model);
    }

查看-

@model WebApplication1.Models.TestModel
@{
    ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { area=""}))
{

    <div class="row">
        <div class="col-md-12">
            <h2>Parent List</h2>
            <p>
                <select id="ParentList" name="ParentId">
                    <option value="">--- select parent list ---</option>
                    @foreach (var item in Model.ParentList)
                    {
                        <option value="@item.Id">@item.Value</option>
                    }
                </select>
            </p>
        </div>
        <div class="col-md-12">
            <h2>Child List</h2>
            <p id="childListCotnainer">

            </p>
        </div>
        <div class="col-lg-12"><input class="btn btn-default" type="submit" value="submit" /> </div>
    </div>
}
@section scripts{
    <script>
        $(function () {
            $("#ParentList").change(function () {
                var length = parseInt($(this).val());
                var dropHtml = '';
                for (i = 0; i < length; i++) {
                    dropHtml += '<select name="ChildIds"><option value="1">Child One</option><option value="2">Child Two</option><option value="3">Child Three</option></select><br /><br />';
                }

                $("#childListCotnainer").html(dropHtml);
            });
        });
    </script>
}