MVC 3 Razor视图中的级联下拉

Question

我对如何实现Razor视图中地址的级联下拉列表感兴趣。我的网站实体具有SuburbId属性。郊区有CityId，城市有ProvinceId。我想在网站视图中显示所有郊区，城市和省的下拉菜单，例如，郊区下拉菜单将首先显示“首选城市”，城市下拉菜单“首选省份”。在选择一个省，省内的城市人口众多等。

我该如何做到这一点？我从哪说起呢？

Answer 1

我们来举个例子来说明。与往常一样开始一个模型：

public class MyViewModel 
{ 
    public string SelectedProvinceId { get; set; } 
    public string SelectedCityId { get; set; } 
    public string SelectedSuburbId { get; set; } 
    public IEnumerable<Province> Provinces { get; set; } 
} 

public class Province 
{ 
    public string Id { get; set; } 
    public string Name { get; set; } 
} 

下一个控制器：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel 
     { 
      // TODO: Fetch those from your repository 
      Provinces = Enumerable.Range(1, 10).Select(x => new Province 
      { 
       Id = (x + 1).ToString(), 
       Name = "Province " + x 
      }) 
     }; 
     return View(model); 
    } 

    public ActionResult Suburbs(int cityId) 
    { 
     // TODO: Fetch the suburbs from your repository based on the cityId 
     var suburbs = Enumerable.Range(1, 5).Select(x => new 
     { 
      Id = x, 
      Name = "suburb " + x 
     }); 
     return Json(suburbs, JsonRequestBehavior.AllowGet); 
    } 

    public ActionResult Cities(int provinceId) 
    { 
     // TODO: Fetch the cities from your repository based on the provinceId 
     var cities = Enumerable.Range(1, 5).Select(x => new 
     { 
      Id = x, 
      Name = "city " + x 
     }); 
     return Json(cities, JsonRequestBehavior.AllowGet); 
    } 
} 

最后一个观点：

@model SomeNs.Models.MyViewModel 

@{ 
    ViewBag.Title = "Home Page"; 
} 

<script type="text/javascript" src="/scripts/jquery-1.4.4.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#SelectedProvinceId').change(function() { 
      var selectedProvinceId = $(this).val(); 
      $.getJSON('@Url.Action("Cities")', { provinceId: selectedProvinceId }, function (cities) { 
       var citiesSelect = $('#SelectedCityId'); 
       citiesSelect.empty(); 
       $.each(cities, function (index, city) { 
        citiesSelect.append(
         $('<option/>') 
          .attr('value', city.Id) 
          .text(city.Name) 
        ); 
       }); 
      }); 
     }); 

     $('#SelectedCityId').change(function() { 
      var selectedCityId = $(this).val(); 
      $.getJSON('@Url.Action("Suburbs")', { cityId: selectedCityId }, function (suburbs) { 
       var suburbsSelect = $('#SelectedSuburbId'); 
       suburbsSelect.empty(); 
       $.each(suburbs, function (index, suburb) { 
        suburbsSelect.append(
         $('<option/>') 
          .attr('value', suburb.Id) 
          .text(suburb.Name) 
        ); 
       }); 
      }); 
     }); 
    }); 
</script> 

<div> 
    Province: 
    @Html.DropDownListFor(x => x.SelectedProvinceId, new SelectList(Model.Provinces, "Id", "Name")) 
</div> 
<div> 
    City: 
    @Html.DropDownListFor(x => x.SelectedCityId, Enumerable.Empty<SelectListItem>()) 
</div> 
<div> 
    Suburb: 
    @Html.DropDownListFor(x => x.SelectedSuburbId, Enumerable.Empty<SelectListItem>()) 
</div> 

作为改进的JavaScript代码可以通过写一个jQuery缩短插件以避免重复某些部分。

---

UPDATE：

和谈论的一个插件，你可以有在电线之间的东西：

(function ($) { 
    $.fn.cascade = function (options) { 
     var defaults = { }; 
     var opts = $.extend(defaults, options); 

     return this.each(function() { 
      $(this).change(function() { 
       var selectedValue = $(this).val(); 
       var params = { }; 
       params[opts.paramName] = selectedValue; 
       $.getJSON(opts.url, params, function (items) { 
        opts.childSelect.empty(); 
        $.each(items, function (index, item) { 
         opts.childSelect.append(
          $('<option/>') 
           .attr('value', item.Id) 
           .text(item.Name) 
         ); 
        }); 
       }); 
      }); 
     }); 
    }; 
})(jQuery); 

，然后简单地连线起来：

$(function() { 
    $('#SelectedProvinceId').cascade({ 
     url: '@Url.Action("Cities")', 
     paramName: 'provinceId', 
     childSelect: $('#SelectedCityId') 
    }); 

    $('#SelectedCityId').cascade({ 
     url: '@Url.Action("Suburbs")', 
     paramName: 'cityId', 
     childSelect: $('#SelectedSuburbId') 
    }); 
}); 

Answer 2

知道，该解决方案不适用于EF 4.0。它导致“在序列化...时检测到循环引用”错误。这里有可能的解决方案http://blogs.telerik.com/atanaskorchev/posts/10-01-25/resolving_circular_references_when_binding_the_mvc_grid.aspx，我用过第二个。

Answer 3

感谢Darin为您带来解决方案。它极大地帮助我达到了这一点。但正如'xxviktor'提到的那样，我确实得到了通告。错误。为了摆脱它，我已经这样做了。

public string GetCounties(int countryID) 
    { 
     List<County> objCounties = new List<County>(); 
     var objResp = _mastRepo.GetCounties(countryID, ref objCounties); 
     var objRetC = from c in objCounties 
         select new SelectListItem 
         { 
          Text = c.Name, 
          Value = c.ID.ToString() 
         }; 
     return new JavaScriptSerializer().Serialize(objRetC); 
    } 

为了实现自动级联，我用这种方法稍微扩展了jQuery扩展。

 $('#ddlCountry').cascade({ 
      url: '@Url.Action("GetCounties")', 
      paramName: 'countryID', 
      childSelect: $('#ddlState'), 
      childCascade: true 
     }); 

而实际的JS使用这个参数如下（在JSON请求内）。

   // trigger child change 
       if (opts.childCascade) { 
        opts.childSelect.change(); 
       } 

希望这可以帮助有类似问题的人。

Answer 4

要实现支持MVC的内置验证和绑定的级联下拉列表，您需要做一些与其他答案中所做的不同的事情。

如果你的模型有验证，这将支持它。从模型的摘录与验证：

[Required] 
[DisplayFormat(ConvertEmptyStringToNull = false)]  
public Guid cityId { get; set; } 

在你的控制器，你需要添加一个get方法，让你的看法以后可以得到相关的数据：现在

[AcceptVerbs(HttpVerbs.Get)] 
public JsonResult GetData(Guid id) 
{ 
    var cityList = (from s in db.City where s.stateId == id select new { cityId = s.cityId, name = s.name }); 
    //simply grabbing all of the cities that are in the selected state 

    return Json(cityList.ToList(), JsonRequestBehavior.AllowGet); 
} 

，以我提到的查看早期：

在你看来，你有类似的这种两个下拉菜单：

<div class="editor-label"> 
    @Html.LabelFor(model => model.stateId, "State") 
</div> 
<div class="editor-field"> 
    @Html.DropDownList("stateId", String.Empty) 
    @Html.ValidationMessageFor(model => model.stateId) 
</div> 

<div class="editor-label"> 
    @Html.LabelFor(model => model.cityId, "City") 
</div> 
<div class="editor-field"> 
    @*<select id="cityId"></select>*@ 
    @Html.DropDownList("cityId", String.Empty) 
    @Html.ValidationMessageFor(model => model.cityId) 
</div> 

下拉菜单中的内容由控制器绑定，并自动填充。注意：根据我的经验，删除此绑定并依靠java脚本来填充下拉菜单会使您失去验证。此外，我们在这里绑定的方式在验证方面很好，所以没有理由去改变它。

现在到我们的jQuery插件：

(function ($) { 
$.fn.cascade = function (secondaryDropDown, actionUrl, stringValueToCompare) { 
    primaryDropDown = this; //This doesn't necessarily need to be global 
    globalOptions = new Array(); //This doesn't necessarily need to be global 
    for (var i = 0; i < secondaryDropDown.options.length; i++) { 
     globalOptions.push(secondaryDropDown.options[i]); 
    } 

    $(primaryDropDown).change(function() { 
     if ($(primaryDropDown).val() != "") { 
      $(secondaryDropDown).prop('disabled', false); //Enable the second dropdown if we have an acceptable value 
      $.ajax({ 
       url: actionUrl, 
       type: 'GET', 
       cache: false, 
       data: { id: $(primaryDropDown).val() }, 
       success: function (result) { 
        $(secondaryDropDown).empty() //Empty the dropdown so we can re-populate it 
        var dynamicData = new Array(); 
        for (count = 0; count < result.length; count++) { 
         dynamicData.push(result[count][stringValueToCompare]); 
        } 

        //allow the empty option so the second dropdown will not look odd when empty 
        dynamicData.push(globalOptions[0].value); 
        for (var i = 0; i < dynamicData.length; i++) { 
         for (var j = 0; j < globalOptions.length; j++) { 
          if (dynamicData[i] == globalOptions[j].value) { 
           $(secondaryDropDown).append(globalOptions[j]); 
           break; 
          } 
         } 

        } 
       }, 
       dataType: 'json', 
       error: function() { console.log("Error retrieving cascading dropdown data from " + actionUrl); } 
      }); 
     } 
     else { 
      $(secondaryDropDown).prop('disabled', true); 
     } 
     secondaryDropDown.selectedindex = 0; //this prevents a previous selection from sticking 
    }); 
    $(primaryDropDown).change(); 
}; 
} (jQuery)); 

您可以复制上面的jQuery，我创建，为<script>...</script>标签在你看来，或者在一个单独的脚本文件，如果你希望（注意：我更新，这使它跨浏览器，但是我使用的场景不再需要，但它应该可以工作）。

在这些相同的脚本标签，（不是在一个单独的文件），您可以通过以下JavaScript调用插件：

$(document).ready(function() { 
    var primaryDropDown = document.getElementById('stateId'); 
    var secondaryDropdown = document.getElementById('cityId'); 
    var actionUrl = '@Url.Action("GetData")' 
    $(primaryDropDown).cascade(secondaryDropdown, actionUrl); 
}); 

记得添加$(document).ready一部分，该页面必须完全在你面前装尝试使下降级联。

Answer 5

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
 

 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     //Dropdownlist Selectedchange event 
 
     $("#country").change(function() { 
 
      $("#State").empty(); 
 
      $.ajax({ 
 
       type: 'POST', 
 
       url: '@Url.Action("State")', // we are calling json method 
 

 
       dataType: 'json', 
 

 
       data: { id: $("#country").val() }, 
 
       // here we are get value of selected country and passing same value 
 
       
 

 
       success: function (states) { 
 
        // states contains the JSON formatted list 
 
        // of states passed from the controller 
 

 
        $.each(states, function (i, state) { 
 
         $("#State").append('<option value="' + state.Value + '">' + 
 
          state.Text + '</option>'); 
 
         // here we are adding option for States 
 

 
        }); 
 
       }, 
 
      error: function (ex) { 
 
       alert('Failed to retrieve states.' + ex); 
 
      } 
 
     }); 
 
     return false; 
 
    }) 
 
    }); 
 
</script>

<div> 
 
    @Html.DropDownList("country", ViewBag.country as List<SelectListItem>, "CountryName", new { style = "width: 200px;" }) 
 
</div> 
 
<div> 
 

 
</div> 
 
<div> 
 
    @Html.DropDownList("State", ViewBag.country as List<SelectListItem>) 
 

 
</div>

从控制器我收到值

public async Task<ActionResult> Country() 
    { 

     Country co = new Country(); 
     List<SelectListItem> li = new List<SelectListItem>(); 
     li.Add(new SelectListItem { Text = "Select", Value = "0" }); 
     li.Add(new SelectListItem { Text = "India", Value = "1" }); 
     li.Add(new SelectListItem { Text = "Nepal", Value = "2" }); 
     li.Add(new SelectListItem { Text = "USA", Value = "3" }); 
     li.Add(new SelectListItem { Text = "Kenya", Value = "4" }); ; 
     ViewBag.country= li; 
     return View(); 
    } 
    public JsonResult state(string id) 
    { 
     List<SelectListItem> states = new List<SelectListItem>(); 
     states.Add(new SelectListItem { Text = "--Select State--", Value = "0" }); 
     switch (id) 
     { 
      case "1": 


       states.Add(new SelectListItem { Text = "MP", Value = "1" }); 
       states.Add(new SelectListItem { Text = "UP", Value = "2" }); 
       break; 
      case "3": 

       states.Add(new SelectListItem { Text = "USA1", Value = "3" }); 
       states.Add(new SelectListItem { Text = "USA2", Value = "4" }); 
       break; 
     } 

     return Json(new SelectList(states, "Value", "Text", JsonRequestBehavior.AllowGet)); 
    }