【www.bbyears.com--页面特效】

.net MVC中如何使用iframe实现局部刷新

今天有人遇到在MVC中局部刷新问题，可以防止整个也页面进行刷新，出现抖动现象。

网页中的布局还是选用的是table布局，其实DIV+CSS不是一样的原理和操作过程，这里只是示范怎么进行局部刷新。

首先在VS新建一个MVC工程，保证运行正常。

接下来修改Home/Index视图，如下：

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>  
  
  
    主页  
  
  
    <%--
<%: ViewData["Message"] %>
--%>  
      
          
              
              
          
          
              
                click  
              
              
                  
              
          
      

其次，我们要在写button单击事件partRefresh()的js脚本，如下：

<script type="text/javascript">  
    function partRefresh() {  
//            document.getElementById("iframe1Id").src = "http://www.baidu.com";  
        document.getElementById("iframe1Id").src = "/Home/Baidu";  
    }  
</script>

这里的就是脚本需要方队位置，只要在标签content中即可。


接下来我们看看JS脚本中的一行代码：

document.getElementById("iframe1Id").src = "/Home/Baidu";  

在这里的src指定了网址，既可以是我们熟知的各种网站，如 http://www.baidu.com 也可以是我们项目中的视图文件，如这里的“/Home/Baidu”就是HomeController对应的视图Baidu。下面是我的Baidu.aspx文件内容.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>  
  
  
  


    


    
       
    

至此，我们的工作完成了，能够进行局部刷新了，下面是我的截图：


页面加载后的截图：

下图是在单击按钮（注对应的js文件中的是 document.getElementById("iframe1Id").src = "/Home/Baidu";）

下图对应的单击按钮之后的截图（注：js中对应的是document.getElementById("iframe1Id").src = "http://www.baidu.com";）

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

最近在做个后台系统，之前都是用iframe来实现加载内容，左侧菜单不刷新。但一直不喜欢这种方法，有许多弊端。今天自己在网上查找了一番后找到了比较好的替代方案：

一、利用html的锚点标记来实现无刷新页面加载：

Index.cshtml:

    
    
    
    
    @Scripts.Render("~/bundles/jquery")


    Demo1
    

    Demo2
    

    Demo3
    

    
Index
    <script type="text/javascript">
    　　$('a').each(function() {
    　　　　this.onclick = function() {
    　　　　　　$.get(this.href.split('#/~')[1], function(data) {
    　　　　　　　　$('#content').html(data);
    　　　　　　});
    　　　　};
    　　});
    </script>

Demo2.cshtml:

Demo2
Demo2

其它，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

    
    
    
    
    @Scripts.Render("~/bundles/jquery")


    Demo1
    

    Demo2
    

    Demo3
    

    
Index
    <script type="text/javascript">
        $('a').each(function() {
            this.onclick = function () {
                $('#content').load($(this).data("link"));
            };
        });
    </script>

注意是显示内容的容器调用load。

本文来源：http://www.bbyears.com/wangyetexiao/86465.html