2014-10-24 2 views
0

누군가가 Html.DropDownListFor가 어떻게 작동하는지 이해할 수있게 도와 줄 수 있습니까? 나는Html.DropDownList 혼동

public class TestModel 
{ 
    public IList<SelectListItem> ProductNames { get; set; } 
    public string Product { get; set; } 
} 

이와

@Html.DropDownListFor(model => model.ProductNames, Model.ProductNames, "Select a Product", new {@class="selectproductname" }) 

내가 드롭 다운 목록의 형식은 I를 제출 한 후 올바르게 그러나 인구됩니다 찾을 설정과 같은 DropDownListFor에 대한 호출을 다음과 모델을 가지고 선택한 항목을 가져올 수 없습니다. 또한 내가 Html.DropDownListFor에 대한 호출을 읽은에서 실제로뿐만 아니라 사실

@Html.DropDownListFor(model => model.Product, Model.ProductNames, "Select a Product", new {@class="selectproductname" }) 

처럼 같은 코드 모양의 다른 부분을 보여야하지만 목록이 드롭을 할 때 채워되지 않습니다. 내가 여기서 뭔가를 놓치고 있니?

측면 노트의 몇 : 이 드롭의 인구가 아래로 다른 드롭에서 값의 선택 후에 발생) (1) 아래로 그래서 데이터베이스 2) 응용 프로그램이 데이터를 얻을해서 getJSON를 호출하여 AJAX 호출을 MVC 응용 프로그램

도움을 주시면 감사하겠습니다. 이 질문에 대답하기 위해 다른 정보가 필요하면 알려주세요

편집 : 여기에 좀 더 세부 사항은

이 드롭 다운

에 대한 데이터를 검색하는 데 사용되는 컨트롤러의 조치 방법
[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); 
    } 

그리고 이것은 컨트롤러

$("#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 루프의의 행동 JQuery와 전화입니다 t은 내가 모델을 사용하는 경우에 입력하세요 => model.Product 데이터 편집 페이지에서 선택한 값을 사용해보십시오 얻으려면 변수 데이터

+0

두 번째 용도가 정확합니다. 'Property'의 값은 선택된 옵션의 값이 될 것이지만 아약스 호출에서 옵션을 채우는 방법을 보여주지 않으므로 문제가 어디 있는지 알기가 어렵습니다. –

+0

어떻게 구현했는지 보여주기'IList ProductNames' 그것은 모두 SelectListItem의'Value' 부분에 달려 있습니다. @StephenMuecke가'Product' 값을'ProductNames'의'Value' 부분에 할당하면 두 번째 사용법이 정확하다고 말했듯이 ListItem –

+0

을 사용하면'model => model.Product'를 아약스 성공 콜백에서'var select = $ "#Product")'또는'var select = $ (". selectproductname")'selector는'# id' 또는'.classname' 일 수 있습니다. –

답변

1

두 번째 구문은

@Html.DropDownListFor(model => model.Product, ..... 

id="Product" 그래서이 ID

.... 
$.getJSON("CoaLookup/LoadProductsBySupplier", { parentId: pID }, function (data) { 
    var select = $("#Product"); // change this selector 
    select.empty(); 
    .... 
와 요소를 참조하는 스크립트를 변경해야하는 속성을 가진 <select>를 생성하는 사용하지만 때, 올바른

편집

그렇지 않은 경우 반드시 생성 할 필요는 없습니다. 컨트롤러 방법과 코드에서 SelectList$.getJSON 전에

[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); 
} 

하고 스크립트에서

$("#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 절을 단순화 할 수 - 다음 서버를 호출 많은 지점이되지 않습니다 반환 값을 무시하기로 결정

+0

스티븐에게 감사 드리며 코드 개선 방법에 대한 조언을 주시면 감사하겠습니다. 나는 항상 그러한 조언을 구하려고 노력한다. – jjvad

0

반환하더라도 :

@Html.DropDownList("name", new SelectList(ViewBag.Product, "Id","Name", item.Id)) 

이것을 item.Id에 선택한 값이고, ViewBag.Product는 예를 들어 컨트롤러에서 linq를 사용하여 제품에서 채워야합니다.