• ASP.NET MVC学习之视图篇(2)


    ASP.NET MVC学习之视图(1)学习

    4.HTML辅助器

    虽然在ASP.NET MVC中我们已经摆脱了ASP.NET控件,但是对于页面中需要循环标签的情况依然还是存在,可能很多人认为用foreach就可以完成,但是这个仅仅只是针对单个循环,如果多个循环中都要使用到同样的标签呢?下面笔者就介绍两种方式让我们事半功倍

     

    首先是针对单个页面的内联辅助器,如果我们遇到只要在单个页面中不断使用的标签的时候,这个方式非常的轻便,比如下面的代码根据文本内容和样式类生成li标签的辅助器(Views/Home/Index.cshtml中):

     1 @helper CreateCssLi(String name,String css)
     2 {
     3     <li class="@css" >@name</li>
     4 }
     5 
     6 <ul>
     7     @foreach (var item in new[] { new { Name = "ADS", Css = "abs" }, new { Name = "adasd", Css = "afasf" } })
     8     {
     9         @CreateCssLi(item.Name, item.Css)
    10     }
    11 </ul>

     这里我们使用了 @helper 生成了一个内联辅助器,并且在下面通过foreach使用了这个内联辅助器,虽然内联辅助器很轻便,但是对于需要在多个视图中使用时,需要在每个页面中写入@helper,所以下面我们还要介绍外部辅助器,能够让我们在不同的页面中也能够使用,我们将上面的内联辅助器改写成如下的外部辅助器

    首先我们新建一个Helper文件夹然后在其中新建一个HtmlHelperExt类,并在其中写入如下代码

     1 namespace MvcStudy.Helper
     2 {
     3     public static class HtmlHelperExt
     4     {
     5         public static MvcHtmlString CreateCssLi(this HtmlHelper s,String name,String css)
     6         {
     7             var li = new TagBuilder("li");
     8             li.AddCssClass(css);
     9             li.SetInnerText(name);
    10             return new MvcHtmlString(li.ToString());
    11         }
    12     }
    13 }

    通过对HtmlHelper进行扩展,那么我们就可以在视图中通过@Html使用我们扩展的方法了,当然仅仅完成这步还不够,在ViewsWeb.config中添加这个命名空间:

     1 <pages pageBaseType="System.Web.Mvc.WebViewPage">
     2       <namespaces>
     3         <add namespace="System.Web.Mvc" />
     4         <add namespace="System.Web.Mvc.Ajax" />
     5         <add namespace="System.Web.Mvc.Html" />
     6         <add namespace="System.Web.Optimization"/>
     7         <add namespace="System.Web.Routing" />
     8         <add namespace="MvcStudy.Helper"/>
     9       </namespaces>
    10 </pages>

     如果读者不想修改配置文件,也有另外一个方法,就是将HtmlHelperExtnamespace改成System.Web.Mvc,最后的效果都一样。

    5.分段

    相信很多从事ASP.NET的开发人员都使用过母版,而且我们会根据需要在母版中放入ContentPlaceHolder控件作为占位符,那么在最终的内容页面中就会生成同样多的Content控件,这样我们就可以灵活的对页面进行组合。当然这门技术在ASP.NET MVC中依然还是存在,当读者新建一个基本的ASP.NET MVC项目后都会自动的新建好一个母版页面,就是Views/Shared/Layout.cshtml,我们可以打开这个视图,可以发现 @RenderBody() 方法,这个方法其实就是整个内容页的占位符,当然大家一定会问那怎么实现跟ASP.NET一样的效果呢,这个时候分段上场,我们修改_Layout.cshtml的代码:

    1 <body>
    2     @RenderSection("head")
    3 
    4     @RenderBody()
    5 
    6     @RenderSection("foot")
    7     @Scripts.Render("~/bundles/jquery")
    8     @RenderSection("scripts", required: false)
    9 </body>

    这里通过调用@RenderSection输出内容页中的headfoot,剩下来我们修改Views/Home/Index.cshtml视图:

    1 @section head{
    2     <h1>来自head</h1>
    3 }
    4 
    5 <h1>来自body</h1>
    6 
    7 @section foot{
    8     <h1>来自foot</h1>
    9 }

    通过使用@section划分段,然后在其中就可以写入内容了,最后我们可以看到效果如下所示

    但是我们将Index.cshtml中删除一个分段后重新打开,就会报错。因为有时候我们内容页不需要在某个分段中写入内容,如果像上面这样就意味着即使不需要使用也要写这个分段,从而影响视图,当然这个也是有解决方案的,下面我们重新修改_Layout.cshtml面:

     1 <body>
     2     @RenderSection("head")
     3 
     4     @RenderBody()
     5 
     6     @if(IsSectionDefined("foot"))
     7     {
     8         @RenderSection("foot")
     9     }
    10     else
    11     {
    12         <h1>默认的foot</h1>
    13     }
    14     
    15     @Scripts.Render("~/bundles/jquery")
    16     @RenderSection("scripts", required: false)
    17 </body>

     这里我们首先通过@IsSectionDefined判断某个分段是否存在,如果存在则输出,否则输出默认内容,但是我们发现这样还是有点麻烦,有时候我们并没有默认内容,如果不存在这个分段就不显示,所以我们还可以继续修改成如下所示:

     1 <body>
     2     @RenderSection("head")
     3 
     4     @RenderBody()
     5 
     6 
     7         @RenderSection("foot",false)
     8 
     9     
    10     @Scripts.Render("~/bundles/jquery")
    11     @RenderSection("scripts", required: false)
    12 </body>

     我们仅仅在@RenderSection输入了第二个参数为false,这个参数的含义就是这个分段是否是可选。

    6.分布视图

    上面我们采用了两种辅助器都可以减少我们输入html的数量,但是并不能书写大量的html代码,所以我们还需要一中能够将大量html进行合并,以便视图中随时使用,这个时候我们就可以使用分布视图了,首先我们在Views/Shared下新建视图:

    这个要勾选!

    笔者的命名为PartialTest,然后我们可以在其中随意写什么。接着我们在Views/Home/Index.cshtml中使用这个分布视图

    1 @section head{
    2     <h1>来自head</h1>
    3 }
    4 
    5 <h1>来自body</h1>
    6 
    7 @Html.Partial("PartialTest")

    最后我们看到最终的页面中输出了分布视图的内容。但是这种方式仅仅只能解决简单的功能,如果你的分布视图需要涉及到一点功能性的代码,那么它操作起来就比较麻烦了,所以下面我们还需要子动作的帮助。首先我们在Views/Home/Index中新建一个ChildAction视图(注意需要把Layout设置为NULL),然后在Home控制器中写入如下代码:

    1         [ChildActionOnly]
    2         public ActionResult ChildAction()
    3         {
    4             ViewBag.Msg = "来自子动作";
    5             return View();
    6         }

    同时我们还需要修改Views/Home/Index视图中的代码如下:

    1 @section head{
    2     <h1>来自head</h1>
    3 }
    4 
    5 <h1>来自body</h1>
    6 
    7 @Html.Action("ChildAction")

    这里注意我们使用的是@Html.Action而不是@Html.Partial,然后我们重新build下然后刷新页面就可以看到子动作的内容了:

    关于ASP.NET MVC自带的Html辅助器笔者这里就不介绍了,因为相关的教程很多,而且使用很快就能上手,至此ASP.NET MVC的视图部分就到此为止了。

  • 相关阅读:
    Codeforces Round #297 (Div. 2)D. Arthur and Walls 暴力搜索
    Codeforces Round #297 (Div. 2)C. Ilya and Sticks 贪心
    Codeforces Round #297 (Div. 2)B. Pasha and String 前缀和
    Codeforces Round #297 (Div. 2)A. Vitaliy and Pie 水题
    BZOJ 1191: [HNOI2006]超级英雄Hero 匈牙利算法
    Codeforces Round VK Cup 2015
    Codeforces Round #296 (Div. 1) C. Data Center Drama 欧拉回路
    BZOJ 1059: [ZJOI2007]矩阵游戏 匈牙利算法
    UOJ #17. 【NOIP2014】飞扬的小鸟 背包DP
    Hibernate自定义字段查询
  • 原文地址:https://www.cnblogs.com/yaozhenfa/p/asp_net_mvc_view_2.html
Copyright © 2020-2023  润新知