根據以前的列表填充下拉列表（mvc3）

我有2個下拉列表，我希望選擇第一個，觸發第二個ddl並顯示數據庫中的特定數據。例如第一個ddl1包含（州），ddl2將動態顯示其城市。根據以前的列表填充下拉列表（mvc3）

控制器加載狀態：

ViewBag.ddlStates= new SelectList(db.State, "StateCode", "Title"); 
    return View();

查看：

@Html.DropDownList("ddlStates") 
    @Html.DropDownList("ddlCities", String.Empty)

我怎麼會觸發所以當DDL狀態值被改變，調用數據庫和動態獲取它的城市..使用AJAX，只是重新加載ddl/partialView？

是否有可能在控制器的ddlState選擇調用動作（PartialViewResult）動態生成城市列表並將其發送回視圖？

Thx！

來源

2012-02-08 Ben

您可以使用第一個下拉的變化（）事件使用jQuery：

$('#ddlStates').on('change', function() { 

    $.ajax({ 
     type: "POST", 
     url: 'Controller/GetCities', 
     data: $(this).val(), 
     success: function(response) { 
      $('#ddlCities').html(response); 
     } 
    }); 

});

「控制器/ GetCities」將是返回與您的局部視圖市<option>的新名單的行動路線s基於選定的已發佈val。

張貼到會是這個樣子的動作：

  [HttpPost] 
    public ActionResult GetCities(GetCitiesViewModel model) 
    { 
     var selectedState = model.ddlStates; 
     IEnumerable<CityViewModel> cities = GetCitiesInState(selectedState); 
     IEnumerable<SelectListItem> filteredItems = 
      cities.Select(c => new SelectListItem {Text = c.Name, Value = c.CityId.ToString()}); 

     return PartialView("CityList", filteredItems); 
    } 

    private IEnumerable<CityViewModel> GetCitiesInState(int stateId) 
    { 
     // Just returning a list regardless of state ID. But you would look the cities up by state here. 
     return new List<CityViewModel> 
      { 
       new CityViewModel {CityId = 1, Name = "London"}, 
       new CityViewModel {CityId = 2, Name = "Birmingham"}, 
      }; 
    } 

    public class CityViewModel 
    { 
     public int CityId { get; set; } 

     public string Name { get; set; } 
    } 

    public class GetCitiesViewModel 
    { 
     public int ddlStates { get; set; } 
    }

以期是這樣的：

@model System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem> 
@{ Layout = null; } 

@foreach (var city in Model) 
{ 
    <option value="@city.Value">@city.Text</option> 
}

來源

2013-05-16 12:36:02 Banford

我有我的網站的一個類似的東西。我使用控制器操作，將城市作爲Json返回。當沒有爲狀態選擇的值時，我使用的jQuery清除並禁用城市下拉菜單。

這裏是我的標記

@Html.LabelFor(model => model.StateCode) 
@Html.DropDownList("StateCode", string.Empty) 
@Html.LabelFor(model => model.CityID) 
@Html.DropDownList("CityID", string.Empty)

這裏是JQuery的

$("select#StateCode").bind('change', function() { 
    var StateCode = $("select#StateCode option:selected").val(); 
    if (StateCode == "" || StateCode == 0) 
    { 
     $("select#CityID").empty(); 
     $("select#CityID").attr('disabled', 'disabled'); 
    } 
    else 
    { 
     $.getJSON('@Url.Action("GetCityiesForState")', { StateCode: StateCode }, function (data) { 
      $("select#CityID").empty(); 
      $.each(data, function (i, c) { 
       $('select#CityID').append('<option value="' + c.Value + '">' + c.Text + '</option>'); 
      }); 
      $("select#CityID").removeAttr('disabled'); 
      $("select#CityID option:first").attr('selected', 'selected'); 
     }); 
    } 
});

控制器動作

public JsonResult GetCityiesForState(string stateCode) { 
    var cities = repository.getCities(stateCode); 
    return Json(cities, JsonRequestBehavior.AllowGet); 
}

來源

2013-05-16 12:58:17

根據以前的列表填充下拉列表（mvc3）

回答

相關問題