在 For 循环中使用 DropDownListFor 时如何匹配值？ .NET MVC 剃须刀

Question

现在我从一个dbTable的列中得到一个JsonString，然后我需要将它们映射到我写的类中。问题是，当我使用 for 循环映射 razor 页面中的所有值时，当我使用 @textBoxFor 时完全没问题，但是 @DropDownListFor 不行。

这是我的剃须刀页面代码。

@model unitManager.Models.VM_PC_Unit_Mstr

@using unitManager.Models
@{
    Layout = "~/Views/Shared/_PageLayout.cshtml";
    ViewBag.Title = "Edit";
    var controller = ViewContext.RouteData.Values["controller"].ToString();
    var action = ViewContext.RouteData.Values["action"].ToString();
    bool isCreate = action.EndsWith("Create", StringComparison.OrdinalIgnoreCase);
    ViewBag.title = isCreate ? "Create" : "Edit";
}

<style>
    .menu_item {
        background-color:darkgray;
    }

    .sub_item{
        background-color:azure;
    }
</style>

<!-- Basic Inputs Validation start -->
<div class="card">
    <div class="card-block">
        <form id="main" method="post" @*action="/" novalidate=""*@>

            @* Course Name *@
            <div class="form-group row">
                <label class="col-sm-1 col-form-label">Course Name</label>
                <div class="col-sm-3">
                    @if (!isCreate)
                    {
                        @Html.TextBoxFor(n => n.unit_id, new { @class = "form-control", @readonly = "true" })
                    }
                    else
                    {
                        @Html.TextBoxFor(n => n.unit_id, new { @class = "form-control required", @required = "required" })
                    }
                    <span class="messages"></span>
                </div>
                <div>
                    @Html.ValidationMessageFor(n => n.unit_id, null, new { @class = "text-danger text-center" })
                </div>
            </div>
            @{
                if (Model.menu_obj.menus != null)
                {
                    for (var i = 0; i < Model.menu_obj.menus.Count; i++)
                    {
                        var item = Model.menu_obj.menus[i];
                        string menu_id = "menu-" + i;
                            <div id="@menu_id" class="menu_item">
                            @* type *@
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label">Type</label>
                                <div class="col-md-9">
                                    <input id="@(menu_id + "-type")" type="text" value="@item.type">
                                </div>
                            </div>
                            @* No *@
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label">No</label>
                                <div class="col-md-9">
                                    <input id="@(menu_id + "-No")" type="text" value="@item.No">
                                </div>
                            </div>
                            @* tittle *@
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label">Title</label>
                                <div class="col-md-9">
                                    <input id="@(menu_id + "-title")" type="text" value="@item.title">
                                </div>
                            </div>
                            @* url *@
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label">Url</label>
                                <div class="col-md-9">
                                    <input id="@(menu_id + "-url")" type="text" value="@item.url">
                                </div>
                            </div>
                            @* subItem *@
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label">SubItem</label>
                                <div class="col-md-9">
                                    @if (item.content != null)
                                        {
                                            for (var j = 0; j < item.content.Count; j++)
                                            {
                                                var subItem = item.content[j];
                                                string sub_id = "m-" + i + "-sub-" + j;
                                                <div class="sub_item">
                                                @* type *@
                                                <div class="form-group row">
                                                    <label class="col-sm-3 col-form-label">Type</label>
                                                    <div class="col-sm-9">
                                                        @Html.TextBoxFor(p => p.menu_obj.menus[i].content[j].type)
                                                        @Html.DropDownListFor(p => p.menu_obj.menus[i].content[j].type, ModelSelectList.subType())
                                                    </div>
                                                </div>
                                                @* SubNo *@
                                                <div class="form-group row">
                                                    <label class="col-sm-3 col-form-label">Intro</label>
                                                    <div class="col-sm-9">
                                                        <input id="@(sub_id + "-SubNo")" type="text" value="@subItem.SubNo">
                                                    </div>
                                                </div>
                                                @* intro *@
                                                <div class="form-group row">
                                                    <label class="col-sm-3 col-form-label">Intro</label>
                                                    <div class="col-sm-9">
                                                        <input id="@(sub_id + "-intro")" type="text" value="@subItem.intro">
                                                    </div>
                                                </div>
                                                @* title *@
                                                <div class="form-group row">
                                                    <label class="col-sm-3 col-form-label">Title</label>
                                                    <div class="col-sm-9">
                                                        <input id="@(sub_id + "-title")" type="text" value="@subItem.title">
                                                    </div>
                                                </div>
                                                @* shortcut *@
                                                <div class="form-group row">
                                                    <label class="col-sm-3 col-form-label">Shortcut</label>
                                                    <div class="col-sm-9">
                                                        <input id="@(sub_id + "-shortcut")" type="text" value="@subItem.shortcut">
                                                    </div>
                                                </div>
                                                @* url *@
                                                <div class="form-group row">
                                                    <label class="col-sm-3 col-form-label">Url</label>
                                                    <div class="col-sm-9">
                                                        <input id="@(sub_id + "-url")" type="text" value="@subItem.url">
                                                    </div>
                                                </div>
                                                @* record_timing *@
                                                <div class="form-group row">
                                                    <label class="col-sm-3 col-form-label">Record_timing</label>
                                                    <div class="col-sm-9">
                                                        <input id="@(sub_id + "-recordtime")" type="text" value="@subItem.record_timing">
                                                    </div>
                                                </div>
                                            </div>
                                        }
                                    }
                                </div>
                            </div>
                        </div>
                    }
                }
            }

            
            <div class="form-group row">
                <div class="col-sm-4" style="display:flex;justify-content:flex-end">
                    <a type="button" class="btn btn-primary" style="color:white;margin:10px;" href="@Url.Action("Index","UnitMgr")">Cancel</a>
                    <button type="submit" class="btn btn-primary" style="color:white;margin:10px;">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    $("div[id ^='menu-']").each(function () {
        console.log($(this));
        let menu_idx = $(this).attr("id").replace("menu-", "");
        console.log(menu_idx);
        $("input[id ^= 'm-" + menu_idx + "-sub-']").each(function () {
            console.log("sub", $(this), $(this).val());
        });
    });

    $(function () {
        $(".select2").select2();
    });//document ready
    
    
</script>

这是我的控制器动作看起来像

        [HttpGet]
        public ActionResult Menu(string unit_id)
        {
            VM_PC_Unit_Mstr model= PC_Unit_Mstr.getMenuByunitID(unit_id);
            model.menu_obj = JsonConvert.DeserializeObject<Menu>(model.menus_json);
            return View(model);
        }

和我使用的 ViewModel

    public class VM_PC_Unit_Mstr
    {
        public string unit_id { get; set; }
        public string menus_json { get; set; }

        public VM_Menu.Menu menu_obj { get; set; }
    }

我遇到的问题就在这里，用TextBoxFor可以映射成功，但是dropDownListFor不能映射。

@Html.TextBoxFor(p => p.menu_obj.menus[i].content[j].type)
@Html.DropDownListFor(p => p.menu_obj.menus[i].content[j].type, ModelSelectList.subType())

这是我在网页中得到的结果：这是我为获取 DropDownList 而编写的简单函数：

        public static SelectList subType()
        {
            List<SelectListItem> itemList = new List<SelectListItem>();
            SelectListItem itemSpeaking = new SelectListItem
            {
                Value = "speaking",
                Text = "speaking",
            };
            SelectListItem itemWords = new SelectListItem
            {
                Value = "words",
                Text = "words",
            };
            SelectListItem itemGame = new SelectListItem
            {
                Value = "game",
                Text = "game",
            };
            itemList.Add(itemSpeaking);
            itemList.Add(itemWords);
            itemList.Add(itemGame);

            return new SelectList(itemList, "Value", "Text");
        }

这就是 VM_Menue 的意思：

public class VM_Menu
    {
        #region MenuList (MenuListInfo)
        public class MenuList
        {
            public string WelcomeImage { get; set; }
            public string Menus { get; set; }
        }
        public class Menu
        {
            public string welcomeImg { get; set; }
            public List<MenuData> menus { get; set; }
        }
        public class MenuData
        {
            public string type { get; set; } //video or game or conclusion
            public string No { get; set; } 
            public string title { get; set; }
            public string url { get; set; }
            public List<SubItemData> content { get; set; }
        }
        public class SubItemData
        {
            public string type { get; set; } //speaking or words or game
            public string SubNo { get; set; } 
            public string intro { get; set; } 
            public string title { get; set; }  
            public string shortcut { get; set; }
            public string url { get; set; }
            public float? record_timing { get; set; }
        }
        #endregion
    }

一开始，我的目的是做一个两层的input/dropDownList树，允许用户动态编辑，用户想要多少个父节点，当前父节点下，用户要编辑、创建或删除多少个子节点。

所以，在我想做这个功能之前，我首先遇到了这个下拉列表映射问题使用@html 函数。

希望我提供的意图和信息足够清楚。谢谢大家审阅我的代码，我知道这是一团糟。

Answer 1

恐怕你不能用 @Html.DropDownListFor 设置选择的选项。你可以尝试 foreach ModelSelectList.subType() 并在选项中添加 selected 如果值与 [= 相同14=]:

<select name="menu_obj.menus[@i].content[@j].type">
    @foreach (var item in ModelSelectList.subType())
    {
        if (item.Text == Model.menu_obj.menus[i].content[j].type)
        {
            <option value=@item.Value selected>@item.Text</option>
        }
        else
        {
            <option value=@item.Value>@item.Text</option>
        }

    }

</select>

Answer 2

ModelSelectList.subType()

@foreach（ModelSelectList.subType() 中的变量项）{ //

在 For 循环中使用 DropDownListFor 时如何匹配值？ .NET MVC 剃须刀

How to match the value when I use DropDownListFor in a For Loop? .NET MVC RAZOR

.net

c#

razor

asp.net-core