채워져 있어야하는 DropDownList를 찾을 수 없습니다.

Question

현재 페이지에 두 개의 드롭 다운 목록 상자가 있습니다. 사용자가 페이지를 입력하고 약 12 ​​개의 항목이로드되면 첫 번째 항목이 표시됩니다. 다른 드롭 다운 목록은 첫 번째 항목에서 선택이 이루어질 때까지 스타일을 사용하여 숨겨집니다. 선택이 이루어지면 첫 번째 ddl의 변경 이벤트가 내 컨트롤러에 대한 ajax 호출을 시작하여 두 번째 ddl을 채우는 데 필요한 데이터를 가져옵니다. 아약스 호출이 올바른 데이터를 얻고 있으므로 여기를 통해 모든 것이 잘 수행됩니다.

두 번째 ddl을 채울 때 문제가 발생합니다. Json에서 돌아 오면 jQuery는 내 두 번째 ddl을 찾을 수 없습니다. 내가 얻은 것은 반환 된 데이터를 dataBind하려고 시도 할 때 가리키는 "정의되지 않은"오류입니다.

다음은 코드입니다.

보기

<table width="100%"> 
    <tr> 
     <td class="adminTitle"> 
      @Html.NopLabelFor(model => model.SpecificationAttribute): 
     </td> 
     <td class="adminData"> 
      @Html.DropDownListFor(model => model.SpecificationAttribute, new SelectList(Model.SpecificationAttributes, "Id", "Name"), "Select a Specification Attribute") 
     </td> 
    </tr>   
    <tr> 
     <td class="adminTitle"> 
      <div class="SAOptions" style="display:none"> 
       @Html.NopLabelFor(model => model.SpecificationAttributeOption): 
      </div> 
     </td> 
     <td class="adminData"> 
      <div class="SAOptions" style="display:none"> 
       @Html.DropDownListFor(model => model.SpecificationAttributeOptions, Enumerable.Empty<SelectListItem>()) 
      </div> 
     </td> 
    </tr> 
</table> 
<script type="text/javascript"> 
    $("#SpecificationAttribute").change(function() { 
     var specificationAttributeId = $("#@Html.FieldIdFor(model => model.SpecificationAttribute)").val(); 
     //User selected one of the Specification Attributes 
     if (specificationAttributeId != "") { 
      //Show the Specification Attribute Options 
      $(".SAOptions").show(); 

      //Load the now showing dropdownlist 
      $.getJSON('@Url.Action("GetSpecificationAttributeOptions", "Reports")', { specificationAttributeId: specificationAttributeId }, function (data) { 
       //************************** 
       //This is not finding my ddl 
       //************************** 
       var ddl = $("#SpecificationAttributeOptions").data("tDropDownList"); 
       alert(ddl != null); 
       if (data.length > 0) { 
        //Bind data and reload 
        //******************** 
        //Breaks here 
        //******************** 
        ddl.dataBind(data); 
        ddl.reload(); 
       } 
      }); 
     } 
     //User selected "Select a Specification Option" for some reason, so hide everything 
     else { 
      $(".SAOptions").hide(); 
      $("#divOptions").hide(); 
     } 
}); 

컨트롤러

public ActionResult ProductBySpecificationAttribute() 
    { 
     if (!_permissionService.Authorize(StandardPermissionProvider.ManageReports)) 
      return AccessDeniedView(); 

     var model = new SpecificationAttributeReportListModel(); 
     var specificationAttributes = _specificationAttributeService.GetSpecificationAttributes(); 
     var specificationAttributesModel = PrepareSpecificationAttributeModel(specificationAttributes); 
     model.SpecificationAttributes = specificationAttributesModel; 

     //Return Model data 
     return View(model); 
    } 

    public JsonResult GetSpecificationAttributeOptions(int specificationAttributeId) 
    { 
     var specificationAttributeOptions = _specificationAttributeService.GetSpecificationAttributeOptionsBySpecificationAttribute(specificationAttributeId); 
     var specificationAttributeOptionsModel = PrepareSpecificationAttributeOptionsModel(specificationAttributeOptions); 
     var returnData = new SelectList(specificationAttributeOptionsModel, "Id", "Name"); 
     return Json(returnData, JsonRequestBehavior.AllowGet); 
    } 

나는 간단 뭔가 느낌이 있지만, 나는 아직 그것을 생각하지 않았습니다. 다른 ddl을 구현하면 작동하는지 알 수 있습니다. 그러나 나는 모든 것이 함께 흐르기를 원하므로이 ddl을 사용합니다 (선택이 아닌, 전체적으로 일관성을 위해서).

도움을 주시면 감사하겠습니다.

친절한 안부, 차드 존슨

Answer 1

http://api.jquery.com/data/ 그래서 난 내 자신의 솔루션을 함께했다. 나는 HTMLDropDownList를 2 차 ddl로 대체했다. 이로 인해 드롭 다운 목록을 다르게 구축 할 수있었습니다. 여기 내가 대신 한 일이 있습니다.

보기 답변

public ActionResult ProductBySpecificationAttribute() 
    { 
     if (!_permissionService.Authorize(StandardPermissionProvider.ManageReports)) 
      return AccessDeniedView(); 

     var model = new SpecificationAttributeReportListModel(); 
     var specificationAttributes = _specificationAttributeService.GetSpecificationAttributes(); 
     var specificationAttributesModel = PrepareSpecificationAttributeModel(specificationAttributes); 
     model.SpecificationAttributes = specificationAttributesModel; 

     //Return Model data 
     return View(model); 
    } 

/// <summary> 
    /// Used to load dropdownlist for SpecificationAttributeOptions 
    /// </summary> 
    /// <param name="specificationAttributeId">SpecificationAttribute Identifier</param> 
    /// <returns>Json data to build dropdownlist</returns> 
    public JsonResult GetSpecificationAttributeOptions(int specificationAttributeId) 
    { 
     //Get the SpecificationAttributeOptions for this SpecificationAttributeId 
     var specificationAttributeOptions = _specificationAttributeService.GetSpecificationAttributeOptionsBySpecificationAttribute(specificationAttributeId); 
     //Load data into SpecificationAttributeOptionModel 
     var specificationAttributeOptionsModel = PrepareSpecificationAttributeOptionsModel(specificationAttributeOptions); 
     //Pluck Id and Name from data 
     var returnData = (from sao in specificationAttributeOptionsModel select new { id = sao.Id, name = sao.Name }).ToList(); 
     //Return specific data 
     return Json(returnData, JsonRequestBehavior.AllowGet); 
    } 

덕분에 모든

<table width="100%"> 
    <tr> 
     <td class="adminTitle"> 
      @Html.NopLabelFor(model => model.SpecificationAttribute): 
     </td> 
     <td class="adminData"> 
      @Html.DropDownListFor(model => model.SpecificationAttribute, new SelectList(Model.SpecificationAttributes, "Id", "Name"), "Select a Specification Attribute") 
     </td> 
    </tr>   
    <tr> 
     <td class="adminTitle"> 
      <div class="SAOptions" style="display:none"> 
       @Html.NopLabelFor(model => model.SpecificationAttributeOption): 
      </div> 
     </td> 
     <td class="adminData"> 
      <div class="SAOptions" style="display:none"> 
       <select id="SpecificationAttributeOptions"></select> 
      </div> 
     </td> 
    </tr> 
</table> 
<script type="text/javascript"> 
//Change event for SpecificationAttribute 
    $("#SpecificationAttribute").change(function() { 
     var specificationAttributeId = $("#@Html.FieldIdFor(model => model.SpecificationAttribute)").val(); 
     //User selected one of the Specification Attributes 
     if (specificationAttributeId != "") { 
      //Show the Specification Attribute Options 
      $(".SAOptions").show(); 

      //Load the now showing dropdownlist 
      $.getJSON('@Url.Action("GetSpecificationAttributeOptions", "Reports")', { specificationAttributeId: specificationAttributeId }, function (data) { 
       var ddl = $("#SpecificationAttributeOptions"); 
       if (data.length > 0) { 
        //Clear data from dropdownlist 
        ddl.html(''); 

        //Bind dropdownlist 
        var elements = ""; 
        $.each(data, function (id, option) { 
         elements += '<option value="' + option.id + '">' + option.name + '</option>' 
        }); 
        ddl.append(elements); 
       } 
      }); 
     } 
     //User selected "Select a Specification Option" for some reason, so hide everything 
     else { 
      $(".SAOptions").hide(); 
     } 
    }); 
</script> 

컨트롤러 도움하려고합니다. 나는 그것을 평가했다. 바라기를 이것은 동일한 문제점을 우연히 만나는 다른 누군가를 돕는다.

Answer 2

var ddl = $("#SpecificationAttributeOptions").data("tDropDownList"); 

는 그 줄은 DropDownList로에 부착 된 tDropDownList 데이터를 얻을하려고합니다. ddl을 반환하지 않습니다. ddl에 데이터가 연결되어 있지 않기 때문에 undefined을 반환 할 것입니다.

더 많은 정보를 원하시면 여기를 참조하십시오 :