首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Html.DropDownListFor混淆

Html.DropDownListFor混淆
EN

Stack Overflow用户
提问于 2014-10-24 21:42:19
回答 2查看 544关注 0票数 0

有人能帮我理解一下Html.DropDownListFor的工作原理吗?我有一个模型如下

代码语言:javascript
复制
public class TestModel
{
    public IList<SelectListItem> ProductNames { get; set; }
    public string Product { get; set; }
}

对DropDownListFor的调用,它看起来像

代码语言:javascript
复制
@Html.DropDownListFor(model => model.ProductNames,  Model.ProductNames, "Select a Product", new {@class="selectproductname" })

通过这种设置,我发现下拉列表得到了正确的填充,但是在提交表单后,我似乎无法得到所选的项。同样,根据我所读到的,对Html.DropDownListFor的调用应该看起来像

代码语言:javascript
复制
@Html.DropDownListFor(model => model.Product,  Model.ProductNames, "Select a Product", new {@class="selectproductname" })

实际上,代码的其他部分也是这样,但是当我这样做时,下拉列表没有被填充。我是不是漏掉了什么?

需要注意的一点是: 1)这个下拉列表的总体情况是在从另一个下拉列表中选择一个值之后进行的,因此我通过调用getJSON从数据库获取数据进行AJAX调用,2)应用程序是MVC应用程序。

会感谢你提供的任何帮助。如果你需要任何其他信息来帮助回答这个问题,请告诉我。

编辑:这里有更多的细节

这是用于检索下拉列表的数据的控制器中的操作方法。

代码语言:javascript
复制
[AcceptVerbs(HttpVerbs.Get)]
    public JsonResult LoadProductsBySupplier(string parentId)
    {
        var ctgy = this._categoryService.GetAllCategoriesByParentCategoryId(Convert.ToInt32(parentId));
        List<int> ctgyIds = new List<int>();

        foreach (Category c in ctgy)
        {
            ctgyIds.Add(c.Id);
        }

        var prods = this._productService.SearchProducts(categoryIds: ctgyIds, storeId: _storeContext.CurrentStore.Id, orderBy: ProductSortingEnum.NameAsc);

        products = prods.Select(m => new SelectListItem()
        {
            Value = m.Id.ToString(),
            Text = m.Name.Substring(m.Name.IndexOf(' ') + 1)
        });

        var p = products.ToList();
        p.Insert(0, new SelectListItem() { Value = "0", Text = "Select A Product" });
        products = p.AsEnumerable();
        //model.ProductNames = products.ToList();


        return Json(products, JsonRequestBehavior.AllowGet);
    }

这是对控制器中动作的JQuery调用

代码语言:javascript
复制
$("#Supplier").change(function () {
        var pID = $(this).val();            
        $.getJSON("CoaLookup/LoadProductsBySupplier", { parentId: pID },
                function (data) {
                    var select = $("#ProductNames");
                    select.empty();
                    if (pID != "0") {
                        $.each(data, function (index, itemData) {
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
                    }
                });
    });

即使在变量数据中返回数据,当我使用模型$.each => model.Product时,也不会进入这个model.Product循环

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-24 22:41:06

第二种用法是正确的,但是当您使用

代码语言:javascript
复制
@Html.DropDownListFor(model => model.Product, .....

生成带有属性<select>id="Product",因此需要更改脚本以引用具有此ID的元素

代码语言:javascript
复制
....
$.getJSON("CoaLookup/LoadProductsBySupplier", { parentId: pID }, function (data) {
  var select = $("#Product"); // change this selector
  select.empty();
  ....

编辑

另一方面,您不一定需要在控制器方法中创建SelectList,您的代码可以简化为

代码语言:javascript
复制
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadProductsBySupplier(int parentId)
{
  List<int> ctgyIds = _categoryService.GetAllCategoriesByParentCategoryId(parentId).Select(c => c.ID).ToList();
  var products= _productService.SearchProducts(categoryIds: ctgyIds, storeId: _storeContext.CurrentStore.Id, orderBy: ProductSortingEnum.NameAsc).AsEnumerable().Select(p => new
  {
    ID = p.ID,
    Text = p.Name.Substring(m.Name.IndexOf(' ') + 1)
  });
  return Json(products, JsonRequestBehavior.AllowGet);
}

还有剧本

代码语言:javascript
复制
$("#Supplier").change(function () {
  var pID = $(this).val();
  var select = $("#Product").empty().append($('<option/>').text('Select A Product'));
  if (pID == '0') { return; } // this should really be testing for null or undefined but thats an issue with your first select          
  $.getJSON('@Url.Action("LoadProductsBySupplier", "CoaLookup")', { parentId: $(this).val() }, function (data) {
    $.each(data, function (index, item) {
      select.append($('<option/>').val(item.ID).text(item.Text);
    });
  });
});

还请注意,在脚本中,if子句位于$.getJSON之前--调用服务器然后决定忽略返回值是没有多大意义的。

票数 1
EN

Stack Overflow用户

发布于 2014-10-24 22:03:31

若要在“编辑”页面中获取选定的值,请尝试使用:

代码语言:javascript
复制
@Html.DropDownList("name", new SelectList(ViewBag.Product, "Id","Name", item.Id))

在这个示例中,item.Id是选定的值,ViewBag.Product必须使用linq (例如在Controller中)从产品中填充它。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26556718

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档