想开发一个控件,功能比较简单,实现这样一个多选功能:一个文本框,点击时弹出层,左侧展示绑定数据表的数据,右侧为选择后的结果,有左选和右选,取消、清除功能,如下图:

以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:(篇幅关系不列出所有重载)

标准的htmlHelper:

 1 public static MvcHtmlString MultiSelectFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expressionMC, Expression<Func<TModel, TValue>> expressionDM,string tableName,string condition,string split,int height,string caption, object mcHtmlAttributes)
 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());}

文本框点击事件:(这段折叠显示不出来)

private static string GetClickEventString(string mcName, string dmName, string tableName, string condition, string split,int height,string caption)
{
StringBuilder sbClick = new StringBuilder();
//sbClick.Append("setMSFloat();");
sbClick.Append("var selectorMC='#'+'" + mcName + "';if($(selectorMC).attr('readonly')==true){return;}");
sbClick.Append("$.post('/FM/MultiSelect/ShowView',{");
sbClick.Append("mc:\"" + mcName + "\",dm:\"" + dmName
+ "\",table:\"" + tableName + "\",condition:\"" + condition + "\",sign:\""
+ split + "\",height:\"" + height + "\",mcContent:$('#" + mcName + "').val(),dmContent:$('#" + dmName + "').val()");
sbClick.Append("},function(data){");
sbClick.Append("$('#divMS').html(data);}");
sbClick.Append(");");
sbClick.Append("$('#divMS').dialog('open');");
sbClick.Append("$('#divMS').dialog({ title: '" + (string.IsNullOrEmpty(caption) ? "多选" : caption) + "' });");
return sbClick.ToString();

}

其他需要加载的脚本(主要为弹出层初始化代码,弹出层使用了jquery.ui.dialog,具体使用可查官方文档:http://docs.jquery.com/UI/Dialog)

View Code

private static string GetScript(string modelMCName, string modelDMName,int height)
        {
            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:

View Code

#region MultiSelectController
    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:

View Code

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<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)%>

至此页面已经可以出来了,下面是控件里面的功能事件脚本:

View Code

<script type="text/javascript">
    //右选
    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) {

if ($(e).css('color') == 'black' || $(e).css('color') == 'rgb(0, 0, 0)') {
            $(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)相关推荐

  1. 探讨微软ASP.NET AJAX控件开发技术(服务器端)

    一.简介 到目前为止,我们已经讨论了开发Ajax控件所涉及的客户端相关技术.现在,让我们来讨论此过程中与服务器端相关的一些技术. 需要说明的是,在[客户端]篇中我们的举例本质上仅是使用ASP.NET ...

  2. mac下dashboard小控件开发实例(附源码)

    1.背景          用mac的用户都应该知道,mac有一个很好的功能,就是dashboard小控件的功能,按下F12键就可以自由切换.博主最近在背GRE单词,就尝试这开发了一个背单词的dash ...

  3. ASP.NET AJAX 控件开发基础

    在 JavaScript 当前广泛使用的版本中,它缺少 .NET 开发人员所熟悉的几个 OOP 的关键概念,而 ASP.NET AJAX 可以模拟其中的大多数,而且 ASP.NET AJAX 的目标是 ...

  4. Asp.Net用户控件编程实例

    新建一个Asp.Net空网站:加入一个Default页: 添加一个web用户控件: 解决方案结构如下: 用户控件页面添加一个Label: <%@ Control Language="C ...

  5. C# Asp.net Active控件开发全过程

    最近在做Active控件的开发,签名高了很久,一直出问题,找了很多网站发现资料都不是全队,当前系统为Win7 系统开发.权当是自己的开发笔记,有问题大家可以一起讨论下,求大家别喷我~~ 1. Acti ...

  6. ASP.NET AJAX---TimerHiddenField控件小实例 (实现倒计时)

    ①Default.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...

  7. ASP.NET AJAX---UpdateProgress控件小实例 (实现进度条设置显示图片时间)

    ①.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default ...

  8. DateChooser控件发布ASP.NET 2.0新版(我的ASP.NET 2.0控件开发书的第二个阶段项目)[请大家一定注意版本的更新,下载最新版]...

    已更新实用版:DateChooser ASP.NET 2.0版 之实用版 请大家一定注意版本的更新,下载最新版 DateChooser的ASP.NET 1.x版在二年前就发布了,二年以来,ASP.NE ...

  9. 【转】Asp.net控件开发学习笔记整理篇 - Asp.net客户端状态管理

    最近一直在做MVC项目,对于WEBFORM 好像快忘记了.周末无聊,顺带看看他人的笔记.再次温习下. 复习大纲: 导航.页面生命周期及其它导论 一.服务器控件生命周期 二.控件开发基础 三.Asp.n ...

  10. 【转】Asp.net控件开发学习笔记整理篇 - WebControl基类

    最近一直在做MVC项目,对于WEBFORM 好像快忘记了.周末无聊,顺带看看他人的笔记.再次温习下. 复习大纲: 导航.页面生命周期及其它导论 一.服务器控件生命周期 二.控件开发基础 三.Asp.n ...

最新文章

  1. 直接在sublime中运行php
  2. Spark学习之简介
  3. mysql与access数据库_mysql数据库和access数据库有什么不同吗?
  4. android检查usb广播,Android 检测USB 音频设备
  5. 收集经常使用的.net开源项目
  6. kafka生产者、消费者消息操作命令
  7. java jpa hibernate_java - JPA和Hibernate - Criteria与JPQL或HQL
  8. Jack (Java Android Compiler Kit)
  9. Redis学习之Sentinel(四)
  10. 新浪微博和CRM Interaction Center的集成
  11. python数字转中文字符_Python实现中文数字转换为阿拉伯数字的方法示例
  12. 背景宽高随文本变化_中科大提出ContourNet:更准确的任意形状场景文本检测新方法...
  13. 外设驱动库开发笔记19:BMP280压力温度传感器驱动
  14. android开发屏幕横放,android-即使从横向旋转到垂直,细节片段也会...
  15. 大数据行业到底有多少种工作岗位,各自的技能需求是什么?
  16. 从Android应用程序访问Internet需要什么权限?
  17. 华为交换机导入配置_华为交换机配置文件备份与还原
  18. java-php-python-ssm抑郁症患者博客交流平台计算机毕业设计
  19. android开发之Launcher icon(启动图标)的设计
  20. 分享微信公众号留言评论功能开通方法

热门文章

  1. sqlplus下无法shutdown情况下不妨试试crsctl stop crs
  2. IronPython系列:利用.NET SoapFormatter学习SOAP序列化
  3. mvn clean install 与 mvn install 的区别
  4. Ubuntu 12.04 MTK环境配置说明
  5. 重磅:向996开炮!携程带头居家办公。
  6. 对色情app渗透,我居然发现了 ....
  7. 刷屏!马化腾:腾讯只是一家普通公司,随时可以被替换
  8. 2021 软件开发的 5 大趋势,低代码、无代码得到了验证!
  9. MySQL 的慢 SQL 怎么优化?
  10. 来我们公司面试必问的41道 SpringBoot 面试题,不看亏大了!