剃刀视图中循环的下拉列表

Question

我正在尝试在剃刀视图的 for 循环中使用下拉列表。下拉列表在初始页面加载时正确显示，但是模型绑定在帖子上不起作用。下拉列表中选择的项目在帖子中不可用。 tableColumns 属性为空。任何帮助将非常感激。

型号

  public class DataMappingViewModel
        {          

public string TableName { get; set; }
        public List<XmlElement> XmlElements { get; set; }

    }
    public class XmlElement
    {
        public string ElementName { get; set; }
        public List<SP_GET_DBASE_COLUMNS_Result> tableColumns { get; set; }
    }

      public partial class SP_GET_DBASE_COLUMNS_Result
    {
        public string TABLE_CATALOG { get; set; }
        public string TABLE_SCHEMA { get; set; }
        public string TABLE_NAME { get; set; }
        public string COLUMN_NAME { get; set; }
        public Nullable<int> ORDINAL_POSITION { get; set; }
        public string COLUMN_DEFAULT { get; set; }
        public string IS_NULLABLE { get; set; }
        public string DATA_TYPE { get; set; }
        public Nullable<int> CHARACTER_MAXIMUM_LENGTH { get; set; }
        public Nullable<int> CHARACTER_OCTET_LENGTH { get; set; }
        public Nullable<byte> NUMERIC_PRECISION { get; set; }
        public Nullable<short> NUMERIC_PRECISION_RADIX { get; set; }
        public Nullable<int> NUMERIC_SCALE { get; set; }
        public Nullable<short> DATETIME_PRECISION { get; set; }
        public string CHARACTER_SET_CATALOG { get; set; }
        public string CHARACTER_SET_SCHEMA { get; set; }
        public string CHARACTER_SET_NAME { get; set; }
        public string COLLATION_CATALOG { get; set; }
        public string COLLATION_SCHEMA { get; set; }
        public string COLLATION_NAME { get; set; }
        public string DOMAIN_CATALOG { get; set; }
        public string DOMAIN_SCHEMA { get; set; }
        public string DOMAIN_NAME { get; set; }
    }

控制器

public ActionResult Index()
        {

            List<XmlElement> elements = new List<XmlElement>();

            XmlElement element1 = new XmlElement();
            element1.ElementName = "element1";
            element1.tableColumns = data.GetTableColumns("TABLENAME");

           elements.Add(element1);

            DataMappingViewModel viewitem = new DataMappingViewModel();

            viewitem.XmlElements = elements;
            viewitem.TableName = "TABLENAME";


            return View(viewitem);
        }


        [HttpPost]
        public ActionResult MapData(DataMappingViewModel  model)
        {
            return View("Index",model);
        }

查看

@model ExcelImportAPI.Models.DataMappingViewModel
@using System.Web.Mvc;
@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


@using (Html.BeginForm("MapData", "DataMapping", FormMethod.Post))
{

    <h2>Data Mapping</h2>

for (var i = 0; i < Model.XmlElements.Count; i++)
 {

     @Html.HiddenFor(m => Model.XmlElements[i].ElementName)
     @Model.XmlElements[i].ElementName

        <td>
            @Html.DropDownList("tableColumns", new SelectList(@Model.XmlElements[i].tableColumns, "COLUMN_NAME", "COLUMN_NAME"), "--Select a Value--")


        </td>
    }

    <div class="modal-footer">
        <input type="submit" name="btnSaveAndExit" value="Save and Exit" class="btn btn-default">
        <input type="submit" name="btnSaveAndContinue" value="Save and Continue" class="btn btn-primary modal-btn">
    </div>

}

Answer 1

tableColumns 是一个复杂对象，您不能将 <select> 元素绑定到复杂对象（它只会回发一个简单值 - 所选选项的值，在您的情况下是 COLUMN_NAME 的值属性）。

您的视图模型需要一个属性来绑定，理想情况下是一个简化的集合属性来绑定

public class DataMappingViewModel
{          
    public string TableName { get; set; }
    public List<XmlElementViewModel> XmlElements { get; set; }
    public IEnumerable<string> ColumnList { get; set; } // for generating the SelectLists
}
public class XmlElementViewModel
{
    public string ElementName { get; set; }
    public string SelectedColumn { get; set; } // to bind the selected value to
}

然后你的 GET 方法将是

public ActionResult Index()
{
    DataMappingViewModel model= new DataMappingViewModel()
    {
        TableName = "TABLENAME",
        ColumnList = data.GetTableColumns("TABLENAME").Select(x => x.COLUMN_NAME),
        XmlElements = new List<XmlElement>()
        {
            new XmlElement()
            {
                ElementName = "element1",
                SelectedColumn = "...." // if you want to preselect an option
            }
        }
    }
    return View(model);
}

然后在视图中

model ExcelImportAPI.Models.DataMappingViewModel
....
@using (Html.BeginForm("MapData", "DataMapping", FormMethod.Post))
{
    ....
    for (var i = 0; i < Model.XmlElements.Count; i++)
    {
        @Html.HiddenFor(m => Model.XmlElements[i].ElementName)
        @Model.XmlElements[i].ElementName
        <div>
            @Html.DropDownListFor(m => m.XmlElements[i].SelectedColumn, new SelectList(Model.ColumnList), "--Select a Value--")
        </div>
    }
    ....
}

旁注：

• 您的视图显示<td> 元素，但没有封闭<tr> 和<table> 元素，但无论如何您似乎不需要这里的表格。
• 视图中不需要@using System.Web.Mvc;
• 通常您的SelectList 应该在控制器中生成，但是 由于您在循环中使用创建下拉列表，因此您需要 在每次迭代中生成一个新的SelectList，或者使用 EditorTemplate 并使用 additionalViewData 传递 SelectList 如this answer 中所述
• DropDownListFor() 的第三个参数正在生成一个null 选项。我假设您希望用户选择一个值，所以您 应将[Required] 属性添加到SelectedColumn 并包括 @Html.ValidationMessageFor(m => m.XmlElements[i].SelectedColumn) 在 视图。

Answer 2

你应该在隐藏元素的集合中渲染tableColumns，下拉值应该绑定到SelectedColumn的属性DataMappingViewModel：

        @Html.DropDownList("SelectedColumn", new SelectList(Model.XmlElements[i].tableColumns, "COLUMN_NAME", "COLUMN_NAME"), "--Select a Value--")
        @for(var j = 0; j < Model.XmlElements[i].tableColumns.Count; j ++)
        {
            @Html.Hidden(string.Format("XmlElements[{0}].tableColumns[{1}].COLUMN_NAME", i, j), Model.XmlElements[i].tableColumns[j].COLUMN_NAME)
        }