.net MVC中如何使用iframe实现局部刷新
今天有人遇到在MVC中局部刷新问题，可以防止整个也页面进行刷新，出现抖动现象。
网页中的布局还是选用的是table布局，其实DIV+CSS不是一样的原理和操作过程，这里只是示范怎么进行局部刷新。
首先在VS新建一个MVC工程，保证运行正常。
接下来修改Home/Index视图，如下：
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 主页 </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <%--<h2><%: ViewData["Message"] %></h2>--%> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr style="width: 1000px; height: 100px"> <td style="width:1000px" colspan="2"> </td> </tr> <tr style="height: 400px"> <td style="width: 200px"> <button id="btOne" onclick="partRefresh()">click</button> </td> <td> <iframe id="iframe1Id" name="I1" style="height: 370px; width: 860px" src="http://www.sina.com"> </iframe> </td> </tr> </table> </asp:Content>
其次，我们要在写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<dynamic>" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Baidu</title> </head> <body> <div> <iframe src="http://www.163.com" style="height: 421px; width: 1165px"></iframe> </div> </body> </html>
至此，我们的工作完成了，能够进行局部刷新了，下面是我的截图：
页面加载后的截图：
下图是在单击按钮（注对应的js文件中的是 document.getElementById("iframe1Id").src = "/Home/Baidu";）
下图对应的单击按钮之后的截图（注：js中对应的是document.getElementById("iframe1Id").src = "http://www.baidu.com";）
在.NET MVC下不用iframe实现局部加载html
最近在做个后台系统，之前都是用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。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索iframe
， 文件
， view
， this
using
mvc 局部刷新、mvc局部刷新页面、spring mvc 局部刷新、asp.net mvc局部刷新、mvc ajax局部刷新，以便于您获取更多的相关知识。