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 citiesSelect = $（'＃SelectedCityId'）; citiesSelect.empty（）; $ .each（cities，function（index，city）{ citiesSelect.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);
            }
    });

您可以通过“data”

返回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);
   }           
 }

为什么Javascript没有解雇？

2 个答案: