javascript - 为什么Javascript没有触发？

Question

为什么 JavaScript 在这个项目上不起​​作用？谁能告诉我发生这种情况的原因？我还在我的_Layout上评论了脚本链接，但仍然不起作用。

模型_

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


namespace FA_CS.Models.Credit
{
    public class CreditCarModel
    {
        public string SelectedProvinceId { get; set; }
        public string SelectedCityId { get; set; }
        public string SelectedSuburbId { get; set; }
        public IEnumerable<Province> Provinceses { get; set; }

    }

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

这是视图 这是我的项目的视图以及这个项目中的内部和外部JS。

 @model FA_CS.Models.Credit.CreditCarModel
    @{
        ViewBag.Title = "Spider";
    }


    <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.Provinceses, "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>

控制器 这是我项目的控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FA_CS.Models.Credit;

namespace FA_CS.Controllers
{
    public class HomeController : Controller
    {



        public ActionResult Spider()
        {
            var model = new CreditCarModel
            {
                Provinceses = Enumerable.Range(1, 10).Select(x => new Province
                {
                    Id = (x + 1).ToString(),
                    Name = "Province" + x
                })

            };

            return View(model);

        }

           public ActionResult Suburbs(int 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)
    {
        var cities = Enumerable.Range(1, 5).Select(x => new
        {
            Id = x,
            Name = "city" + x
        });
        return Json(cities, JsonRequestBehavior.AllowGet);
       }           
     }
  }

Answer 1

您需要通过 $.ajax() 调用 ajax。

你写了： $.getJSON('@Url.Action("Cities")', { ProvinceId: selectedProvinceId }, function (cities) { var urbanSelect = $('#SelectedCityId'); urbanSelect.empty(); $.each （城市，函数（索引，城市）{ citySelect.append( $('') .attr('value', city.Id) .text(city.Name) ); }); });

而不是你需要编码：

var citiesSelect = $('#SelectedCityId');
     $.ajax({
        url: "/Home/Cities",
        type: "GET",  //these is must
        async: false, //these is optional
        cache: false,  //these is for IE
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: { provinceId: 1 },
        success: function (data) {
               $('#SelectedSuburbId').html("");

               var cities=eval(data);
               var citiesHtml = "";
               for (i = 0; i < cities.length; i++) {
                   citiesHtml += '<option value="' + cities[i].Id + '" >' + cities[i].Name + '</option>';
                }
             $('#SelectedSuburbId').html(citiesHtml);
            }
    });

您通过“数据”获得 json 调用的返回

Answer 2

使用上面的代码下拉可以填充。但是要获取值，您需要在“Cities”方法的顶部运行查询。并返回一个城市列表。

public ActionResult Cities(int provinceId)
{
    var cities = Enumerable.Range(1, 5).Select(x => new
    {
        Id = x,
        Name = "city" + x
    });
    return Json(cities, JsonRequestBehavior.AllowGet);
   }           
 }