zoukankan      html  css  js  c++  java
  • ASP.NET MVC学习---(八)三个比较常用的方便的功能

    通过之前的了解

    现在我们已经可以使用mvc进行一些简单的开发

    但是还不够

    哪里不够呢?

    为什么现在的程序员喜欢用mvc进行开发

    不就是因为它爽吗?

    之前介绍的那些特点仅仅是mvc框架的一小部分

    只是一丢丢而已啦~

    今天就来补充三个常用的,方便程序员开发的功能


    1.js/css合并

    在之前的crud例子中,我们引入js/css脚本的方式和平常的web开发一样

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

    但是mvc框架提供了一个强大的js/css脚本合并功能

    我们找到App_Start文件夹下的BundleConfig.cs类

    双击打开

    虽然代码看不懂,但是我们可以从中看到一大堆引入js和css脚本的路径

    下面我们模仿其格式,尝试自己添加

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.unobtrusive*",
                            "~/Scripts/jquery.validate*"));
    
    
                //自己添加的ScriptBundle--MyScript
                bundles.Add(new ScriptBundle("~/bundles/MyScript")
                    .Include("~/Scripts/jquery-1.8.2.min.js",
                    "~/Scripts/jquery.validate.min.js",
                    "~/Scripts/jquery.validate.unobtrusive.min.js"));
    //开启合并压缩功能
                BundleTable.EnableOptimizations = true;

    ok,搞定~

    这就完成了j脚本的合并引用

    那么之前的视图页就不需要之前的方式了

    现在我们将原来的三个js脚本引用删掉

    换上新代码

    @Scripts.Render("~/bundles/MyScript")//此处的路径填写new ScriptBundle("~/bundles/MyScript")中的路径名,这是可以随意命名的,譬如也可以变这样:new ScriptBundle("~myjs")

    我们通过开发人员工具来看看两次的对比

    未使用js合并之前

    发送了三个js请求到服务器

    使用js合并之后

    三个请求合为一个,当程序规模比较大的时候页面中的js/css引用非常多,如果按照正常的方式来引用脚本会向服务器发送大量的请求

    js合并功能帮我们解决了这个问题,而且它不仅仅是将三个js文件合并在一起,还进行了压缩优化,可以通过服务器的相应正文看到


    使用css合并压缩也是一样的,根据BundleConfig.cs中的格式添加一个StyleBundle在引用就搞定~

    神技能,get it!


    2.HtmlHelper,UrlHelper

    在mvc框架中为程序员提供了一些能够进行快速看法的帮助类

    下面举例子介绍HtmlHelper和UrlHelper类

    (1)Url.Action与Url.RouteUrl

    回想一下之前的crud例子

    我们在写url地址的时候都是直接写死的

    例如:

    <td>
                        <a href="/Home/Create">新增</a>
                    </td>

    这样看起来似乎没有什么问题

    但是在mvc中这就是一个隐藏的巨大问题

    因为在mvc中,我们可以随意的通过配置路由在更改url的请求格式!

    routes.MapRoute(
                    name: "Default",
                    //之前的路由配置
                    //url: "{controller}/{action}/{id}",
                    //现在改为:
                    url: "{action}/{controller}/{id}",
                    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
                );

    这么一来,新增超链接请求的就是Create控制器下面的Home方法

    但是服务器端只有Home控制器下的Create方法!如果不对url进行修改的话会返回无法找到该方法的错误

    那么就改呀

    但是仔细想想

    如果项目规模非常大,url非常多

    难道要一个个去改吗?!

    先不说花费大量功夫终于改完了

    突然接到通知说路由配置又要改

    oh~shit!

    但是不要慌~

    万能的mvc框架为你提供了解决方案~

    将之前的url改为使用UrlHelper的格式

    使用Url.Action方法

    第一个参数指定action方法名,第二个参数指定控制器名

    之后生成运行,查看生成的新增超链接

    搞定~而且使用UrlHelper类生成的超链接是根据路由配置来生成的

    程序员再也不用操心前台url的格式了~

    (但是这里看到这个url有点奇怪,怎么只有Create没有Home,这是因为在路由配置中默认的控制器就是Home,而默认的action为Index,如果请求的控制器或者action方法是默认的它直接省略不写~)

    使用Url.Action方法是根据路由表中的第一个路由来生成的

    但是通常路由表中的路由不仅仅是一个,也有可能很多个

    这时候如果我们需要根据第n个路由配置来生成url怎么搞?

    使用Url.RouteUrl方法

    如图所示

    该方法可以根据指定的路由名称来生成url

    (2)HtmlHelper

    HtmlHelper中提供了大量生成html代码的方法让程序员可以进行快速开发

    而且HtmlHelper生成的html代码都是原声的

    也就是说并不像是WebForm中服务器控件那样的繁重

    但是其拥有服务器控件那样的开发效率

    Html.ActionLink

    该方法根据指定的action和控制器来生成超链接(具有UrlHelper生成的一样效果哟~)

    使用Html.BeginForm生成表单标签

    using (Html.BeginForm("Modify", "Home", FormMethod.Post, new {id = "fmSubmit"}))
            {
                
            }

    HtmlHelper类的方法实在是太多= =

    本来想多用几个,但是可能最后会导致文章n长(还狡辩,就说是自己懒的吧。。)

    方法的使用方式都是大同小异的

    多用几遍就可以很熟悉~


    3.实体验证

    在进行web开发的过程中

    为了保证数据的安全性和正确型钢

    服务器和浏览器端的数据检

    校验都是必不可少的

    在之前的开发方式中

    我们不仅仅要在前台页面中书写大量的js代码来进行浏览器端的验证

    还要在后台中接收参数并在此验证

    而这些验证方法通常是千篇一律的

    在此我们可以使用一个非常爽的功能---实体验证

    来帮我们做这些繁琐的验证工作

    怎么做呢?

    很简单

    首先需要引入js脚本文件

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

    这里也可以用前面说的js合并,为了方便看清楚就直接引用了~

    之后,也是最爽的一步

    找到之前的T_Users实体类,在UserName字段中加入特性

    //设置该字段必填
            [Required]
            //设置该字段长度最小为2,最大为5
            [StringLength(5, MinimumLength = 2)]
            public string UserName { get; set; }

    好了,服务器端的验证就写好了~

    在前台页面使用强类型方法生成html标签

    @*根据UserName生成文本框*@
            @Html.TextBoxFor(u=>u.UserName)
            @*如果UserName字段校验不合格出现的错误消息提示*@
            @Html.ValidationMessageFor(u=>u.UserName)

    现在浏览器段会自动开启校验功能

    而在后台只需要一句代码

    //如果通过校验则返回true,否则返回false
                if (ModelState.IsValid)
                {}

    ok,搞定~

    实体的特性有很多很多

    比如

    remote用来远程验证字段是否重复等

    compare用来对比两个字段是否相等

    有兴趣的同学可以自己找找资料多多学习~



    最后,asp.net mvc开发的方便和快捷不是一言两语就可以描述出来的

    也可能是因为菜鸟水平不够无法表达~

    但是

    相信我们在使用mvc的时候可以体会到它的魅力所在

    之后引导我们更进一步的学习~



     



    
  • 相关阅读:
    祭蟑螂文
    端午随笔
    有感于一个用户的留言
    jQuery UI dialog插件出错信息:$(this).dialog is not a function
    @@ERROR, BEGIN TRY/CATCH and XACT_ABORT
    检索 COM 类工厂中 CLSID 为{0002450000000000C000000000000046} 的组件时失败,原因是出现以下错误: 80070005。
    【SSB】使用命令行来检测Broker是否正常通信
    C#保留2位小数总结
    引用了混乱的组件或类库可能会导致WCF代理类无法正确生成
    [转]从属性赋值到MVVM模式详解
  • 原文地址:https://www.cnblogs.com/jchubby/p/4429716.html
Copyright © 2011-2022 走看看