最近在做个后台系统，之前都是用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. Android Recovery的汉化 显示中文

    Android Recovery的汉化 显示中文,有需要的朋友可以参考下. 首先下载开源的recovery源码,地址为https://github.com/xiaolu/android_bootabl ...

  2. ESSENTIAL ENGLISH SLANG

    airhead: stupid person. ace: excellent, great. Adam and Eve - Rhyming Slang for 'believe'. aggro - s ...

  3. C# 注销掉事件，解决多播委托链表的问题

    c#的事件是多播委托.当绑定多个事件时,事件会依次触发,清除掉注册的委托链表:方法1  C# Code  12345678910111213141516171819202122232425262728 ...

  4. static在实例Extends、Overload中理解

    在写java程序的时候只在类内部调用的方法定义为private的是个很好的编程习惯.另外子类的static方法和父类有同名.同参数的static方法,但他们之间没什么覆盖.继承的关系,你调用的时候看是 ...

  5. pydev package包中__init__.py作用

    Eclipse用pydev,新建一个pydev package时,总会自动地生成一个空的__init__.py文件. 原来在python模块的每一个包中,都有一个__init__.py文件(这个文件定 ...

  6. LeetCode-Word LadderII

    Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...

  7. Linux之V4L2视频采集编程详解

     V4L2(Video For Linux Two) 是内核提供给应用程序访问音.视频驱动的统一接口. Linux系统中,视频设备被当作一个设备文件来看待,设备文件存放在 /dev目录下,完整路径的设 ...

  8. 教你正确地利用Netty建立连接池

    一.问题描述 Netty是最近非常流行的高性能异步通讯框架,相对于Java原生的NIO接口,Netty封装后的异步通讯机制要简单很多. 但是小K最近发现并不是所有开发人员在使用的过程中都了解其内部实现 ...

  9. java中文乱码解决之道（六）—–javaWeb中的编码解码

    在上篇博客中LZ介绍了前面两种场景(IO.内存)中的java编码解码操作,其实在这两种场景中我们只需要在编码解码过程中设置正确的编码解码方式一般而言是不会出现乱码的.对于我们从事java开发的人而言, ...

  10. Java枚举7常见种用法

    DK1.5引入了新的类型——枚举.在Java中它虽然算个“小”功能,却给我的开发带来了“大”方便. 方法/步骤 用法一:常量 在JDK1.5之前,我们定义常量都是:publicstaticfianl. ...