.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"] %>

--%>


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


这里的就是脚本需要方队位置,只要在标签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" %>





    Baidu


    

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


页面加载后的截图:

.net MVC中如何使用iframe实现局部刷新_第1张图片

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

.net MVC中如何使用iframe实现局部刷新_第2张图片


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

.net MVC中如何使用iframe实现局部刷新_第3张图片

你可能感兴趣的:(C#,MVC,iframe,局部刷新)