Asp.Net MVC2 控件开发实例(2)
以HtmlHelper的形式调用:
<%=Html.MultiSelectFor(m => m.CodeMC, m => m.CodeDM, "dm_jwrylbb","dm<80",",",500,"标题", new { @style = "width:400px" })%>
选择后点击确定,选择项会用分隔符拼接存入文本框,关键信息(如显示项的ID)会存入隐藏域
其中参数按顺序为:文本框ID,隐藏域ID,数据表名称,绑定的数据表过滤条件,分隔符,弹出层高度,标题,htmlAttributes。
思路:在htmlhelper中构建文本框和隐藏域控件,文本框控件赋予onfocus事件,此事件post调用PartialViewResult:ShowView(...),此action绑定弹出层所需model,并返回控件view并填充到弹出层中。先来看helper:(篇幅关系不列出所有重载)
2 {
3 StringBuilder sb = new StringBuilder();
4 string mcString = ExpressionHelper.GetExpressionText(expressionMC);
5 string dmString = ExpressionHelper.GetExpressionText(expressionDM);
6
7 TagBuilder tag = new TagBuilder("input");
8 tag.Attributes.Add("type", "text");
9 tag.Attributes.Add("name", mcString);
10 tag.GenerateId(mcString);
11
12 object mcValue = ModelMetadata.FromLambdaExpression(expressionMC, helper.ViewData).Model;
13 string mcValueParameter = Convert.ToString(mcValue, System.Globalization.CultureInfo.CurrentCulture);
14 tag.MergeAttribute("value", mcValueParameter);
15
16 TagBuilder tagHidden = new TagBuilder("input");
17 tagHidden.Attributes.Add("type", "hidden");
18 tagHidden.Attributes.Add("name", dmString);
19 tagHidden.GenerateId(dmString);
20
21 object dmValue = ModelMetadata.FromLambdaExpression(expressionDM, helper.ViewData).Model;
22 string dmValueParameter = Convert.ToString(dmValue, System.Globalization.CultureInfo.CurrentCulture);
23 tagHidden.MergeAttribute("value", dmValueParameter);
24 RouteValueDictionary dictionary = new RouteValueDictionary();
25
26 if (mcHtmlAttributes != null)
27 tag.MergeAttributes(new RouteValueDictionary(mcHtmlAttributes));
28 if (!mcHtmlAttributes.ToString().Contains("readonly"))
29 {
30 dictionary.Add("onfocus", GetClickEventString(mcString, dmString, tableName, condition, split, height, caption));
31 }
32 tag.MergeAttributes(dictionary);
33 sb.Append(tag.ToString(TagRenderMode.SelfClosing));
34 sb.Append(tagHidden.ToString(TagRenderMode.SelfClosing));
35 sb.Append(GetScript(mcString, dmString,height));
36 return MvcHtmlString.Create(sb.ToString());}
文本框点击事件:(这段折叠显示不出来)
}
其他需要加载的脚本(主要为弹出层初始化代码,弹出层使用了jquery.ui.dialog,具体使用可查官方文档:http://docs.jquery.com/UI/Dialog)
{
StringBuilder script = new StringBuilder();
script.Append("<script type='text/javascript'>");
script.Append("$(function () {");
//script.Append("function setMSFloat(){");
script.Append("$('<form id=formMS name=formMS><div id=divMS></div></form>').appendTo('body');");
script.AppendFormat("initDialog('#formMS', '多选', '#divMS', {0}, 480);var s=document.getElementsByName('formMS')[1];$(s).remove();", height);
//script.Append("};");
script.Append("});");
script.Append("</script>");
return script.ToString();
}
}
之后是post调用的action:
public class MultiSelectController : Controller
{
[HttpPost()]
public PartialViewResult ShowView(string mc, string dm, string table, string condition, string sign, int height, string mcContent,string dmContent)
{
string sql = string.Format("select * from {0} where 0=0 {1}", table, string.IsNullOrEmpty(condition) ? string.Empty : "and " + condition);
System.Data.DataTable dt = ForeignerManagement.Operation.Common.Operation_Common.FillDataTable(sql);
List<MSDisplay> msDisplay = new List<MSDisplay>();
string[] mcArr = mcContent.Split(sign.ToCharArray());
string[] dmArr = dmContent.Split(sign.ToCharArray());
if ((!string.IsNullOrEmpty(mcContent)) && (mcArr.Length == dmArr.Length))
{
for (int i = 0; i < mcArr.Length; i++)
{
msDisplay.Add(new MSDisplay { MSMC = mcArr[i], MSDM = dmArr[i] });
}
}
dynamic m = new System.Dynamic.ExpandoObject();
m.CodeCollection = dt.Rows;
m.MC = mc;
m.DM = dm;
m.Sign = sign;
m.Height = height - 100;
m.ImgHeight = height / 4;
m.List = msDisplay;
return PartialView("~/Views/Shared/MultiSelect.ascx", m);
}
}
#endregion
注:此处使用了动态类型dynamic m = new System.Dynamic.ExpandoObject();省得还得构建一个Model
页面的html和css:
<style type="text/css">
.selectDiv
{
width:200px; border:1px solid #000; height:<%= Model.Height %>px;overflow:auto;
}
.centerDiv
{
height:310px;width:40px;float:left;
}
.imgDiv
{
margin-top:<%= Model.ImgHeight %>px;
}
.imgDiv img
{
vertical-align:middle;cursor:pointer;
}
.leftUL li
{
cursor:pointer;
}
.rightUL li
{
cursor:pointer;
}
</style>
<div>
<div class="selectDiv" style="float:left; ">
<ul class="leftUL">
<% if (Model.CodeCollection != null)
{
string hrefID = string.Empty;
string hrefIDSelector = string.Empty;
foreach (System.Data.DataRow dr in Model.CodeCollection as System.Data.DataRowCollection)
{
hrefID = "l_" + dr["DM"].ToString();
hrefIDSelector = "#" + hrefID;
%>
<li onclick="toggleColor('<%=hrefIDSelector%>');">
<a id="<%=hrefID%>" style="color:Black;"><%=dr["MC"].ToString()%></a>
<input type="hidden" value="<%=dr["DM"].ToString()%>" />
</li>
<% }
} %>
</ul>
</div>
<div class="centerDiv">
<div class="imgDiv">
<img src="<%=Url.Content("~/Content/Images/rightS.png")%>" οnclick="rSelect();" />
<br />
<img src="<%=Url.Content("~/Content/Images/leftS.png")%>" οnclick="lSelect();" />
</div>
</div>
<div class="selectDiv" style="float:left;">
<ul class="rightUL">
<% if (Model.List.Count > 0)
{
string hID = string.Empty;
string hSelector = string.Empty;
foreach (MSDisplay item in Model.List as List<MSDisplay>)
{
hID = "r_" + item.MSDM;
hSelector = "#" + hID;
%>
<li onclick="toggleColor('<%=hSelector%>');">
<a id="<%=hID%>" style="color:Black"><%=item.MSMC%></a>
<input type="hidden" value="<%=item.MSDM%>" />
</li>
<% }
}
%>
</ul>
</div>
</div>
<div class="btnDiv" style="text-align:center; clear:both">
<input id="btnMSConfirm" type='button' value='确定' class="btnS" onclick="msConfirm();" />
<input id="btnMSCancel" type='button' value='取消' class="btnS" onclick="msCancel();" />
<input id="btnMSClear" type='button' value='清除' class="btnS" onclick="msClear();" />
</div>
<%=Html.Hidden("hidMC",Model.MC as string) %>
<%=Html.Hidden("hidDM",Model.DM as string) %>
<%=Html.Hidden("sign", Model.Sign as string)%>
至此页面已经可以出来了,下面是控件里面的功能事件脚本:
//右选
function rSelect() {
var a = '';
var b = '';
var selector = '';
var newA;
var newI;
$('.leftUL li').each(function (i, n) {
if ($(this).children().first().css('color') == 'orange' || $(this).children().first().css('color') == 'rgb(255, 165, 0)') {
var arrV = new Array(1);
arrV[0] = "0";
$.each($('.rightUL input'), function (i, n) {
arrV.push($(this).val());
}
);
if ($.inArray($(this).children().last().val(), arrV) == -1) {
selector = '#r_' + $(this).children().last().val();
newA = "<a id='r_" + $(this).children().last().val() + "' style='color:Black'>"
+ $(this).children().first().html() + "</a>";
newI = "<input type='hidden' value='" + $(this).children().last().val() + "' />";
$('.rightUL').append("<li οnclick=toggleColor('" + selector + "')>" + newA + newI + "</li>");
}
}
}
)
$('.rightUL a').css('color', 'black');
}
//左选
function lSelect() {
$('.rightUL li').each(function (i, n) {
if ($(this).children().first().css('color') == 'orange' || $(this).children().first().css('color') == 'rgb(255, 165, 0)') {
$(this).remove();
}
}
)
}
//点击颜色切换
function toggleColor(e) {
if ($(e).css('color') == 'black' || $(e).css('color') == 'rgb(0, 0, 0)') {
$(e).css('color', 'orange');
}
else {
$(e).css('color', 'black');
}
}
//确定
function msConfirm() {
$('#divMS').dialog('close');
setValToMS();
$('#divMS').empty();
}
//赋值
function setValToMS() {
var sign = $('#sign').val();
var mcSelector = '#' + $('#hidMC').val();
var dmSelector = '#' + $('#hidDM').val();
var mcVal = '';
var dmVal = '';
$('.rightUL a').each(
function (i, n) {
mcVal += $(this).html();
if (i < $('.rightUL a').length - 1) {
mcVal += sign;
}
});
$('.rightUL input[type=hidden]').each(
function (i, n) {
dmVal += $(this).val();
if (i < $('.rightUL input[type=hidden]').length - 1) {
dmVal += sign;
}
});
$(mcSelector).val(mcVal);
$(dmSelector).val(dmVal);
}
//取消
function msCancel() {
$('#divMS').dialog('close');
$('#divHid').empty();
}
//清除
function msClear() {
$('.rightUL').empty();
}
</script>
这里要注意下颜色切换这个方法,功能是鼠标点击一下会变成橘黄色,再点变回黑色
function toggleColor(e) {
$(e).css('color', 'orange');
}
else {
$(e).css('color', 'black');
}
}
在IE下 $(e).css('color')=='black'为true,而在chrome下为false,因为chrome下输出结果为
$(e).css('color') = 'rgb(0, 0, 0)'
转载于:https://www.cnblogs.com/dzxw2371/archive/2011/05/06/2039093.html
Asp.Net MVC2 控件开发实例(2)相关推荐
- 探讨微软ASP.NET AJAX控件开发技术(服务器端)
一.简介 到目前为止,我们已经讨论了开发Ajax控件所涉及的客户端相关技术.现在,让我们来讨论此过程中与服务器端相关的一些技术. 需要说明的是,在[客户端]篇中我们的举例本质上仅是使用ASP.NET ...
- mac下dashboard小控件开发实例(附源码)
1.背景 用mac的用户都应该知道,mac有一个很好的功能,就是dashboard小控件的功能,按下F12键就可以自由切换.博主最近在背GRE单词,就尝试这开发了一个背单词的dash ...
- ASP.NET AJAX 控件开发基础
在 JavaScript 当前广泛使用的版本中,它缺少 .NET 开发人员所熟悉的几个 OOP 的关键概念,而 ASP.NET AJAX 可以模拟其中的大多数,而且 ASP.NET AJAX 的目标是 ...
- Asp.Net用户控件编程实例
新建一个Asp.Net空网站:加入一个Default页: 添加一个web用户控件: 解决方案结构如下: 用户控件页面添加一个Label: <%@ Control Language="C ...
- C# Asp.net Active控件开发全过程
最近在做Active控件的开发,签名高了很久,一直出问题,找了很多网站发现资料都不是全队,当前系统为Win7 系统开发.权当是自己的开发笔记,有问题大家可以一起讨论下,求大家别喷我~~ 1. Acti ...
- ASP.NET AJAX---TimerHiddenField控件小实例 (实现倒计时)
①Default.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
- ASP.NET AJAX---UpdateProgress控件小实例 (实现进度条设置显示图片时间)
①.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default ...
- DateChooser控件发布ASP.NET 2.0新版(我的ASP.NET 2.0控件开发书的第二个阶段项目)[请大家一定注意版本的更新,下载最新版]...
已更新实用版:DateChooser ASP.NET 2.0版 之实用版 请大家一定注意版本的更新,下载最新版 DateChooser的ASP.NET 1.x版在二年前就发布了,二年以来,ASP.NE ...
- 【转】Asp.net控件开发学习笔记整理篇 - Asp.net客户端状态管理
最近一直在做MVC项目,对于WEBFORM 好像快忘记了.周末无聊,顺带看看他人的笔记.再次温习下. 复习大纲: 导航.页面生命周期及其它导论 一.服务器控件生命周期 二.控件开发基础 三.Asp.n ...
- 【转】Asp.net控件开发学习笔记整理篇 - WebControl基类
最近一直在做MVC项目,对于WEBFORM 好像快忘记了.周末无聊,顺带看看他人的笔记.再次温习下. 复习大纲: 导航.页面生命周期及其它导论 一.服务器控件生命周期 二.控件开发基础 三.Asp.n ...
最新文章
- 直接在sublime中运行php
- Spark学习之简介
- mysql与access数据库_mysql数据库和access数据库有什么不同吗?
- android检查usb广播,Android 检测USB 音频设备
- 收集经常使用的.net开源项目
- kafka生产者、消费者消息操作命令
- java jpa hibernate_java - JPA和Hibernate - Criteria与JPQL或HQL
- Jack (Java Android Compiler Kit)
- Redis学习之Sentinel(四)
- 新浪微博和CRM Interaction Center的集成
- python数字转中文字符_Python实现中文数字转换为阿拉伯数字的方法示例
- 背景宽高随文本变化_中科大提出ContourNet:更准确的任意形状场景文本检测新方法...
- 外设驱动库开发笔记19:BMP280压力温度传感器驱动
- android开发屏幕横放,android-即使从横向旋转到垂直,细节片段也会...
- 大数据行业到底有多少种工作岗位,各自的技能需求是什么?
- 从Android应用程序访问Internet需要什么权限?
- 华为交换机导入配置_华为交换机配置文件备份与还原
- java-php-python-ssm抑郁症患者博客交流平台计算机毕业设计
- android开发之Launcher icon(启动图标)的设计
- 分享微信公众号留言评论功能开通方法
热门文章
- sqlplus下无法shutdown情况下不妨试试crsctl stop crs
- IronPython系列:利用.NET SoapFormatter学习SOAP序列化
- mvn clean install 与 mvn install 的区别
- Ubuntu 12.04 MTK环境配置说明
- 重磅:向996开炮!携程带头居家办公。
- 对色情app渗透,我居然发现了 ....
- 刷屏!马化腾:腾讯只是一家普通公司,随时可以被替换
- 2021 软件开发的 5 大趋势,低代码、无代码得到了验证!
- MySQL 的慢 SQL 怎么优化?
- 来我们公司面试必问的41道 SpringBoot 面试题,不看亏大了!