最近在做个后台系统，之前都是用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. jdbc接口api

    java.sql.* 和 javax.sql.* |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接口. |- connect(url, properties): ...

  2. yarn资源调度（网络搜集）

    本文转自:http://www.itweet.cn/2015/07/24/yarn-resources-manager-allocation/ Hadoop YARN同时支持内存和CPU两种资源的调度 ...

  3. New ipad安装Perl支持安装nikto

    Title:New ipad安装Perl支持安装nikto --2012-11-15 09:47 New Ipad 越了后. ssh new ipad 进入目录 cd /tmp 下载Key文件 wge ...

  4. RTSP,RTP,RTCP的区别

    下面的文章讲解的都非常详细,可以参考OpenRTSP的源码学习.这个是live555库里面的工具Demo http://www.360doc.com/content/12/0516/23/782850 ...

  5. Spring 定时任务之 @Scheduled cron表达式

    一个基于Spring boot的一个demo: Java配置中开户对Scheduled的支持 import org.springframework.context.annotation.Configu ...

  6. MFC单文档自定义扩展名及添加图标报Assertion错误

    忽然无聊的想给自己写的程序保存的文件使用自己的名字简写作为后缀,于是有了下文. IDR_MAINFRAME格式介绍 IDR_MAINFRAME字符串资源中包含7个子串,分别以/n结束,即如下格式: & ...

  7. [LeetCode] 55. Jump Game 解题思路

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  8. css(二)

    重新排传智的首页!头部和左边的部分完成了! <!doctype html> <html lang="en"> <head> <meta c ...

  9. 白话C#：特性（转）

    不管怎么样,转过来再说. http://www.kuqin.com/dotnet/20080628/10196.html 系列文章索引:<白话C#> 首先要说的是,可能一些刚接触C#的朋友 ...

  10. jq指定行切换

    function G(){ var item=$('.req_list_item>li'); item.find($('.req_show')).hover(function(){ $(this ...