Question

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

Answer 1

示例如何保持孩子的下拉值。

的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>
}

Answer 2

首先创建父下拉列表。从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();

        }

    }

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

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

2 个答案: