试图以填充使用jQuery AJAX改变主列表子列表 [英] Trying to populate a sub-list on changing the main list using jquery ajax
本文介绍了试图以填充使用jQuery AJAX改变主列表子列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不知道这jQuery脚本是正确的。子列表填充上改变使用在哪里任何值子句中主列表中选择主列表。我需要的操作方法？最好的解决办法是什么？
＆LT;脚本类型=文/ JavaScript的＆GT;
$（＃FKCountyId）。改变（函数（）{
$阿贾克斯（{
网址：@ Url.Action（，），
数据类型：JSON，
输入：POST，
数据：{TXT：$（＃FKCountyId）VAL（）}，
成功：功能（数据）{
$（'＃FKCityId'）空（）。
//需要帮助这里
}，
错误：功能（jqXHR，textStatus，errorThrown）{
警报（errorThrown）;
}
}）;
}）;
查看
@ Html.LabelFor（M = GT; m.FKCountyId，新{@class =COL-SM-2 COL-SM-2控制标签}）
@ Html.DropDownListFor（M =＆GT; m.FKCountyId，Model.GetCounty（））
@ Html.LabelFor（M = GT; m.FKCityId，新{@class =COL-SM-2 COL-SM-2控制标签}）
@ Html.DropDownListFor（M =＆GT; m.FKCityId，Model.GetCity（））
型号
公共类NewsModel：BaseModel
{
[需要]
公众诠释？ FKCountyId {搞定;组; }
公共字符串县{搞定;组; }
[需要]
公众诠释？ FKCityId {搞定;组; }
公共字符串城{搞定;组; }
公开名单＆LT; SelectListItem＆GT; GetCounty（）
{
清单＆LT; SelectListItem＆GT; LST =新的List＆LT; SelectListItem＆GT;（）;
lst.Add（新SelectListItem（）{文字=请选择县志，值=}）;
的foreach（在LambertonContext.NewsCounties VAR项）
{
lst.Add（新SelectListItem（）{文字= item.County，值= item.PKCountyId.ToString（）}）;
}
返回善堂;
} 公开名单＆LT; SelectListItem＆GT; GetCity（）
{
清单＆LT; SelectListItem＆GT; LST =新的List＆LT; SelectListItem＆GT;（）;
lst.Add（新SelectListItem（）{文字=请选择城市，值=}）;
的foreach（在LambertonContext.NewsCities VAR项）
{
lst.Add（新SelectListItem（）{文字= item.City，值= item.PKCityId.ToString（）}）;
}
返回善堂;
}
}
解决方案
您查看和模式不正确，实现你的目标的一种方式是创建一个视图模型将同时处理您的清单，这样你可以留下你的基础模型的抽象。
下面是如何，我会重新安排你的code。
模型
使用系统;
使用System.ComponentModel.DataAnnotations;
使用System.Collections.Generic;
使用System.Web.Mvc;命名空间Alundra.Models
{
公共类CountyCityViewModel
{
公开名单＆LT; CountyModel＆GT; Countymodel {搞定;组; }
公众的SelectList SelectedCity {搞定;组; }
} 公共类CountyModel
{
公众诠释ID {搞定;组; }
公共字符串CountyName {搞定;组; }
}
公共类CityModel
{
公众诠释ID {搞定;组; }
公共字符串CITYNAME {搞定;组; }
//为县模型外键
公众诠释CountyID {搞定;组; }
公共虚拟CountyModel县{搞定;组; } }
}
控制器
使用系统;
使用System.Web.Mvc;
使用System.Collections.Generic;
使用Alundra.Models;
使用System.Linq的;命名空间HelloWorldMvcApp
{
公共类HomeController的：控制器
{
公众的ActionResult指数（）
{
CountyCityViewModel CountyCityviewmodel =新CountyCityViewModel（）;
CountyCityviewmodel.Countymodel =新的List＆LT; CountyModel＆GT;（）;
CountyCityviewmodel.Countymodel = GetAllCounties（）;
返回查看（CountyCityviewmodel）;
}
//这是您将调用使用AJAX从视图的操作
[HttpPost]
公众的ActionResult GetCityByCountyID（INT CountyID）
{
清单＆LT; CityModel＆GT; ListOfCities =新的List＆LT; CityModel＆GT;（）;
ListOfCities = GetAllCities（）式（S = GT; s.CountyID == CountyID）。.ToList（）;
的SelectList SelectListOfCities =新的SelectList（ListOfCities，ID，CITYNAME，0）;
返回JSON（SelectListOfCities）;
}
//填充县收集或者您也可以从数据库中提取
公开名单＆LT; CountyModel＆GT; GetAllCounties（）
{
清单＆LT; CountyModel＆GT; Countymodel =新的List＆LT; CountyModel＆GT;（）;
Countymodel.Add（新CountyModel {ID = 0，CountyName =选择一个县}）;
Countymodel.Add（新CountyModel {ID = 1，CountyName =自由县}）;
Countymodel.Add（新CountyModel {ID = 2，CountyName =不太好县}）;
Countymodel.Add（新CountyModel {ID = 3，CountyName =最佳县}）;
Countymodel.Add（新CountyModel {ID = 4，CountyName =疯狂县}）;
Countymodel.Add（新CountyModel {n = 5，CountyName =快乐县}）;
返回Countymodel;
}
//填充城市收集或者您也可以从数据库中提取
公开名单＆LT; CityModel＆GT; GetAllCities（）
{
清单＆LT; CityModel＆GT; CityModel =新的List＆LT; CityModel＆GT;（）;
CityModel.Add（新CityModel {ID = 1，CountyID = 3，CITYNAME =City1-1}）;
CityModel.Add（新CityModel {ID = 2，CountyID = 3，CITYNAME =City2-1}）;
CityModel.Add（新CityModel {ID = 3，CountyID = 2，CITYNAME =City4-1}）;
CityModel.Add（新CityModel {ID = 4，CountyID = 2，CITYNAME =City1-2}）;
CityModel.Add（新CityModel {n = 5，CountyID = 1，CITYNAME =City1-3}）;
CityModel.Add（新CityModel {ID = 6，CountyID = 5，CITYNAME =City4-2}）;
CityModel.Add（新CityModel {ID = 7，CountyID = 5，CITYNAME =City4-2}）;
CityModel.Add（新CityModel {ID = 8，CountyID = 1，CITYNAME =City4-2}）;
CityModel.Add（新CityModel {ID = 9，CountyID = 2，CITYNAME =City4-2}）;
CityModel.Add（新CityModel {ID = 10，CountyID = 4，CITYNAME =City4-2}）;
返回CityModel;
}
}
}
，最后你的看法
@model Alundra.Models.CountyCityViewModel
@ {}
＆LT;链接HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT;链接rel =stylesheet属性HREF =// maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\">＆LT;脚本＆GT;
功能GetCitieslist（Countyid）{
VAR procemessage =＆LT;期权价值='0'＆gt;请稍候...＆LT; /选项＆gt;中;
$（＃ddlcity）HTML（procemessage）.show（）; VAR URL ='@ Url.Action（GetCityByCountyID）'; $阿贾克斯（{
网址：网址，
数据：{CountyID：Countyid}，
缓存：假的，
键入：POST，
成功：功能（数据）{
VAR的标记=＆LT;期权价值='0'＆GT;选择城市＆LT; /选项＆gt;中;
对于（VAR I = 0; I＆LT; data.length;我++）{
标记+ =＆LT;期权价值=+数据[I] .value的+＆gt;中+数据[I]。文本+＆LT; /选项＆gt;中;
}
$（＃CitiesDropDown）HTML（标记）.show（）;
}，
错误：功能（效应初探）{
警报（错误：+效应初探）;
}
}）; }
＆LT; / SCRIPT＆GT;
＆LT; H4＆GT;＆LT; I类=发FA-connectdevelop FA-3X拉左发界＆GT;＆LT; / I＆GT;＆LT;跨度类=标签标签警告＆gt;使用jQuery和LT级联下拉menues; / SPAN＆GT;＆LT; / H4＆GT;@using（Html.BeginForm（））
{
@ Html.DropDownListFor（M = GT; m.Countymodel，新的SelectList（Model.Countymodel，ID，CountyName），新{@id =StateDropDown，@onchange =JavaScript的：GetCitieslist（THIS.VALUE） ;}）
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT;选择一个id =CitiesDropDownNAME =ddlcity的风格=宽度：200像素＆GT; ＆LT; /选择＆GT;
}
＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/jquery-2.1.3.min.js＆GT;＆LT; / SCRIPT＆GT;
EXTRA ：您可以实现加载图像，而城市DD是获得数据。
下面是一个 .NET拨弄链接到工作的例子
I am not sure if this jquery script is correct. The Sublist populates on changing main list using where clause on whatever value is selected in main list. Do i need action method? What is the best solution?
<script type="text/javascript">
$("#FKCountyId").change(function () {
$.ajax({
url: "@Url.Action("", "")",
dataType: 'json',
type: 'POST',
data: { txt: $("#FKCountyId").val() },
success: function (data) {
$('#FKCityId').empty();
// need help here
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
View
@Html.LabelFor(m => m.FKCountyId, new { @class = "col-sm-2 col-sm-2 control-label" })
@Html.DropDownListFor(m => m.FKCountyId, Model.GetCounty())
@Html.LabelFor(m => m.FKCityId, new { @class = "col-sm-2 col-sm-2 control-label" })
@Html.DropDownListFor(m => m.FKCityId, Model.GetCity())
Model
public class NewsModel : BaseModel
{
[Required]
public int? FKCountyId { get; set; }
public string County { get; set; }
[Required]
public int? FKCityId { get; set; }
public string City { get; set; }
public List<SelectListItem> GetCounty()
{
List<SelectListItem> lst = new List<SelectListItem>();
lst.Add(new SelectListItem() { Text = "Please select County", Value = "" });
foreach (var item in LambertonContext.NewsCounties)
{
lst.Add(new SelectListItem() { Text = item.County, Value = item.PKCountyId.ToString() });
}
return lst;
}
public List<SelectListItem> GetCity()
{
List<SelectListItem> lst = new List<SelectListItem>();
lst.Add(new SelectListItem() { Text = "Please select City", Value = "" });
foreach (var item in LambertonContext.NewsCities)
{
lst.Add(new SelectListItem() { Text = item.City, Value = item.PKCityId.ToString() });
}
return lst;
}
}
解决方案
Your View and Model are not correct, One way to achieve your goal is to create a ViewModel that will handle both of your lists , this way you can leave your base models abstract.
Here's how i would rearrange your code.
Model
using System;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
using System.Web.Mvc;
namespace Alundra.Models
{
public class CountyCityViewModel
{
public List<CountyModel> Countymodel { get; set; }
public SelectList SelectedCity { get; set; }
}
public class CountyModel
{
public int ID { get; set; }
public string CountyName { get; set; }
}
public class CityModel
{
public int ID { get; set; }
public string CityName { get; set; }
//Foreign key for the County model
public int CountyID { get; set; }
public virtual CountyModel County { get; set; }
}
}
Controller
using System;
using System.Web.Mvc;
using System.Collections.Generic;
using Alundra.Models;
using System.Linq;
namespace HelloWorldMvcApp
{
public class HomeController : Controller
{
public ActionResult Index()
{
CountyCityViewModel CountyCityviewmodel = new CountyCityViewModel();
CountyCityviewmodel.Countymodel = new List<CountyModel>();
CountyCityviewmodel.Countymodel = GetAllCounties();
return View(CountyCityviewmodel);
}
//This is the action you will call using AJAX from your view
[HttpPost]
public ActionResult GetCityByCountyID(int CountyID)
{
List<CityModel> ListOfCities = new List<CityModel>();
ListOfCities = GetAllCities().Where(s => s.CountyID == CountyID).ToList();
SelectList SelectListOfCities = new SelectList(ListOfCities, "ID", "CityName", 0);
return Json(SelectListOfCities);
}
// Populate counties collection Or you can extract from DB
public List<CountyModel> GetAllCounties()
{
List<CountyModel> Countymodel = new List<CountyModel>();
Countymodel.Add(new CountyModel { ID = 0, CountyName = "Select a county" });
Countymodel.Add(new CountyModel { ID = 1, CountyName = "Freedom county" });
Countymodel.Add(new CountyModel { ID = 2, CountyName= "Not so good county" });
Countymodel.Add(new CountyModel { ID = 3, CountyName = "Best county" });
Countymodel.Add(new CountyModel { ID = 4, CountyName = "Crazy county" });
Countymodel.Add(new CountyModel { ID = 5, CountyName = "Happy county" });
return Countymodel;
}
//Populate cities collection Or you can extract from DB
public List<CityModel> GetAllCities()
{
List<CityModel> CityModel = new List<CityModel>();
CityModel.Add(new CityModel { ID = 1, CountyID = 3, CityName = "City1-1" });
CityModel.Add(new CityModel { ID = 2, CountyID = 3, CityName = "City2-1" });
CityModel.Add(new CityModel { ID = 3, CountyID = 2, CityName = "City4-1" });
CityModel.Add(new CityModel { ID = 4, CountyID = 2, CityName = "City1-2" });
CityModel.Add(new CityModel { ID = 5, CountyID = 1, CityName = "City1-3" });
CityModel.Add(new CityModel { ID = 6, CountyID = 5, CityName = "City4-2" });
CityModel.Add(new CityModel { ID = 7, CountyID = 5, CityName = "City4-2" });
CityModel.Add(new CityModel { ID = 8, CountyID= 1, CityName = "City4-2" });
CityModel.Add(new CityModel { ID = 9, CountyID = 2, CityName = "City4-2" });
CityModel.Add(new CityModel { ID = 10, CountyID = 4, CityName = "City4-2" });
return CityModel;
}
}
}
and finally your view
@model Alundra.Models.CountyCityViewModel
@{
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script>
function GetCitieslist(Countyid) {
var procemessage = "<option value='0'> Please wait...</option>";
$("#ddlcity").html(procemessage).show();
var url = '@Url.Action("GetCityByCountyID")';
$.ajax({
url: url,
data: { CountyID: Countyid },
cache: false,
type: "POST",
success: function (data) {
var markup = "<option value='0'>Select City</option>";
for (var i = 0; i < data.length; i++) {
markup += "<option value=" + data[i].Value + ">" + data[i].Text + "</option>";
}
$("#CitiesDropDown").html(markup).show();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
</script>
<h4><i class="fa fa-connectdevelop fa-3x pull-left fa-border"></i><span class="label label-warning">Cascade Dropdown menues using JQuery</span></h4>
@using (Html.BeginForm())
{
@Html.DropDownListFor(m => m.Countymodel, new SelectList(Model.Countymodel, "ID", "CountyName"), new { @id = "StateDropDown", @onchange = "javascript:GetCitieslist(this.value);" })
<br />
<br />
<select id="CitiesDropDown" name="ddlcity" style="width: 200px">
</select>
}
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
EXTRA: You can implement a loading image while the cities DD is getting the data.
Here's a .net fiddle link to a working example
这篇关于试图以填充使用jQuery AJAX改变主列表子列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
