码迷,mamicode.com
首页 > Web开发 > 详细

在.NET MVC下不用iframe实现局部加载html

时间:2015-10-16 01:06:08      阅读:401      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/KeepOnMoving/p/4884026.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!