在视图的Model<Vo>里面我们需要使用IEnumerable来将别的列表的数据全部的转化为下拉列表。下面是关于在项目中实际的写法。
一:实现下拉属性列表的写法
通过使用SelectListItem来自动填充到DropDownList中,形成下拉框。
我们想要在前台页面将数据变为下拉就要用到DropDownList这个特性标签来实现,但是使用的前提是要在Action里面进行设置,对Value和Text进行赋值。
下面是属性的写法,是IEnumerable<>接口类型
public class CreatCustomerView
{
public CreatCustomerView()
{
this.Schools = new List<SelectListItem>();
}
/// <summary>
/// 外键
/// </summary>
[Display(Name = "学校"), Required(ErrorMessage = "不能选择为空")]
public Guid SchoolId { get; set; }
/// <summary>
/// 学校的导航属性
/// </summary>
public IEnumerable<SelectListItem> Schools { get; set; }
/// <summary>
/// OpenId:跟微信绑定的唯一表示,从微信处获取
/// </summary>
public string OpenId { get; set; }
}
写成这样就是想将其Schools放在一个集合里面,而且在上面初始化的时候写成了SelectListItem。
SelectListItem代表System.Web.Mvc的实例的选择项。SelectList类。这里将在Action里面进行相关的设置。
IEnumerable<T>接口类型:这个是实现Foreach遍历所必须的,因为所有的集合和数据都继承自这个接口,并且支持非泛型方法的简单迭代,是集合访问器。定义一种扩展方法,用来对数据集合中元素进行遍历,过滤,排序,搜索等操作。
二:在Action里面的写法
这里就是为其Value和Text进行赋值。
public ActionResult ChooseSchool()
{
var entity = new CreatCustomerView();
entity.Schools = _schoolService.GetAll()
.Where(x => x.Id != Guid.Empty)
.Select(x => new SelectListItem
{
Text = x.Name,
Value = x.Id.ToString()
}).ToList();
return View(entity);
}
首先通过GetALL方法来取出数据库表中的数据,通过Select对其进行赋值,转换为ToList()的形式,在将其传到视图。这里就是为其里面赋值,为将来在前台页面进行Foreach做准备。
三:View视图里面的写法
在视图里面是通过HtmlHelper中的DropDownList来实现的,但是DropDownList的现实要通过下面的三个步奏来实现。
其实就是前面两个步奏中的内容,下面是View中的代码。
@{
ViewBag.Title = "选择学校";
Layout = "~/Views/Shared/_LayoutNew.cshtml";
}
@using System.Runtime.InteropServices
@model Express.Weixin.Web.Models.CreatCustomerView
<div class="header"><a href="@Url.Action("Index","Member")" class="btn btn-link btn-xs pull-left">返回</a>选择学校</div>
@using (Html.BeginForm(null, null, FormMethod.Post))
{
<input type="hidden" value="@ViewBag.OpenId" name="OpenId" />
<div class="col-sm-5 center" style="margin: auto;position: absolute; top: 0; left: 0; bottom: 0; right: 0; ">
<br/><br/><br />
@Html.LabelFor(x => x.SchoolId)
@Html.DropDownListFor(x => x.SchoolId, Model.Schools, new { @class = "form-control" })
@Html.ValidationMessageFor(x => x.SchoolId)
<br/>
<input type="submit" class="btn btn-success btn-sm btn-block" value="选择学校"/>
</div>
}
通过里面的@Html.DropDownListFor(x => x.SchoolId, Model.Schools, new { @class = "form-control" }) 来实现下拉的结果。
四:显示结果
附件:DropDownList知识参考资料 http://www.cnblogs.com/kirinboy/archive/2009/10/28/use-dropdownlist-in-asp-net-mvc.html
相关推荐
本教程将详细介绍如何利用DropDownList实现无限级分类的多级下拉效果。 首先,我们需要理解ASP.NET中的DropDownList控件。它是一个Web服务器控件,用于显示一组可选的文本项,用户可以从中进行单选。通常,这些项是...
标题“可输入的DropDownList下拉列表Asp”指的是一个ASP实现的下拉列表,允许用户在下拉框中输入自定义值。这种控件通常通过JavaScript或者AJAX来实现前端交互,同时配合服务器端的ASP代码处理数据验证和提交。 ...
在这个场景中,我们将探讨如何使用DropDownList实现级连效果,以及手动添加下拉列表的值。 1. **级联下拉列表的基本概念**: 级联下拉列表是两个或多个下拉列表之间的联动关系。当用户在第一个下拉列表中做出选择...
本文将深入探讨如何利用DropDownList控件来实现一个功能,即根据用户选择的不同项显示不同的图片。 首先,我们需要理解基本的DropDownList控件的工作原理。DropDownList控件通过Items属性存储一组选项,每个选项...
DropDownList是***中常用的一个Web表单控件,它用于创建下拉列表,用户可以从列表中选择一个或多个选项。在某些情况下,下拉列表中的项并不具备可用于排序的数据库字段,或者出于各种原因我们不希望修改数据库结构。...
asp.net Ajax DropDownList,asp.net下拉列表,自定义DropDownList 1.开发背景: A.Html Select标签不支持输入值 B.风装Ajax js 实现查询,检索数据库信息 C.用户体验. D.支持多选 E.将js和asp.net Web窗体独立开...
本知识点主要讲解如何利用ASP.NET中的`DropDownList`控件,配合`ScriptManager`和`UpdatePanel`组件来实现下拉列表之间的无刷新联动效果。 首先,我们需要了解`DropDownList`控件。`DropDownList`是ASP.NET Web ...
在Web开发中,可以利用JavaScript库如jQuery、React、Vue等,配合AJAX技术来实现动态加载和保存DropdownList的内容。在前端,可以监听DropdownList的事件(如change、input等),然后发送请求到后端。后端则需要处理...
SELDropDownList是一种在C#环境下使用UserControl实现的自定义下拉列表控件,它扩展了ASP.NET标准的DropDownList功能,以提供更灵活的交互性和定制化体验。在AjaxControlToolkit框架下,这种控件能充分利用...
本文将详细介绍如何利用DropDownList控件结合XML数据源来实现这一功能。 首先,我们需要理解DropDownList控件。在ASP.NET中,DropDownList是一个常用的数据输入控件,它显示为一个下拉列表,用户可以从预定义的选项...
本示例中,我们探讨的是如何利用.NET框架结合XML数据来实现中国省市县的三级联动效果,即当用户在DropDownList中选择一个省时,市的下拉列表会自动更新,接着选择市后,县的下拉列表也会动态加载对应的数据。...
在.NET开发环境中,DropDownList控件是经常被用于创建下拉选择列表的元素。这个压缩包"DropDownList事件更改显示图片.rar"似乎包含了一个使用DropDownList控件并且根据选定值改变图片显示的示例项目。下面我们将深入...
本文将详细讲解如何使用AJAX实现dropdownlist(下拉列表)的无刷新动态绑定以及联动效果。 一、AJAX基础 AJAX的核心是通过JavaScript在后台与服务器进行异步数据交换,无需刷新整个页面,即可更新部分网页内容。在...
8. **服务器端和客户端交互**:利用AJAX技术,我们可以实现在不刷新页面的情况下完成下拉列表的动态更新和验证,提高应用的响应速度和用户体验。 通过以上步骤,我们可以成功地重写`DropDownList`控件,让它既具备...
Yii2框架中的dropDownList方法用于创建下拉菜单,这是在Web表单中收集用户输入的常用元素。dropDownList方法允许开发者快速生成带有选项的HTML select元素,并且可以集成到Yii的ActiveForm中,实现数据的绑定。 ...
二、无限级DropDownList实现 在Web开发中,无限级DropDownList通常用于表示层次结构的数据,如组织机构、地区分类等。这个示例可能包含以下组件: 1. 主要的DropDownList:展示顶级分类,选择后触发事件加载下一...
在更复杂的前端框架中,如Vue.js,我们可以利用组件化和数据绑定来实现联动效果,这使得代码更简洁且易于维护: ```vue <!-- 国家选项 --> <!-- 省份选项 --> <!-- 城市选项 --> export ...
在实现`DropDownCheckList`的过程中,开发者通常会利用JavaScript、jQuery或者其他前端框架如Vue、React等进行增强。这些技术可以动态地创建和管理下拉菜单中的复选项,同时处理用户的选中状态并更新显示。为了确保...
总结起来,这个示例展示了如何在Yii框架中利用dropDownList和AJAX实现下拉列表的多级联动效果。关键在于视图中的AJAX配置、控制器的响应处理以及模型的数据库查询。这种功能在实际应用中可以极大地提高用户体验,使...
在IT领域,尤其是在Web开发中,`DropDownList`控件是一种常见的用户界面元素,用于提供一个下拉菜单供用户选择。然而,在某些情况下,我们可能希望`DropDownList`的首行为空,以便用户可以选择“不选择任何选项”或...