2013-03-11 5 views
0

Почему JavaScript не работает над этим проектом? Может ли кто-нибудь сказать мне причину, почему это происходит? Я также комментирую ссылки сценария на моем _Layout, но все равно не работает.Почему Javascript не стреляет?

Модель

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); 
     }   
    } 
    } 
+0

Откройте консоль Javascript в браузере и загрузите страницу. Вы видите ошибку? –

+0

Вот что показывает консоль: Не удалось загрузить ресурс: сервер ответил статусом 404 (не найден) http: // localhost: 4912/Главная/Города? ProvinceId = 4 – 2013-03-11 04:45:25

+0

@ user2021399 Имеет ли этот URL-адрес? По ошибке 404, похоже, что это не – rhughes

ответ

1

Вы должны вызвать Аякса на $ .ajax().

Вы писали: $ .getJSON ('@ Url.Action ("Города")', {provinceId: selectedProvinceId}, функция (города) { вар citiesSelect = $ ('# SelectedCityId'); citiesSelect.empty(); $ .each (города, функция (индекс, город) { citiesSelect.append ( $ ('') .attr ('значение', 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 по «данным»

+0

** @ jishnu saha ** Спасибо, чувак, но это не работает, Код теперь выше, моя следующая проблема: как я могу привязать его к базе данных или заполнить выпадающий список с помощью базы данных? – 2013-03-11 07:02:21

+0

async: false необходим для этих целей. –

+0

@jinshu saha Теперь все в порядке Jinshu Спасибо за предложения. – 2013-03-11 10:19:52

0

С выше падения кода вниз может быть населен. Но для получения значений вам нужно выполнить запрос в верхней части метода «Города». И верните список городов.

public ActionResult Cities(int provinceId) 
{ 
    var cities = Enumerable.Range(1, 5).Select(x => new 
    { 
     Id = x, 
     Name = "city" + x 
    }); 
    return Json(cities, JsonRequestBehavior.AllowGet); 
    }   
} 
Смежные вопросы