级联下拉菜单

时间:2015-07-28 08:49:57

标签: javascript jquery asp.net-mvc-4

这是jquery函数 - 现在我能够传递城市名称并将其保存到数据库,但如何通过更改城市名称来更改位置。我在jquery是零。无法理解这一行$ .getJSON(localityUrl,{ID:$(this).val()},function(data){plzzz建议我做一些改动 - < / p>

     <script type="text/javascript">        
      $(document).ready(function () {
        var localityUrl = '@Url.Action("FetchLocalities")';
        var localities = $('#SelectedLocality');
          $('#SelectedCity').change(function () {  localities.empty();
            subLocalities.empty();
            $.getJSON(localityUrl, { ID: $(this).val() }, function (data) {
                if (!data) {
                    return;
                }
                localities.append($('<option></option>').val('').text('Please select'));
                $.each(data, function (index, item) {
                     localities.append($('<option></option>').val(item.Value).text(item.Text));
                   // localities.append($('<option data-lat=' + item.Latitude + ' data-lng=' + item.Longitude + '></option>').text(item.Text));
                });
            });
        })

我的城市下降就像这样---------

       <div class="editor-label">
        @Html.LabelFor(model => model.SelectedCity)
        </div>
        <div class="editor-field">
            <select id="SelectedCity" name="SelectedCity">
                @foreach (var thisCity in Model.CityList)
                {
                    <option value="@thisCity.Name" data-lat="@thisCity.Latitude" data-long="@thisCity.Longitude" data-name="@thisCity.Name" >@thisCity.Name</option>
                }
            </select>
            @Html.ValidationMessageFor(model => model.SelectedCity)
    </div>

,我在服务层的城市就是这样---

    public List<City> FetchCities()
      {
       List<City> cities = new List<City>();
       cities.Add(new City() { Id = 1, Name = "--Select Your City--", Latitude = 28.6139M, Longitude = 77.2090M });
       cities.Add(new City() { Id = 2, Name = "Faridabaad", Latitude = 28.4211M, Longitude = 77.3078M });
       return cities;
   }

我的地方就是这样---

     public List<Locality> FetchLocalities()
      {
       List<Locality> localities = new List<Locality>();
       localities.Add(new Locality() { Id = 1, CityName = "Faridabaad", Name = "East Faridabaad" });
       localities.Add(new Locality() { Id = 2, CityName = "Faridabaad", Name = "West Faridabaad" });
        return localities;
    }

现在我的控制器就是这样来获取地点 -

        public JsonResult FetchLocalities(string name)
         {
           var data = _localityService.FetchLocalities()
            //.Where(l => l.CityId == Id)
            .Where(l => l.CityName == name)
            .Select(l => new { Value = l.CityName, Text = l.Name });
        return Json(data, JsonRequestBehavior.AllowGet);
    }

2 个答案:

答案 0 :(得分:1)

localityUrl是您的致电网址 - 在您的情况下,var localityUrl = '@Url.Action("FetchLocalities", "yourControllerName")';

{ ID: $(this).val() }是您传递给控制器​​的数据,在您的情况下需要{ name: $(this).val() },因为您的方法有参数string name(不是ID)和$(this).val()等同到所选选项的值

data中的function (data)是您从控制器方法返回的数据,在您的情况下是包含2个属性ValueText的对象的集合

答案 1 :(得分:0)

您可以对控制器操作进行ajax调用,并通过传递所需参数来单独重新加载所有位置。

而不是使用$ .getJSON()。