最近在做個后台系統，之前都是用iframe來實現加載內容，左側菜單不刷新。但一直不喜歡這種方法，有許多弊端。今天自己在網上查找了一番后找到了比較好的替代方案：
一、利用html的錨點標記來實現無刷新頁面加載：
Index.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>局部刷新demo</title> @Scripts.Render("~/bundles/jquery") </head> <body> <a href="#/~Demo1">Demo1</a> <br> <a href="#/~Demo2">Demo2</a> <br> <a href="#/~Demo3">Demo3</a> <br> <div id="content"><h1>Index</h1></div> <script type="text/javascript"> $('a').each(function() { this.onclick = function() { $.get(this.href.split('#/~')[1], function(data) { $('#content').html(data); }); }; }); </script> </body> </html>
Demo2.cshtml:
<h2>Demo2</h2> <h2>Demo2</h2>
其它，demo1，demo3就不貼上來了。
DemoController：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcDemo.Controllers { public class DemoController : Controller { // GET: Demo public ActionResult Index() { return View(); } public ActionResult Demo1() { return View(); } public ActionResult Demo2() { return View(); } public ActionResult Demo3() { return View(); } } }
然后運行就可以看到效果了。弊端就是地址欄路徑會顯示點擊加載頁面的路徑。
二、利用jQuery.load()方法
方法說明：load(url,[data],[callback]);
load方法與html方法類似，不過load是遠程加載html代碼，而且被加載的html里包含的js可以正常運行。廢話不多說，上代碼：
Index.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>局部刷新demo</title> @Scripts.Render("~/bundles/jquery") </head> <body> <a href="#" data-link="Demo1">Demo1</a> <br> <a href="#" data-link="Demo2">Demo2</a> <br> <a href="#" data-link="Demo3">Demo3</a> <br> <div id="content"><h1>Index</h1></div> <script type="text/javascript"> $('a').each(function() { this.onclick = function () { $('#content').load($(this).data("link")); }; }); </script> </body> </html>
注意是顯示內容的容器調用load。
第一次寫博客，語言組織能力不行，如有不對的，歡迎提出！