MvcHtmlString HtmlHelper 开发MVC用

作者: SMILE_NO_09 | 来源:发表于2018-02-09 14:32 被阅读66次

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
    {
        /// <summary>
        ///  自定义控件 ajax menu， 必须含有参数 this HtmlHelper helper 实现扩展方法
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="menus">菜单</param>
        /// <param name="id">加载整个菜单div di</param>
        /// <param name="replaceId">需要刷新区域的html id</param>
        /// <param name="loadingId">需要在加载时的呈现的html id，加载完成后自动隐藏</param>
        /// <param name="onBegin">开始是需要触发的js function</param>
        /// <param name="onComplete">完成后需要触发的 js function</param>
        /// <returns>返回  MvcHtmlString 对象</returns>
        public static MvcHtmlString GetMenus(this HtmlHelper helper,List<Menus> 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> 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<Menus> 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> menus = new  List<Menus>();
            ......具体方法略......
            return View(menus);
        }

在view GetMenus中实现菜单加载

@using System.Web.Optimization
@using MvcQueryWeb.App_Data
@model List<Menus>

@Scripts.Render("~/bundles/menu")
@Scripts.Render("~/bundles/mvcajax")

<script type="text/javascript">
    function begin() {
        $("#loading").fadeIn("slow");
        $("#maintext").empty();
    }
    function complete() {
        $("#loading").fadeOut("slow");
    }
</script>

@Html.GetMenus(Model,"menuid","maintext","menuloading","begin","complete")

    <div id="menuloading" style="display: none;">
        <div class ="cover"></div>
     <div class ="coffee_cup">loading</div> 
     </div>

在_Layout.cshtml 中的代码片段
调用getmenus

 <div class='subMenu'>
  @{ Html.RenderAction("GetMenus", "Home"); }
 </div>

加载动画效果

        <script type="text/javascript">
            $(document).ready(function () {
                $('.subMenu').smint({
                    'scrollSpeed': 1000
                });
            });
        </script>

刷新部分

            <div class="content-center"  id ="maintext">
               @RenderSection("scripts", required: false)                
                @RenderBody()                   
            </div>

最终运行出来的效果如图

图片.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);}

MvcHtmlString HtmlHelper 开发MVC用

后端实现

前端使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读