[转载]Asp.Net MVC2 控件开发实例(1)

[转载]Asp.Net MVC2 控件开发实例(1) – 迈克尔二孬 – 博客园.

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

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

<span class="kwd">public</span><span class="pln"> </span><span class="kwd">static</span><span class="pln"> </span><span class="typ">MvcHtmlString</span><span class="pln"> </span><span class="typ">MultiSelectFor</span><span class="pun">(</span><span class="kwd">this</span><span class="pln"> </span><span class="typ">HtmlHelper</span><span class="pln"> helper</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Expression</span><span class="pun">&</span><span class="pln">gt</span><span class="pun">;</span><span class="pln"> expressionMC</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Expression</span><span class="pun">&</span><span class="pln">gt</span><span class="pun">;</span><span class="pln"> expressionDM</span><span class="pun">,</span><span class="kwd">string</span><span class="pln"> tableName</span><span class="pun">,</span><span class="kwd">string</span><span class="pln"> condition</span><span class="pun">,</span><span class="kwd">string</span><span class="pln"> split</span><span class="pun">,</span><span class="kwd">int</span><span class="pln"> height</span><span class="pun">,</span><span class="kwd">string</span><span class="pln"> caption</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">object</span><span class="pln"> mcHtmlAttributes</span><span class="pun">)</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
</span><span class="typ">StringBuilder</span><span class="pln"> sb </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">StringBuilder</span><span class="pun">();</span><span class="pln">
</span><span class="kwd">string</span><span class="pln"> mcString </span><span class="pun">=</span><span class="pln"> </span><span class="typ">ExpressionHelper</span><span class="pun">.</span><span class="typ">GetExpressionText</span><span class="pun">(</span><span class="pln">expressionMC</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">string</span><span class="pln"> dmString </span><span class="pun">=</span><span class="pln"> </span><span class="typ">ExpressionHelper</span><span class="pun">.</span><span class="typ">GetExpressionText</span><span class="pun">(</span><span class="pln">expressionDM</span><span class="pun">);</span><span class="pln">
 
</span><span class="typ">TagBuilder</span><span class="pln"> tag </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">TagBuilder</span><span class="pun">(</span><span class="str">"input"</span><span class="pun">);</span><span class="pln">
tag</span><span class="pun">.</span><span class="typ">Attributes</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="str">"type"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"text"</span><span class="pun">);</span><span class="pln">
tag</span><span class="pun">.</span><span class="typ">Attributes</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="str">"name"</span><span class="pun">,</span><span class="pln"> mcString</span><span class="pun">);</span><span class="pln">
tag</span><span class="pun">.</span><span class="typ">GenerateId</span><span class="pun">(</span><span class="pln">mcString</span><span class="pun">);</span><span class="pln">
 
</span><span class="kwd">object</span><span class="pln"> mcValue </span><span class="pun">=</span><span class="pln"> </span><span class="typ">ModelMetadata</span><span class="pun">.</span><span class="typ">FromLambdaExpression</span><span class="pun">(</span><span class="pln">expressionMC</span><span class="pun">,</span><span class="pln"> helper</span><span class="pun">.</span><span class="typ">ViewData</span><span class="pun">).</span><span class="typ">Model</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">string</span><span class="pln"> mcValueParameter </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Convert</span><span class="pun">.</span><span class="typ">ToString</span><span class="pun">(</span><span class="pln">mcValue</span><span class="pun">,</span><span class="pln"> </span><span class="typ">System</span><span class="pun">.</span><span class="typ">Globalization</span><span class="pun">.</span><span class="typ">CultureInfo</span><span class="pun">.</span><span class="typ">CurrentCulture</span><span class="pun">);</span><span class="pln">
tag</span><span class="pun">.</span><span class="typ">MergeAttribute</span><span class="pun">(</span><span class="str">"value"</span><span class="pun">,</span><span class="pln"> mcValueParameter</span><span class="pun">);</span><span class="pln">
 
</span><span class="typ">TagBuilder</span><span class="pln"> tagHidden </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">TagBuilder</span><span class="pun">(</span><span class="str">"input"</span><span class="pun">);</span><span class="pln">
tagHidden</span><span class="pun">.</span><span class="typ">Attributes</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="str">"type"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"hidden"</span><span class="pun">);</span><span class="pln">
tagHidden</span><span class="pun">.</span><span class="typ">Attributes</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="str">"name"</span><span class="pun">,</span><span class="pln"> dmString</span><span class="pun">);</span><span class="pln">
tagHidden</span><span class="pun">.</span><span class="typ">GenerateId</span><span class="pun">(</span><span class="pln">dmString</span><span class="pun">);</span><span class="pln">
 
</span><span class="kwd">object</span><span class="pln"> dmValue </span><span class="pun">=</span><span class="pln"> </span><span class="typ">ModelMetadata</span><span class="pun">.</span><span class="typ">FromLambdaExpression</span><span class="pun">(</span><span class="pln">expressionDM</span><span class="pun">,</span><span class="pln"> helper</span><span class="pun">.</span><span class="typ">ViewData</span><span class="pun">).</span><span class="typ">Model</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">string</span><span class="pln"> dmValueParameter </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Convert</span><span class="pun">.</span><span class="typ">ToString</span><span class="pun">(</span><span class="pln">dmValue</span><span class="pun">,</span><span class="pln"> </span><span class="typ">System</span><span class="pun">.</span><span class="typ">Globalization</span><span class="pun">.</span><span class="typ">CultureInfo</span><span class="pun">.</span><span class="typ">CurrentCulture</span><span class="pun">);</span><span class="pln">
tagHidden</span><span class="pun">.</span><span class="typ">MergeAttribute</span><span class="pun">(</span><span class="str">"value"</span><span class="pun">,</span><span class="pln"> dmValueParameter</span><span class="pun">);</span><span class="pln">
</span><span class="typ">RouteValueDictionary</span><span class="pln"> dictionary </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">RouteValueDictionary</span><span class="pun">();</span><span class="pln">
 
</span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">mcHtmlAttributes </span><span class="pun">!=</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">)</span><span class="pln">
tag</span><span class="pun">.</span><span class="typ">MergeAttributes</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">RouteValueDictionary</span><span class="pun">(</span><span class="pln">mcHtmlAttributes</span><span class="pun">));</span><span class="pln">
</span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">mcHtmlAttributes</span><span class="pun">.</span><span class="typ">ToString</span><span class="pun">().</span><span class="typ">Contains</span><span class="pun">(</span><span class="str">"readonly"</span><span class="pun">))</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
dictionary</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="str">"onfocus"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">GetClickEventString</span><span class="pun">(</span><span class="pln">mcString</span><span class="pun">,</span><span class="pln"> dmString</span><span class="pun">,</span><span class="pln"> tableName</span><span class="pun">,</span><span class="pln"> condition</span><span class="pun">,</span><span class="pln"> split</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">,</span><span class="pln"> caption</span><span class="pun">));</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
tag</span><span class="pun">.</span><span class="typ">MergeAttributes</span><span class="pun">(</span><span class="pln">dictionary</span><span class="pun">);</span><span class="pln">
sb</span><span class="pun">.</span><span class="typ">Append</span><span class="pun">(</span><span class="pln">tag</span><span class="pun">.</span><span class="typ">ToString</span><span class="pun">(</span><span class="typ">TagRenderMode</span><span class="pun">.</span><span class="typ">SelfClosing</span><span class="pun">));</span><span class="pln">
sb</span><span class="pun">.</span><span class="typ">Append</span><span class="pun">(</span><span class="pln">tagHidden</span><span class="pun">.</span><span class="typ">ToString</span><span class="pun">(</span><span class="typ">TagRenderMode</span><span class="pun">.</span><span class="typ">SelfClosing</span><span class="pun">));</span><span class="pln">
sb</span><span class="pun">.</span><span class="typ">Append</span><span class="pun">(</span><span class="typ">GetScript</span><span class="pun">(</span><span class="pln">mcString</span><span class="pun">,</span><span class="pln"> dmString</span><span class="pun">,</span><span class="pln">height</span><span class="pun">));</span><span class="pln">
</span><span class="kwd">return</span><span class="pln"> </span><span class="typ">MvcHtmlString</span><span class="pun">.</span><span class="typ">Create</span><span class="pun">(</span><span class="pln">sb</span><span class="pun">.</span><span class="typ">ToString</span><span class="pun">());}</span>

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

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

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

<span class="kwd">private</span><span class="pln"> </span><span class="kwd">static</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="typ">GetScript</span><span class="pun">(</span><span class="kwd">string</span><span class="pln"> modelMCName</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> modelDMName</span><span class="pun">,</span><span class="kwd">int</span><span class="pln"> height</span><span class="pun">)</span><span class="pln">
        </span><span class="pun">{</span><span class="pln">
            </span><span class="typ">StringBuilder</span><span class="pln"> script </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">StringBuilder</span><span class="pun">();</span><span class="pln">
            script</span><span class="pun">.</span><span class="typ">Append</span><span class="pun">(</span><span class="str">"<script type='text/javascript'>"</span><span class="pun">);</span><span class="pln">
            script</span><span class="pun">.</span><span class="typ">Append</span><span class="pun">(</span><span class="str">"$(function () {"</span><span class="pun">);</span><span class="pln">
 
            </span><span class="com">//script.Append("function setMSFloat(){");</span><span class="pln">
            script</span><span class="pun">.</span><span class="typ">Append</span><span class="pun">(</span><span class="str">"$('<form id=formMS name=formMS><div id=divMS></div></form>').appendTo('body');"</span><span class="pun">);</span><span class="pln">
            script</span><span class="pun">.</span><span class="typ">AppendFormat</span><span class="pun">(</span><span class="str">"initDialog('#formMS', '多选', '#divMS', {0}, 480);var s=document.getElementsByName('formMS')[1];$(s).remove();"</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">);</span><span class="pln">
            </span><span class="com">//script.Append("};");</span><span class="pln">
            script</span><span class="pun">.</span><span class="typ">Append</span><span class="pun">(</span><span class="str">"});"</span><span class="pun">);</span><span class="pln">
 
            script</span><span class="pun">.</span><span class="typ">Append</span><span class="pun">(</span><span class="str">"</script>"</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> script</span><span class="pun">.</span><span class="typ">ToString</span><span class="pun">();</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span>

之后是post调用的action:

#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 = new List();

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); } } [/csharp] 注:此处使用了动态类型dynamic m = new System.Dynamic.ExpandoObject();省得还得构建一个Model 页面的html和css: [html] <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl” %>

    <% 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; %>

  • ” style=”color:Black;”><%=dr["MC"].ToString()%>
    ” />
  • <% } } %>

” onclick=”rSelect();” />

” onclick=”lSelect();” />
    <% if (Model.List.Count > 0)
    {
    string hID = string.Empty;
    string hSelector = string.Empty;
    foreach (MSDisplay item in Model.List as List)
    {
    hID = “r_” + item.MSDM;
    hSelector = “#” + hID;
    %>

  • ” style=”color:Black”><%=item.MSMC%>


<%=Html.Hidden("hidMC",Model.MC as string) %>
<%=Html.Hidden("hidDM",Model.DM as string) %>

<%=Html.Hidden("sign", Model.Sign as string)%>
[/html]
至此页面已经可以出来了,下面是控件里面的功能事件脚本:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

注册