asp.net-mvc – 填写下拉列表中选择另一个下拉列表
发布时间:2020-12-15 18:38:53 所属栏目:asp.Net 来源:网络整理
导读:我正在使用MVC,我仍然是MVC的新手。任何人都可以告诉我,如果你可以填写一个下拉列表,并选择另一个下拉列表的数据。 我想使用Jquery来避免回发,从而使页面更流畅。 解决方法 模型: namespace MvcApplicationrazor.Models{ public class CountryModel { p
我正在使用MVC,我仍然是MVC的新手。任何人都可以告诉我,如果你可以填写一个下拉列表,并选择另一个下拉列表的数据。
我想使用Jquery来避免回发,从而使页面更流畅。 解决方法
模型:
namespace MvcApplicationrazor.Models { public class CountryModel { public List<State> StateModel { get; set; } public SelectList FilteredCity { get; set; } } public class State { public int Id { get; set; } public string StateName { get; set; } } public class City { public int Id { get; set; } public int StateId { get; set; } public string CityName { get; set; } } } 控制器: public ActionResult Index() { CountryModel objcountrymodel = new CountryModel(); objcountrymodel.StateModel = new List<State>(); objcountrymodel.StateModel = GetAllState(); return View(objcountrymodel); } //Action result for ajax call [HttpPost] public ActionResult GetCityByStaeId(int stateid) { List<City> objcity = new List<City>(); objcity = GetAllCity().Where(m => m.StateId == stateid).ToList(); SelectList obgcity = new SelectList(objcity,"Id","CityName",0); return Json(obgcity); } // Collection for state public List<State> GetAllState() { List<State> objstate = new List<State>(); objstate.Add(new State { Id = 0,StateName = "Select State" }); objstate.Add(new State { Id = 1,StateName = "State 1" }); objstate.Add(new State { Id = 2,StateName = "State 2" }); objstate.Add(new State { Id = 3,StateName = "State 3" }); objstate.Add(new State { Id = 4,StateName = "State 4" }); return objstate; } //collection for city public List<City> GetAllCity() { List<City> objcity = new List<City>(); objcity.Add(new City { Id = 1,StateId = 1,CityName = "City1-1" }); objcity.Add(new City { Id = 2,StateId = 2,CityName = "City2-1" }); objcity.Add(new City { Id = 3,StateId = 4,CityName = "City4-1" }); objcity.Add(new City { Id = 4,CityName = "City1-2" }); objcity.Add(new City { Id = 5,CityName = "City1-3" }); objcity.Add(new City { Id = 6,CityName = "City4-2" }); return objcity; } 视图: @model MvcApplicationrazor.Models.CountryModel @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script language="javascript" type="text/javascript"> function GetCity(_stateId) { var procemessage = "<option value='0'> Please wait...</option>"; $("#ddlcity").html(procemessage).show(); var url = "/Test/GetCityByStaeId/"; $.ajax({ url: url,data: { stateid: _stateId },cache: false,type: "POST",success: function (data) { var markup = "<option value='0'>Select City</option>"; for (var x = 0; x < data.length; x++) { markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>"; } $("#ddlcity").html(markup).show(); },error: function (reponse) { alert("error : " + reponse); } }); } </script> <h4> MVC Cascading Dropdown List Using Jquery</h4> @using (Html.BeginForm()) { @Html.DropDownListFor(m => m.StateModel,new SelectList(Model.StateModel,"StateName"),new { @id = "ddlstate",@style = "width:200px;",@onchange = "javascript:GetCity(this.value);" }) <br /> <br /> <select id="ddlcity" name="ddlcity" style="width: 200px"> </select> <br /><br /> } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- asp.net core 3.0 中使用 swagger
- asp.net – LINQ查询,其中boolean值为true或false
- asp.net-membership – MiniProfiler和SqlMembershipProvid
- asp.net-mvc – 如何将索引应用于IEnumerable表达式类型并在
- asp.net – Sitecore:Sitecore.Web.WebUtil.Redirect对Res
- asp.net – ASP .Net WorldPay集成
- asp.net-mvc – ASP.NET Azure 400错误请求不返回JSON数据
- asp.net – 命名空间’System’中不存在类型或命名空间’Li
- asp.net-mvc – ASP.NET在基本控制器中重定向
- ASP.Net验证器默认样式
推荐文章
站长推荐
- asp.net-mvc – 使用asp.net mvc操作过滤器的奇怪
- asp.net-mvc-3 – 在Kendo网格中显示datetime字段
- asp.net – 具有FormsAuthentication的跨域Cooki
- asp.net-mvc – MVC中具有存储库/ DTO模式的实体
- asp.net-mvc – 获取错误 – “@”字符后面的意外
- 可能在ASP.Net页面中引发404错误?
- asp.net-mvc – 从.Net MVC View获取HTML而不实际
- 为什么asp.net将页面包装在一个表单中?
- asp.net-mvc – Error.aspx – 如何关闭?
- CommandArgument(与ASP.NET Repeater一起使用)是
热点阅读