级联下拉列表MVC3
-
25-10-2019 - |
题
MVC相对较新,并试图获得级联的下拉列表,适用于火车时间。
在查看了很多帖子之后,人们说您应该远离ViewBag/ViewData,而要专注于ViewModels,但我似乎无法将其抬起头来,这使我越过墙壁。任何教程似乎都变得复杂或太容易了,整个ViewModel的想法尚未与我联系在一起。
因此,这是我的场景:我有一个管理系统,员工可以在其中添加单独的火车旅行。对于每次火车时间,我都有一个输入表格,用户可以选择公司,从那里,我希望下面的下拉列表以填充旅程编号列表,以指示路线。一旦他们选择了一个数字,他们就可以继续使用其余的表格,包括旅行时间,火车上的设施等。
我已经创建了一个类似的ViewModel:
public class JourneyNumbersViewModel
{
private List<SelectListItem> _operators = new List<SelectListItem>();
private List<SelectListItem> _journeys= new List<SelectListItem>();
[Required(ErrorMessage = "Please select an operator")]
public string SelectedOperator { get; set; }
[Required(ErrorMessage = "Please select a journey")]
public string SelectedJourney { get; set; }
public List<SelectListItem> Journeys
{
get { return _journeys; }
}
public List<SelectListItem> Operators
{
get
{
foreach(Operator a in Planner.Repository.OperatorRepository.GetOperatorList())
{
_operators.Add(new SelectListItem() { Text = a.OperatorName, Value = a.OperatorID.ToString() });
}
return _operators;
}
}
}
在我的控制器中,我对创建视图有此功能:
public ActionResult Create()
{
return View(new JourneyNumbersViewModel());
}
这就是它并不真正适合我的地方 - 如果我将模型从创建视图的顶部更改为: @model Planner.ViewModels.JourneyNumbersViewModel
, ,然后我的其余表格会引发错误,因为模型不再适合其余表单。这是应该工作的方式吗?如果您需要用单个视图引用多个视图模型怎么办?
我知道这是一件简单的事情,当它点击时,我会想知道我一开始就会在地球上挣扎,但是如果有人可以指出我出错的地方,我将非常感激。
解决方案
我做了类似的事情。这是一些代码(对此很长时间表示歉意,但我想确保您可以在您身边重新创建它):
查看看起来像这样:
using Cascading.Models
@model CascadingModel
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Cascading Forms</h2>
<table>
@using(Html.BeginForm("Index", "Home"))
{
<tr>
<td>@Html.LabelFor(m=>m.CategoryId)</td>
<td>@Html.DropDownListFor(m => m.CategoryId, new SelectList(Model.Categories, "Id", "Name"), string.Empty)</td>
</tr>
<tr>
<td>@Html.LabelFor(m=>m.ProductId)</td>
<td>@Html.CascadingDropDownListFor(m => m.ProductId, new SelectList(Model.Products, "Id", "Name"), string.Empty, null, "CategoryId", "Home/CategorySelected")</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Go"/></td>
</tr>
}
</table>
模型看起来如下:
public class CascadingModel
{
public int CategoryId { get; set; }
public List<Category> Categories { get; set; }
public int ProductId { get; set; }
public List<Product> Products { get; set; }
}
系统的真正“聪明”部分是html.cascadingdropdownlistfor,看起来如下:
public static class MvcHtmlExtensions
{
public static MvcHtmlString CascadingDropDownListFor<TModel, TProperty>(
this HtmlHelper<TModel> htmlHelper,
Expression<Func<TModel, TProperty>> expression,
IEnumerable<SelectListItem> selectList,
string optionLabel,
IDictionary<string, Object> htmlAttributes,
string parentControlName,
string childListUrl
)
{
var memberName = GetMemberInfo(expression).Member.Name;
MvcHtmlString returnHtml = Html.SelectExtensions.DropDownListFor(htmlHelper, expression, selectList, optionLabel, htmlAttributes);
var returnString = MvcHtmlString.Create(returnHtml.ToString() +
@"<script type=""text/javascript"">
$(document).ready(function () {
$(""#<<parentControlName>>"").change(function () {
var postData = { <<parentControlName>>: $(""#<<parentControlName>>"").val() };
$.post('<<childListUrl>>', postData, function (data) {
var options = """";
$.each(data, function (index) {
options += ""<option value='"" + data[index].Id + ""'>"" + data[index].Name + ""</option>"";
});
$(""#<<memberName>>"").html(options);
})
.error(function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); });
});
});
</script>"
.Replace("<<parentControlName>>", parentControlName)
.Replace("<<childListUrl>>", childListUrl)
.Replace("<<memberName>>", memberName));
return returnString;
}
private static MemberExpression GetMemberInfo(Expression method)
{
LambdaExpression lambda = method as LambdaExpression;
if (lambda == null)
throw new ArgumentNullException("method");
MemberExpression memberExpr = null;
if (lambda.Body.NodeType == ExpressionType.Convert)
{
memberExpr = ((UnaryExpression)lambda.Body).Operand as MemberExpression;
}
else if (lambda.Body.NodeType == ExpressionType.MemberAccess)
{
memberExpr = lambda.Body as MemberExpression;
}
if (memberExpr == null)
throw new ArgumentException("method");
return memberExpr;
}
}
寻找它的人的控制器逻辑:
public ActionResult CategoriesAndProducts()
{
var viewModel = new CategoriesAndProductsViewModel();
viewModel.Categories = FetchCategoriesFromDataBase();
viewModel.Products = FetchProductsFromDataBase();
viewModel.CategoryId = viewModel.Categories[0].CategoryId;
viewModel.ProductId = viewModel.Products.Where(p => p.CategoryId).FirstOrDefault().ProductId;
return View(viewModel);
}
不隶属于 StackOverflow