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

第一次写博客，语言组织能力不行，如有不对的，欢迎提出！

在.NET MVC下不用iframe实现局部加载html的更多相关文章

  1. easyui-tabs 在ie8下基于iframe嵌套页面加载成功后切换空白问题

    这是一个很坑的问题,由于项目必须支持ie8的情况下,产生了这个问题.在我进行逐步对比的分析过后,终于发现了原因所在:

  2. IE下iframe不能正常加载,显示空白

    下午帮忙看了一个web问题,index.html中嵌入<iframe>来加载同文件目录下的一个页面,在多个浏览器下测试,发现IE浏览器中会出现问题,<iframe>不能正常加载 ...

  3. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  4. ListView下拉刷新上拉加载更多实现

    这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...

  5. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  6. 安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载（一分钟搞定，超级简单）

    前言 以前在实现ListView下拉刷新和上拉加载数据的时候都是去继承原生的ListView重写它的一些方法,实现起来非常繁杂,需要我们自己去给ListView定制下拉刷新和上拉加载的布局文件,然后添 ...

  7. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  8. Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理

    RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...

  9. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. python之socket编程

    本章内容 1.socket 2.IO多路复用 3.socketserver Socket socket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,对于文件用[打开][读写][ ...

  2. WinMain与WndProc以及窗口诞生过程总结

    一.int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow) 四个 ...

  3. PHP开发环境设置

    步骤有三个: Apache 服务器安装.PHP 安装和让 Apache 支持 PHP 1. Apache 服务器的安装与配置 基于Windows操作系统支持的PHP开发的服务器有IIS和Apache, ...

  4. Android UI主线程与子线程

    一个Android 程序默认情况只有一个进程,但是一个进程可以有多个线程.其中有一个UI 线程也称为UI主线程,UI Thread在Android程序运行的时候就被创建,主要是负责控制UI界面的显示. ...

  5. LED驅動芯片對LED壽命的影響

    5050年,領導作為一種新型節能光源在世界和中國有非常高的熱情和偉大的問題,不得不贏得市場占有率從室外到室內照明應用,中國也如雨后春筍般涌現在大型和小型LED照明企業.鑒于LED照明的主要原因是其促進 ...

  6. HDOJ 1335 Basically Speaking(进制转换)

    Problem Description The Really Neato Calculator Company, Inc. has recently hired your team to help d ...

  7. HDOJ 1070 Milk(水题，考英文的)

    Problem Description Ignatius drinks milk everyday, now he is in the supermarket and he wants to choo ...

  8. DLL模块：extern "C"的简单解析

    1.揭密extern "C" extern "C"包含双重含义,从字面上即可得到:首先,被它修饰的目标是 "extern”的:其次,被它修饰的目标是 ...

  9. SpringMVC 拦截器（interceptors）对样式（css），JavaScript（js），图片（images）链接的拦截

    因为在web.xml配置了 <servlet-mapping> <servlet-name>appServlet</servlet-name> <url-pa ...

  10. javascript 倒计时天、小时、分钟、描述的倒计时代码

    调用方法 var _TimeCountDown = new TimeCountDown("sttime1",{ startTime:'2016-07-30 10:07:55', / ...