最近在做个后台系统，之前都是用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. pip安装第三方库以及版本

    这篇blog只是写给自己看看的. 今天突然遇到sqlalchemy映射到数据库时,一个字段类型是datetime(6),我这边死活访问不上,之前一直没有问题,最后查明原因,原来是第三方库的版本问题,真 ...

  2. TTS异步+同步

    微软TTS使用说明 一.SAPI SDK的介绍 SAPI,全称是The Microsoft Speech API.就是微软的语音API.由Windows Speech SDK提供. Windows S ...

  3. java eclipse 连接数据库全过程

    1.需要下载一个jar包.地址 http://pan.baidu.com/s/1i50LRId 2.代码如下: import java.sql.*; public class Mytest { pub ...

  4. 搭建splinter+python环境时遇到的错误

    因为不想用urllib2了,没有用过splinter,今天就想试试,毕竟后者支持的功能更人性化/自动化. 1,安装splinter 安装过程很简单,安装了pip的话,执行: $ [sudo] pip ...

  5. Android 安装和启动另外一个应用

    有时候一个应用需要启动另外一个应用来完成操作,比如在某些应用中打开闹钟,相机,日历等等. 启动或安装相应的应用的方法: Step1:判断是否安装目标应用.只要知道目标应用的安装包名就可以通过判断&qu ...

  6. 开发自定义View

    当开发者打算派生自己的UI组件时,首先定义一个继承View基类的子类,然后重写View类的一个或多个方法,通常可以被用户重写的方法如下:构造器:重写构造器是定制View的最基本方法,当Java代码创建 ...

  7. 用MarkDown来排版写作

    Latex排版系统太复杂,MD很好用,微软开源了一套Madoko的开源在线MD编辑器,它提供了一台MD扩展,可以生成PDF(中间先生成Tex,再生成的PDF),幻灯片还有html.非常方便.写作,写p ...

  8. 8.2.1.10 Nested-Loop Join Algorithms 嵌套循环 关联算法:

    8.2.1.10 Nested-Loop Join Algorithms 嵌套循环 关联算法: MySQL 执行关联在表之间使用一个嵌套循环算法或者变种 Nested-Loop Join Algori ...

  9. 抛出异常的区别 throw 和throw ex

    在面试的过程中提到了异常捕获的的几种用法,之前一直使用但是没有仔细留意,调试程序的过程中发现还是有区别的,主要区别在堆栈信息的起始点不同,下边我们通过实例来看这集中不同的抛出异常的方法. 一般我们推荐 ...

  10. Gradle[0]依赖本地JAR和远程仓库JAR的配置

    1.对本地Jar的依赖配置 如果不知道Jar包的远程仓库地址,而项目中又要使用该Jar包,就需要进行本地设置. 例如,需要使用的Jar包为sigar.jar,则需要在项目根目录下建目录:libs,并把 ...