动态DropDownLists在MVC 4表 [英] Dynamic DropDownLists In MVC 4 Form
问题描述
我的最终目标是要能够在一个DropDownList中，和之后在作出该选择，我要根据在第一个进行的选择另一DropDownList的要填充到选择一个值。我的表应该有一个完整的省份名单和一个完整的城市所选择的省DropDownList中的DropDownList的。
我是新来的ASP MVC所以我不知道这将如何实现。如果必须在的WinForms或WPF做，我将能够实现它，因为我知道数据是如何从我的商业逻辑来显示给用户的控制传播 - 然而，在MVC我不舒适，足以知道如何做到这一点正确有效。我也是在学习JavaScript及相关助手（如Jqeury）的过程中，所以我需要使用像阿贾克斯的东西来完成我的目标一定帮助。
下面是我已经和我知道我应该达到我的目的：
我的模型（为了抓住用户的输入）：
公共类CaptureCreateTrip
{
[需要]
[显示（NAME =线路编号）
公共字符串TRIPID {获得;组; }
[需要]
公共字符串StartPointProvince {获得;组; }
[需要]
公共字符串StartPointCity {获得;组; }
[需要]
公共字符串EndPointProvince {获得;组; }
[需要]
公共字符串EndPointCity {获得;组; }
}
我的方式：
请记住，我刚插入的ViewBag引用作为一个占位符，直到我可以用动态数据替换它。
@using（Html.BeginForm（CreateOneWayTrip，旅行））
{
@ Html.ValidationSummary（假）;
＆LT;字段集＆GT;
＆LT;传奇＆GT;输入您的旅行详情及LT; /传说＆GT;
＆LT;标签＆gt;开始点＆LT; /标签＆gt;
@ Html.DropDownListFor（M =＆GT; m.StartPointProvince，（的SelectList）ViewBag.Provinces）;
@ Html.DropDownListFor（M =＆GT; m.StartPointCity，（的SelectList）ViewBag.Cities）;
＆LT;标签＆gt;终点＆LT; /标签＆gt;
@ Html.DropDownListFor（M =＆GT; m.EndPointProvince，（的SelectList）ViewBag.Provinces）;
@ Html.DropDownListFor（M =＆GT; m.EndPointCity，（的SelectList）ViewBag.Cities）;
＆LT; P类=浮动：无;文本对齐：中心;＆GT;
＆LT;按钮类型=提交值=创建级=BTN BTN-信息BTN-圈BTN-LG＆GT;
＆LT;我类=发发检查＆GT;＆LT; / I＆GT;
＆LT; /按钮＆GT;
＆LT;按钮类型=提交值=创建级=BTN BTN-警告BTN-圈BTN-LG＆GT;
＆LT;我类=发发次＆GT;＆LT; / I＆GT;
＆LT; /按钮＆GT;
＆所述; / P＆GT;
＆LT; /字段集＆GT;
}
控制器：
//为了显示创建页
公众的ActionResult创建（）
{
返回查看（）;
}
//要发布后获取数据
[HttpPost]
公众的ActionResult创建（Models.CaptureCreateTrip旅）
{
Models.CaptureCreateTrip T =跳闸;
返回重定向（〜/车次/索引）;
}
//我需要一个控制器来获取JSON数据？
此外，什么的JavaScript做我在我的网页，包括（1）触发的DropDownList的选择Changed事件和（2）取合适的数据（城市列表中选择的省）的事件。
更新：
下面是生成的页面源代码的一个片段：
＆LT;选择n =province_dll级=表单控制数据 - VAL =真正的数据-VAL-所需=该StartPointProvince字段是必须的。 ID =StartPointProvinceNAME =StartPointProvince＆GT;＆LT;期权价值=NC＆GT;北开普省和LT; /选项＆GT;
＆LT;期权价值=FS＆GT;自由邦＆LT; /选项＆GT;
＆LT;期权价值=WC＆GT;西开普省和LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;选择n =city_dll级=表单控制数据-VAL =真正的数据-VAL-所需=该StartPointCity字段是必须的 ID =StartPointCityNAME =StartPointCity＆GT;＆LT;期权价值=NC＆GT;金伯利＆LT; /选项＆GT;
＆LT;期权价值=FS＆GT;博斯霍夫＆LT; /选项＆GT;
＆LT;期权价值=WC＆GT;巴克利＆LT; /选项＆GT;
＆LT; /选择＆GT;
下面是我写的JavaScript：
$（province_dll）。改变（函数（）{
$阿贾克斯（{
网址：getCities /车次，
类型：'后'，
数据： {
provinceId：$（province_dll）VAL（）
}
}）。完成（功能（响应）{
$（cities_dll）HTML（响应）;
}）;
}）;
这里是我的控制器（ps的数据仅仅是测试数据，将与数据库连接后）：
[HttpPost]
公众的ActionResult getCicites（INT provinceId）
{
VAR lstCities =新的SelectList（新[] {City1，城2，City3}）;
返回内容（的string.join（，lstCities））;
}
但它仍然没有工作 - 当我选择的第一个DropDownList不同的值，什么都不会发生。
您应该创建在全省DDL的变化事件的Ajax调用。 这个调用将请求的操作，并返回选定省城市。
$（province_dll）。改变（函数（）{
$阿贾克斯（{
网址：getCitiesController / getCitiesAction'，
类型：'后'，
数据： {
provinceId：provinceIdVar
}
}）。完成（功能（响应）{
$（cities_dll）HTML（响应）;
}）;
}）;
在行动：
[HttpPost]
公众的ActionResult getCicitesAction（INT provinceId）
{
VAR城市= db.cities.Where（A =＆GT; a.provinceId == provinceId）。选择（A =＆gt;中＆LT;期权价值='+ a.cityId +'＆gt;中+ a.cityName + '＆LT; /选项＆GT;';
返回内容（的string.join（，市））;
}
My end goal is to be able to select a value in one DropDownList, and after having made that selection, I want another DropDownList to be populated based on the selection made in the first one. My form should have a DropDownList full of a list of provinces and a DropDownList full of cities for the selected province.
I am new to ASP MVC so I am not sure how this will be accomplished. If this had to be done in Winforms or WPF I would be able to implement it since i know how data is propagated from my Business logic to the controls displayed to the user - however in MVC I am not comfortable enough to know how to do this correctly and effectively. I am also in the process of learning javascript and associated helpers(eg. Jqeury), so I need some assistance in using things like ajax to accomplish my goal.
Here is what I have already and what I know I should have to achieve my goal :
My Model(To capture the input from user):
public class CaptureCreateTrip
{
[Required]
[Display(Name = "Trip ID")]
public string TripID { get; set; }
[Required]
public string StartPointProvince { get; set; }
[Required]
public string StartPointCity { get; set; }
[Required]
public string EndPointProvince { get; set; }
[Required]
public string EndPointCity { get; set; }
}
My Form:
Keep in mind that I just inserted the ViewBag reference to act as a place holder till I can replace it with dynamic data.
@using (Html.BeginForm("CreateOneWayTrip", "Trips"))
{
@Html.ValidationSummary(false);
<fieldset>
<legend>Enter Your Trip Details</legend>
<label>Start Point</label>
@Html.DropDownListFor(m => m.StartPointProvince, (SelectList)ViewBag.Provinces);
@Html.DropDownListFor(m => m.StartPointCity, (SelectList)ViewBag.Cities);
<label>End Point</label>
@Html.DropDownListFor(m => m.EndPointProvince, (SelectList)ViewBag.Provinces);
@Html.DropDownListFor(m => m.EndPointCity, (SelectList)ViewBag.Cities);
<p style="float: none; text-align: center;">
<button type="submit" value="Create" class="btn btn-info btn-circle btn-lg">
<i class="fa fa-check"></i>
</button>
<button type="submit" value="Create" class="btn btn-warning btn-circle btn-lg">
<i class="fa fa-times"></i>
</button>
</p>
</fieldset>
}
The Controller:
//To Show Create Page
public ActionResult Create()
{
return View();
}
// To Get Data after post
[HttpPost]
public ActionResult Create(Models.CaptureCreateTrip trip)
{
Models.CaptureCreateTrip t = trip;
return Redirect("~/Trips/Index");
}
//Will I need a controller to get json data?
Also, what javascript do I have to include in my page to (1) Trigger an event on the dropdownlist Selection Changed event and (2) fetch appropriate data(list of cities for selected province).
UPDATE:
Here is a snippet of the page source that is generated:
<select Id="province_dll" class="form-control" data-val="true" data-val-required="The StartPointProvince field is required." id="StartPointProvince" name="StartPointProvince"><option value="NC">Northern Cape</option>
<option value="FS">Free State</option>
<option value="WC">Western Cape</option>
</select>
<select Id="city_dll" class="form-control" data-val="true" data-val-required="The StartPointCity field is required." id="StartPointCity" name="StartPointCity"><option value="NC">Kimberley</option>
<option value="FS">Boshof</option>
<option value="WC">Barkley</option>
</select>
Here is the javascript I wrote:
$("province_dll").change(function () {
$.ajax({
url: 'getCities/Trips',
type: 'post',
data: {
provinceId: $("province_dll").val()
}
}).done(function (response) {
$("cities_dll").html(response);
});
});
And here is my controller(ps. Data is just test data, will connect with db later):
[HttpPost]
public ActionResult getCicites(int provinceId)
{
var lstCities = new SelectList(new[] { "City1", "City2", "City3" });
return Content(String.Join("", lstCities));
}
However it's still not working - When I select a different value in the first DropDownList, nothing happens.
You should create a ajax call in the change event of the province ddl. This call will request to an action and return the cities of selected province.
$("province_dll").change(function(){
$.ajax({
url: 'getCitiesController/getCitiesAction',
type: 'post',
data: {
provinceId: provinceIdVar
}
}).done(function(response){
$("cities_dll").html(response);
});
});
In the action:
[HttpPost]
public ActionResult getCicitesAction(int provinceId)
{
var cities = db.cities.Where(a => a.provinceId == provinceId).Select(a => "<option value='" + a.cityId + "'>" + a.cityName + "'</option>'";
return Content(String.Join("", cities));
}
这篇关于动态DropDownLists在MVC 4表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
