ASP.NET MVC層疊DropDownLists的Javascript問題

審查很多教程和各種方法來層疊DropDownLists後，我決定創建一個視圖模型爲我的視圖，然後在此基礎上後填充我DropDownLists： MVC3 AJAX Cascading DropDownLists ASP.NET MVC層疊DropDownLists的Javascript問題

的目標在這裏是許多教程中最基本和最基礎的內容，但我仍然無法完全理解......根據州下拉列表的值填充城市下拉菜單。

編輯：

由於發帖求助申請，我發現螢火蟲（是的，這就是我在做任何類型的節目如何利用新的），我是能夠確定的是，我成功地打電話給我控制器，並拉動必要的數據。我相信問題在於我的JavaScript的後半部分將數據返回到我的視圖。

這是我的觀點：

<label>STATE HERE:</label> 
    @Html.DropDownListFor(x => x.States, Model.States, new { @class = "chzn-select", id = "stateID" }) 
    <br /><br /> 
    <label>CITY HERE:</label> 
    @Html.DropDownListFor(x => x.Cities, Enumerable.Empty<SelectListItem>(), new { id = "cityID" })

這裏是我的視圖中的JavaScript和不知何故我沒有正確處理我的結果，一旦我讓他們：

$(function() { 
    $("#stateID").change(function() { 
     var stateId = $(this).val(); 
     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("GetCities")', 
      type: 'GET', 
      data: { Id: stateId }, 
      cache: 'false', 

      success: function (result) { 
       var citySelect = $('#cityID'); 
       $(citySelect).empty(); 

       // when the AJAX succeeds refresh the ddl container with 

       $.each(result, function (result) { 
        $(citySelect) 
        .append($('<option/>', { value: this.simpleCityID }) 
        .text(this.cityFull)); 

       }); 
      }, 
      error: function (result) { 
       alert('An Error has occurred'); 
      } 
     }); 
    }); 
});

這裏是我的控制器調用JavaScript：

public JsonResult GetCities(int Id) 
    { 
     return Json(GetCitySelectList(Id), JsonRequestBehavior.AllowGet); 
    } 

    private SelectList GetCitySelectList(int Id) 
    { 
     var cities = simpleDB.simpleCity.Where(x => x.simpleStateId == Id).ToList(); 

     SelectList result = new SelectList(cities, "simpleCityId", "cityFull"); 
     return result; 
    }

下面是Firbug，我的結果，告訴我，我建設，恢復正常的數據沒有問題，只是不正確填充的DropDownList我：

[{"Selected":false,"Text":"Carmel","Value":"IN001"},{"Selected":false,"Text":"Fishers","Value":"IN002"}]

如果任何人有任何建議，爲什麼JavaScript的未填充dropdrown，請評論，謝謝！

來源

2012-07-19 Roban Kearby

我用你的代碼注意到的第一個問題是數據：'{STATEID：STATEID}'你的Ajax調用其中動作參數'GetCities'是'Id'。使參數'stateId'再試一次。 – Mohayemin 2012-07-19 04:00:41

我已經這樣做了幾次這樣的事情：

創建一個偏popolate下拉列表。將它命名爲DropDownList，放入觀Shared文件夾

@model SelectList  
@Html.DropDownList("wahtever", Model)

你創建視圖應該是這樣的（跳過無關部分）

<script type="text/javascript"> 
    $(function() { 
     $("#StateId").change(function() { 
      loadLevelTwo(this); 
     }); 

     loadLevelTwo($("#StateId")); 
    }); 

    function loadLevelTwo(selectList) { 
     var selectedId = $(selectList).val(); 

     $.ajax({ 
      url: "@Url.Action("GetCities")", 
      type: "GET", 
      data: {stateId: selectedId}, 
      success: function (data) { 
       $("#CityId").html($(data).html()); 
      }, 
      error: function (result) { 
       alert("error occured"); 
      } 
     }); 
    } 
</script> 

@Html.DropDownList("StateId") 

<select id="CityId" name="CityId"></select>

仔細記下了CityId空Select項目和loadLevelTwo通話at document.ready

而你的控制器應該是這樣的：

public ActionResult Create() 
{ 
    ViewBag.StateId = new SelectList(GetAllCities(), "Id", "Name"); 
    return View(); 
} 

public ActionResult GetCities(int stateId) { 
    SelectList model = new SelectList(GetCitiesOfState(stateId), "Id", "Name"); 
    return PartialView("DropDownList", model); 
}

來源

2012-07-19 03:58:17 Mohayemin

謝謝您的幫助，

原來，在我下面的JavaScript中，我試圖直接引用simpleCityID和cityFull與我的數據模型相關的字段：

$.each(result, function (result) { 
       $(citySelect) 
       .append($('<option/>', { value: this.simpleCityID }) 
       .text(this.cityFull));

取而代之的是，我需要保持它的通用性和內嵌JavaScript參考標準值和文本：

$.each(modelData, function (index, itemData) { 
       select.append($('<option/>', { 
        value: itemData.Value, 
        text: itemData.Text

來源

2012-07-19 20:11:59

ASP.NET MVC層疊DropDownLists的Javascript問題

回答

相關問題