最近在做个后台系统，之前都是用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. C语言初学 简单计算器计算加减乘除程序

    #include<stdio.h> main() { float a,b; char c; printf("输入表达式如a+(* -  /)b:\n"); scanf( ...

  2. SpringMVC——从HelloWorld

    学习SpringMVC——从HelloWorld开始   前言: 时隔十二年,中国女排最终过关斩将,用3:1的成绩证明了自己的实力,霸气夺冠,为中国赢得了一枚意义非常的金牌.这是一次全民的狂欢,一场视 ...

  3. Objective C内存管理之理解autorelease------面试题

    Objective C内存管理之理解autorelease   Autorelease实际上只是把对release的调用延迟了,对于每一个Autorelease,系统只是把该Object放入了当前的A ...

  4. 真正的手机破解wifi密码，aircrack-ng,reaver,仅限mx2（BCM4330芯片）

    仅限mx2(BCM4330芯片),mx可能有戏没测试(BCM4329?),mx3不行. PS:原生安卓应用,非虚拟机 reaver,不知道是啥的看这里http://tieba.baidu.com/p/ ...

  5. ThreadLocal<T>类

    ThreadLocal<T>类                                        -------每个线程有仅拥有一个T对象                   ...

  6. uva 10026 Shoemaker's Problem

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  7. Android Canvas.drawText方法中的坐标参数的正确解释

    摘要 canvas.drawText(www.jcodecraeer.com, x, y, paint); x和y参数是指定字符串中心的坐标吗?还是左上角的坐标?这个问题的直观印象应该是左上角的坐标, ...

  8. mvn 使用中的错误

    出现这种错误的时候:mvn Error building POM may not be this project's POM,报的是那个jar 包,就删除那个jar 包,重新mvn clean ins ...

  9. 我所理解的设计模式（C++实现）——策略模式（Strategy Pattern）

    概述: 每个人都要“交个人所得税”,但是“在美国交个人所得税”和“在中国交个人所得税”就有不同的算税方法. 而策略模式就是对算法进行包装,是把使用算法的责任和算法本身分割开来,委派给不同的对象管理.策 ...

  10. iOS--tableview分组

    -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ ; } -(NSInteger)tableView:(UITable ...