MVC 打包压缩
1、压缩捆绑
1.1 App_Start文件夹下
public class BundleConfig { // 有关捆绑的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkId=301862 public static void RegisterBundles(BundleCollection bundles) { //创建一个虚拟目录“~/bundles/jquery” 这个虚拟目录的名字可以随便你取（用一个虚拟路径来初始化Bundle的实例，这个路径并不真实存在） bundles.Add(new ScriptBundle("~/bundles/jquery").Include( //在虚拟目录中添加了绝对路径的js文件，与版本无关 "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); // 使用要用于开发和学习的 Modernizr 的开发版本。然后，当你做好 // 生产准备就绪，请使用 https://modernizr.com 上的生成工具仅选择所需的测试。 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); } }
1.2 _ViewStart.cshtml 指定布局
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - 我的 ASP.NET 应用程序</title> <!--这里也可以引入自己的文件--> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <!--添加ajax的包，在NuGet中搜索ajax--> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <!--这样就相当于把BundleConfig.cs文件中 bundles.Add(new StyleBundle("~/Content/css")中添加的css文件全部都引入进来了--> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("主页", "Index", "Home")</li> <li>@Html.ActionLink("关于", "About", "Home")</li> <li>@Html.ActionLink("联系方式", "Contact", "Home")</li> </ul> @Html.Partial("_LoginPartial") <!--在这里添加登录内容--> </div> </div> </div> <div class="container body-content"> @RenderBody() <!--在这里插入body的内容,注意这些都是在body标签结束之前，包括@section scripts--> <hr /> <footer> <p>© @DateTime.Now.Year - 我的 ASP.NET 应用程序</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) <!--这里的意思是在其他页面使用 @section scripts{<script>.... </script}--> </body> </html>
1.3 在web.config中
debug=“true”允许调试，这样断点进去可以调试。 一般在发布时改为false，这样js 、css文件就被压缩了，注释空格等都被删了，为了减少页面请求，优化客户体验。
1.4 使用ajax
- 页面要引入：jquery-3.3.1.min.js、jquery.unobtrusive-ajax.min.js
@{ ViewBag.Title = "Home Page"; } <div id="d1" style="height:200px;width:400px;border:1px solid red;background-color:yellow"> </div> <div class="row"> <div class="col-md-4"> <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p> </div> </div> <div class="row"> <i class="btn btn-primary" id="c"> Click here to see today's special! </i> <div class="col-md-12" id="ShowMsg"> </div> </div> @section scripts{ <script> $(function () { //从服务器获取数据并且将返回的html代码插入到匹配的元素中 $("#d1").load("Contact"); }); $("#c").click(function () { console.log(1); //开始不知道这里会不会进来，就加alert(), console.log()进行调试 $.ajax({ type: 'get', //默认为get url: "@Url.Action("DailyDeal")", timeout: 1000, //请求超时时间，默认毫秒 data: 'type=3&str=xx', //发送到服务器的数据，键值对或字符串 cache: 'false', //设置浏览器缓存 dataType: 'html', //可以使json、html、xml //sucess中的data是从服务器返回的数据，并根据dataType参数类型处理后的数据，默认是json success: function (data) { $("#ShowMsg").html(data) } }); }); </script> }
$(document).ready(function () { 2 $("#btn1").click(function () { 3 var data = ""; 4 var name = $("#txtName").val(); 5 var age = $("#txtAge").val(); 6 data += "&Name=" + encodeURI(name); 7 data += "&Age=" + encodeURI(age); 8 $.ajax({ 9 async: true, 10 cache: false, 11 timeout: 60 * 60 * 1000, 12 data: data, 13 type: "GET", 14 datatype: "JSON", 15 url: "/Ajax/AddUsers", 16 success:function(result) 2 { 3 result = JSON.parse(result); 4 $("#display").text(result.Name + result.Message); 5 }, 20 error: function (result) { 21 $("#display").html("error"); 22 }, 23 }) 24 }); public ActionResult DoWithUsers() 2 { 3 var my = new MyModel(); 4 try 5 { 6 this.UpdateModel(my); 7 string name = my.Name; 8 int age = my.Age; 9 string temp = ""; 10 if (age < 18) temp = "的文章好烂啊"; 11 else temp = ",记得烂也要写"; 12 JavaScriptSerializer jss = new JavaScriptSerializer(); 13 return Json(jss.Serialize(new { Name = name, Message = temp }), JsonRequestBehavior.AllowGet); 14 } 15 catch(Exception ex) 16 { 17 return null; 18 } 19 }
