转载

在.NET MVC下不用iframe实现局部加载html

最近在做个后台系统，之前都是用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>