asp.net MVC级联下拉列表

我试图在asp.net中创建一些级联下拉列表。asp.net MVC级联下拉列表

  <div class="form-group"> 
       @Html.LabelFor(m => m.Country) 
       @Html.DropDownListFor(m => m.Country, new SelectList(Model.CountriesDDL, "CountryCode", "Country"), "--Select--", new { @class = "form-control" }) 
      </div> 
      <div class="form-group"> 
       @Html.LabelFor(m => m.Region) 
       @Html.DropDownListFor(m => m.Region, new SelectList(Model.RegionsDDL, "CountryCode", "RegionName"), "--Select--", new { @class = "form-control" }) 
      </div>

我使用jQuery /阿贾克斯的观点：这些清单上的页面加载正确填充

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Country").change(function() { 
      $("#Region").empty(); 
      $.ajax({ 
       type: 'POST', 
       url: '@Url.Action("GetRegionsByCountryCode")', 
       dataType: 'json', 
       data: { countryCode: $("#Country").val() }, 
       success: function (data) { 
        $.each(data, function (index, value) { 
         $("#Regions").append('<option value="' 
         + value.CountryCode + '">' 
         + value.RegionName + '</option>'); 
        }); 
       }, 
       error: function (ex) { 
        alert('Failed to retrieve regions.' + ex); 
       } 
      }); 
      return false; 
     }) 
    }); 
</script>

即调用控制器的方法：

[HttpPost] 
    public JsonResult GetRegionsByCountryCode(string countryCode) 
    { 
     var regions = _uiRepository.GetRegionsByCountryCode(countryCode); 
     return Json(regions); 
    }

但是，当我从“国家/地区”下拉列表中选择一个选项，我弹出一个对话框，提示：

Failed to retrieve regions.[object Object]

我不确定那个错误意味着什么或者我该如何调试。我在控制器方法上设置了一个断点，但它从来没有打过它？

来源

2016-07-13 PixelPaul

如果您使用的是Chrome，按F12查看开发人员工具。然后点击控制台标签。当您更改国家/地区选择列表时，您是否看到任何错误？ –

你的代码看起来很好（至少是ajax调用部分）。你可以在你的'GetRegionsByContryCode'操作方法中放置一个断点，看它是否正在返回正确的数据（200响应）。您可以使用浏览器的网络标签查看响应。你也可以在你的错误处理程序中执行一个console.log（添加3个params和console.log所有这些并且看看你得到了什么） – Shyju

@Mahesh Warrier当从select中进行更改时，在控制台选项卡中看不到任何错误名单。 @Shyju我在'GetRegionsByCountryCode'操作方法上有一个断点，但是当我从下拉列表中改变选择时，它似乎没有碰到它？ – PixelPaul

你的下拉id为Region，但在你的成功的功能使用的是Regions

使这一小小的改变，它会工作。

控制器：

public class MyCountry 
{ 
    public int CountryCode { get; set; } 
    public string Country { get; set; } 
} 

public class Region 
{ 
    public int CountryCode { get; set; } 
    public string RegionName { get; set; } 
} 

public class ViewModel 
{ 
    public List<MyCountry> Country { get; set; } 
    public List<Region> Region { get; set; } 
} 

public class DropDownExampleController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new ViewModel(); 

     var c1 = new MyCountry { Country = "South Africa", CountryCode = 1 }; 
     var c2 = new MyCountry { Country = "Russia", CountryCode = 2 }; 

     model.Country = new List<MyCountry> { c1, c2 }; 

     var r1 = new Region { RegionName = "Gauteng", CountryCode = 1}; 
     var r2 = new Region { RegionName = "Western Cape", CountryCode = 1 }; 
     var r3 = new Region { RegionName = "Siberia", CountryCode = 2 }; 

     model.Region = new List<Region> { r1, r2,r3}; 
     return View(model); 
    } 

    [HttpPost] 
    public JsonResult GetRegionsByCountryCode(string countryCode) 
    { 
     var r1 = new Region { RegionName = "Gauteng", CountryCode = 1 }; 
     var r2 = new Region { RegionName = "Western Cape", CountryCode = 1 }; 
     var r3 = new Region { RegionName = "Siberia", CountryCode = 2 }; 

     var regions = new List<Region> { r1, r2, r3 }; 

     var results = regions.Where(r => r.CountryCode == Int32.Parse(countryCode)).ToList(); 

     return Json(results); 
    } 
}

查看：

@model MVCTutorial.Controllers.ViewModel 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#Country").change(function() { 

      var countryCode = $("#Country").val(); 
      $("#Region").empty(); 

      $.ajax({ 
       type: 'POST', 
       url: '@Url.Action("GetRegionsByCountryCode")', 
       data: { countryCode: countryCode }, 
       success: function (data) { 
        $.each(data, function (index, value) { 
         $("#Region").append('<option value="' 
              + value.CountryCode + '">' 
              + value.RegionName + '</option>'); 
        }); 
       }, 
       error: function (ex) { 
        alert('Failed to retrieve regions.' + ex); 
       } 
      }); 
      return false; 
     }) 
    }); 
</script> 

<div class="form-group"> 
    Country 
    @Html.DropDownListFor(m => m.Country, new SelectList(Model.Country, "CountryCode", "Country"), "--Select--", new { @class = "form-control" }) 
</div> 
<div class="form-group"> 
    Region 
    @Html.DropDownListFor(m => m.Region, new SelectList(Model.Region, "CountryCode", "RegionName"), "--Select--", new { @class = "form-control" }) 
</div>

来源

2016-07-13 06:48:32

是的，您的两个建议的小改动是所有需要的。现在工作！非常感谢。 – PixelPaul

**您需要将JsonRequestBehavior.AllowGet添加到您的JSON调用中。这是错误的！**您不需要为使用'[HttpPost]'属性装饰的操作方法做到这一点。只有它是GET操作时才需要。 – Shyju

注意到，谢谢@ Shyju.I已更新答案 –

在您的ajax调用中添加contentType：'application/json'。

$.ajax({ 
       type: 'POST', 
       url: '@Url.Action("GetRegionsByCountryCode")', 
       dataType: 'json', 
       contentType:'application/json' 
       data: { countryCode: $("#Country").val() }, 
       success: function (data) { 
        $.each(data, function (index, value) { 
         $("#Regions").append('<option value="' 
         + value.CountryCode + '">' 
         + value.RegionName + '</option>'); 
        }); 
       }, 
       error: function (ex) { 
        alert('Failed to retrieve regions.' + ex); 
       } 
      });

来源

2016-07-13 00:57:01 MoustafaS

这完全没有必要，如果要添加它，还需要将数据串联起来。 –

asp.net MVC级联下拉列表

回答

相关问题