在.NETMVC下不用iframe實現(xiàn)局部加載html

2024-04-27 15:01:50

字體：大中小

供稿：網(wǎng)友

最近在做個后臺系統(tǒng)，之前都是用iframe來實現(xiàn)加載內(nèi)容，左側(cè)菜單不刷新。但一直不喜歡這種方法，有許多弊端。今天自己在網(wǎng)上查找了一番后找到了比較好的替代方案：

一、利用html的錨點標(biāo)記來實現(xiàn)無刷新頁面加載：

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>    @Scr</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>