使用下拉列表mvc不调用JQuery脚本 [英] JQuery script is not called with the dropdownlist mvc

问题描述

这是我第一次在这里发帖提问。我是mvc的新手。

我想开发两个级联下拉列表。我在这里做了什么。



工厂类

<前lang =c＃> 公开 类工厂
{
[Key]
public int FactoryId { get ; set ; }

[必需（ErrorMessage = 必需）]
public string FactoryCode { get ; set ; }

[必需（ErrorMessage = 必需）]
public string FactoryName { get ; set ; }

public int 城市{获得; set ; }

public int 国家{获得; set ; }

我有国家和城市课程分开与外键关系



工厂控制器

  public  ActionResult FactoryIndex（ string  A， int ？Id， string  sortOrder， string  currentFilter， string  searchString， int ？page） 
 {
  var  objContext =  new  KnittingdbContext（）; 
 
  if （A ==  新）
 {
  var  model =  new 厂（）; 
 ViewData [  mdl] = model; 
 ViewBag.CountryList = objContext.Countries; 
 ViewBag.Module = A; 
 
 
} 
 ..................... 

_FactoryCreate partial view

 @ Html.DropDownListFor（a => a.Country ，新的SelectList（ViewBag.CountryList，CountryId，CountryName），Select country，new {id =CntryId，@ class =form-control}）
 
 @Html .DropDownListFor（a => a.City，new SelectList（Enumerable.Empty <   SelectListItem  > （），CityId，CityName），选择城市，新{@class =form-control}）

jquery script

 $（ function （）{
 $（' ＃CntryId' ）.change（ function （）{
 $ .ajax（{
 url：'  / Factory / FillCity'，
类型：  GET，
 dataType：  JSON，
数据：{国家：countryId}，
成功：功能（城市）{
 $（  #City）。html（ ）; 
 $ .each（cities， function （i，city）{
 $（  #City）。append（
 $（' < option>< / option>'）。val（city.CityId）.html（city.CityName））; 
}）; 
} 
}）; 
}）
}）

FactoryController中的ActionResult获取相关的城市数据

  public  ActionResult FillCity（ int  country）
 {
  var  db =  new  KnittingdbContext（）; 
  var  cities = db.Cities.Where（c = >  c.CountryId ==国家）; 
  return  Json（cities，JsonRequestBehavior.AllowGet）; 
} 

国家/地区下拉列表正在运行。

但是城市DDL无效。数据没有绑定。

当CountryId被更改时，它会出现在jquery脚本中。我可以使用警报来识别它。但是在脚本中的URL属性之后它无法正常工作。这些视图和控制器位于区域中。请帮我。在此先感谢！

解决方案

（ function （）{

（' ＃CntryId'）。change（ function （）{

.ajax（{
url：' / Factory / FillCity'，
类型： GET，
dataType： JSON，
data：{Country：countryId}，
成功：功能（城市）{

This is the first time im posting a question here. I am new to mvc.
I want to develop two cascading dropdown lists. Here what i have done.

Factory class

public class Factory
    {
        [Key]
        public int FactoryId { get; set; }

        [Required(ErrorMessage = "Required")]
        public string FactoryCode { get; set; }

        [Required(ErrorMessage = "Required")]
        public string FactoryName { get; set; }

        public int City { get; set; }

        public int Country { get; set; }

I have Country and City classes separately with a foreign key relationship

Factory controller

public ActionResult FactoryIndex(string A, int? Id, string sortOrder, string currentFilter, string searchString, int? page)
        {
            var objContext = new KnittingdbContext();

            if (A == "New")
            {
                var model = new Factory();
                ViewData["mdl"] = model;
                ViewBag.CountryList = objContext.Countries;
                ViewBag.Module = A;


            }
.....................

_FactoryCreate partial view

@Html.DropDownListFor(a=>a.Country,new SelectList(ViewBag.CountryList, "CountryId", "CountryName"), "Select country", new {id="CntryId", @class = "form-control"})

@Html.DropDownListFor(a => a.City, new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"), "Select city", new {@class = "form-control" })

jquery script

$(function() {
                $('#CntryId').change(function () {
                    $.ajax({
                        url: '/Factory/FillCity',
                        type: "GET",
                        dataType: "JSON",
                        data: { Country: countryId },
                        success: function (cities) {
                            $("#City").html(""); 
                            $.each(cities, function (i, city) {
                                $("#City").append(
                                    $('<option></option>').val(city.CityId).html(city.CityName));
                            });
                        }
                    });
                })
            })

ActionResult in FactoryController that fetches the relevant City data

public ActionResult FillCity(int country)
        {
            var db = new KnittingdbContext();
            var cities = db.Cities.Where(c => c.CountryId == country);
            return Json(cities, JsonRequestBehavior.AllowGet);
        }

Country dropdownlist is working.
But the City DDL is not working. The data doesn't get binded.
When the CountryId get changed it comes to jquery script. i could recognize it using a Alert. But after URL property in script it is not working. These views and controllers are in a Area. Please help me. Thanks in advance!

解决方案

(function() {

('#CntryId').change(function () {

.ajax({ url: '/Factory/FillCity', type: "GET", dataType: "JSON", data: { Country: countryId }, success: function (cities) {

这篇关于使用下拉列表mvc不调用JQuery脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！