MvcHtmlString 官方文档解释为：表示不应再次进行编码的 HTML 编码的字符串。在MVC 后台生成HTML，然后在前段展示
HtmlHelper 类：表示支持在视图中呈现 HTML 控件，像InputExtensions 类就是包含用于扩展 HtmlHelper 类的方法。每个扩展方法均可呈现 HTML input 元素。InputExtensions类中有以下 input 元素类型可用：
- CheckBox
- RadioButton
- TextBox
- Password
- Hidden
对这两个类有一个了解之后，我们就有一个开发MVC用户自定义控件的途径。基于前边对Ajax.BeginForm 和Ajax.ActionLink的使用经验,借助导航插件smint 插件，开发一个自定义的菜单，传入菜单列表数据，生成一个Treeview一样的菜单，并且点击菜单是无刷新加载子页面。
后端实现
需要实现ajax，必须要引入js jquery.unobtrusive-ajax.min.js 以及实现在标签中添加属性data-ajax- *
具体代码如下：
//MenuHelper 类
public static class MenuHelper
{
///
/// 自定义控件 ajax menu， 必须含有参数 this HtmlHelper helper 实现扩展方法
///
/// HtmlHelper
/// 菜单
/// 加载整个菜单div di
/// 需要刷新区域的html id
/// 需要在加载时的呈现的html id，加载完成后自动隐藏
/// 开始是需要触发的js function
/// 完成后需要触发的 js function
/// 返回 MvcHtmlString 对象
public static MvcHtmlString GetMenus(this HtmlHelper helper,List menus , string id,string replaceId, string loadingId, string onBegin,string onComplete)
{
//新建div标签
var divtag = new TagBuilder("div");
//赋值id
divtag.MergeAttribute("id", id);
//迭代产生menus 和子节点
string Alul = CreateMenuItem(helper, menus, replaceId, loadingId, onBegin, onComplete);
//给div赋值html内容
divtag.InnerHtml = Alul.ToString();
//产生MvcHtmlString对象并返回
return MvcHtmlString.Create(divtag.ToString());
}
private static string CreateMenuItem(this HtmlHelper helper, List menus,string replaceId, string loadingId, string onBegin, string onComplete)
{
string result = string.Empty;
//判断是否继续
if (menus != null)
{
//ul标签
var childuiltag = new TagBuilder("ul");
var itemsurl = string.Empty;
//循环参数li
foreach (var childmenus in menus)
{
var childlitag = new TagBuilder("li");
var childatag = new TagBuilder("a");
var childimgtag = new TagBuilder("img");
var childspantag = new TagBuilder("span");
childspantag.InnerHtml = childmenus.MenuName;
//加载图片
if (!string.IsNullOrEmpty(childmenus.ImangeUrl))
{
childimgtag.InnerHtml = childspantag.ToString();
childimgtag.MergeAttribute("src", childmenus.ImangeUrl);
childatag.InnerHtml = childimgtag.ToString();
}
else
{
childatag.InnerHtml = childspantag.ToString();
}
//实现menu ajax效果
childatag.MergeAttribute("data-ajax", "true");
childatag.MergeAttribute("data-ajax-method", "Post");
childatag.MergeAttribute("data-ajax-mode", "replace");
childatag.MergeAttribute("data-ajax-update", "#" + replaceId);
childatag.MergeAttribute("data-ajax-loading", "#" + loadingId);
//childatag.MergeAttribute("data-ajax-success", "divDisplay");
childatag.MergeAttribute("data-ajax-begin", onBegin);
childatag.MergeAttribute("data-ajax-complete", onComplete);
//实现action 和controller
if (!string.IsNullOrEmpty(childmenus.Action) || !string.IsNullOrEmpty(childmenus.Controller))
{
var urlhelper = new UrlHelper(helper.ViewContext.RequestContext);
var url = urlhelper.Action(childmenus.Action,
new {controller = childmenus.Controller, area = childmenus.Area});
childatag.MergeAttribute("href", url);
}
childlitag.InnerHtml = childatag.ToString();
//子菜单
childlitag.InnerHtml += CreateMenuItem(helper, childmenus.ChildrenMenus, replaceId, loadingId, onBegin, onComplete);
itemsurl += childlitag.ToString();
}
childuiltag.InnerHtml = itemsurl;
result = childuiltag.ToString();
}
return result;
}
}
//Menus类
public class Menus
{
public string MenuID { get; set; }
public string MenuName { get; set; }
public string MenuNode { get; set; }
public int SortNo { get; set; }
public string MenuUrl { get; set; }
public string ImangeUrl { get; set; }
public string Enable { get; set; }
public string Action { get; set; }
public string Controller { get; set; }
public string Area { get; set; }
public List ChildrenMenus { get; set; }
}
前端使用
在BundleConfig.cs 中配置一下js
bundles.Add(new ScriptBundle("~/bundles/mvcajax").Include("~/Scripts/jquery.unobtrusive-ajax.min.js"));
在HomeController中新增一个action GetMenus 实现Menus
public ActionResult GetMenus()
{
List menus = new List();
......具体方法略......
return View(menus);
}
在view GetMenus中 实现菜单加载
@using System.Web.Optimization
@using MvcQueryWeb.App_Data
@model List
@Scripts.Render("~/bundles/menu")
@Scripts.Render("~/bundles/mvcajax")
@Html.GetMenus(Model,"menuid","maintext","menuloading","begin","complete")
在_Layout.cshtml 中的代码片段
调用getmenus
@{ Html.RenderAction("GetMenus", "Home"); }
加载动画效果
刷新部分
@RenderSection("scripts", required: false)
@RenderBody()
最终运行出来的效果如图
图片.png
图片.png
smint 请参考官网： http://www.outyear.co.uk/smint/
css 有少许修改
#menuid {
background-color: #555555;
box-shadow: 0px 0px 5px #888;
}
#menuid ul ul{
visibility:hidden;position:absolute;left:0;top:100%;opacity:0;-moz-transition:all 0.5s;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s,visibility 0.5s;transition:opacity 0.5s;background-color:transparent;background-image:url("bg.png");background-repeat:repeat;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;padding:0 1px 1px;}
#menuid ul li:hover>ul{
visibility:visible;opacity:1;}
#menuid ul li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
#menuid ul li:hover{
z-index:1;}
#menuid ul ul ul{
position:absolute;left:100%;top:0;}
#menuid ul{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
*display:inline;}
* html #menuid ul li a{ height:10px;line-height:10px; display:inline-block;}
#menuid ul>li{
margin:0;}
#menuid ul a:active, #menuid ul a:focus{
outline-style:none;}
#menuid ul a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font-size:small;color:white;cursor:default;padding:3px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
#menuid ul ul li{
float:none;margin:1px 0 0;}
#menuid ul ul a{
text-align:left;padding:10px 15px;background-color:#555555;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:13px Open Sans,Arial,sans-serif;color:#FFFFFF;text-decoration:none;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);}
#menuid ul li:hover>a,#menuid ul li a.pressed{
border-style:none;color:#FFFFFF;text-decoration:none;}
#menuid ul img{
border:none;vertical-align:middle;margin-right:3px;}
#menuid ul span{
display:block;overflow:visible;background-image:url("arrowmain0.png");background-position:right center;background-repeat:no-repeat;padding-right:8px;text-align: center;font-size: 16px}
#menuid ul li:hover>a>span{
background-image:url("arrowmain1.png");}
#menuid ul ul span{
background-image:url("arrowsub.png");padding-right:16px;}
#menuid ul ul li:hover > a span{
background-image:url("arrowsub.png");}
#menuid ul ul li:hover>a,#menuid ul ul li a.pressed{
background-color:#4c4c4c;color:#FFFFFF;text-decoration:none;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);}
#menuid ul>li>a{
padding:20px 10px;}
#menuid ul li.topmenu>a{
background-color:transparent;border-width:4px 0 0 0;border-style:solid;border-color:transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;padding: 20px;font:bold 13px Open Sans,Arial,sans-serif;color:white;text-shadow:none;}
#menuid ul li.topmenu:hover>a,#menuid ul li.topmenu a.pressed{
background-color:#555555;border-style:solid;border-color:rgba(0,0,0,0.1);color:#FFFFFF;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);}