Jquery 实现ascx文件的延迟加载
最终效果：
加载前效果：
加载后效果：
具体实现：
1：WebUserControl.ascx文件
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<div id='aaa'>
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this 'hidden' data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>
可以在后台添加耗时的代码，这样效果明显
如:
for (int i = 0; i < 1000000; i++)
{
for (int j = 0; j < 10000; j++)
{
}
}
2:编写WebService
[WebMethod]
public string aaa()
{
Page page = new Page();
UserControl ctl = (UserControl)page.LoadControl("~/WebUserControl.ascx");
page.Controls.Add(ctl);
StringWriter writer = new StringWriter();
HttpContext.Current.Server.Execute(page, writer, false);
return writer.ToString();
}
3.利用ajax请求：
完整代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/WebUserControl.ascx" TagPrefix="cc1" TagName="WebUserControl" %>
<%@ Register Src="~/WebUserControl2.ascx" TagPrefix="cc2" TagName="WebUserControl" %>
<%@ Register Src="~/WebUserControl3.ascx" TagPrefix="cc3" TagName="WebUserControl" %>
<!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" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Smooth Navigational Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="A folding DHTML menu tree with persistance feature, created via cookies." />
<meta name="keywords" content="DHTML, folding menu tree script, DHTML tutorial, free, JavaScript,persistance" />
<link rel="stylesheet" type="text/css" href="../ddincludes/mainstyle.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />
<link href="css/basic.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/basic_ie.css" rel="stylesheet" type="text/css" media="screen" />
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com/)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
orientation: 'h',
classname: 'ddsmoothmenu',
customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: ["smoothcontainer", "smoothmenu.htm"] //"markup" or ["container_id", "path_to_menu_file"]
})
//function a(e)
//{
////e.preventDefault();
// $('#basic-modal-content').modal();
//}
//$(document).ready(function () {
// debugger;
// $('#basic-modal input.basic, #basic-modal a.basic, #smoothmenu1 a.bisic').click(function (e) {
// e.preventDefault();
// $('#basic-modal-content').modal();
// });
//});
var role="管理员";
//var role="访客";
$(document).ready(function () {
//角色菜单配置
if(role=="管理员")
{
//debugger;
// $("a:contains('Folder 2')").parent().remove();
}
/*
if(role=="访客")
{
}
*/
//事件注册
$('#basic-modal input.basic, #basic-modal a.basic,#smoothmenu1 a.bisic1').click(function (e) {
$("#Loading").ajaxStart(
function()
{
$("#Loading").modal();
}
);
$.ajax({
type: "POST",
url: "WebService.asmx/aaa",
complete: function(msg) {
// Hide the loading progress .
$("#Loading").remove();
// Insert the returned HTML into the <div>.
$('.simplemodal-wrap').html(msg.responseXML.text);
$('#aaa').css("display","block");
}
});
});
$('#basic-modal input.basic, #basic-modal a.basic,#smoothmenu1 a.bisic2').click(function (e) {
e.preventDefault();
//debugger;
//$('.simplemodal-wrap').load('WebUserControl.ascx');
//$("#simplemodal-container.simplemodal-wrap").prepend('<div id="aaa"><h3>Basic Modal Dialog</h3></div>');
//debugger;
//$('#basic-modal-content').modal();
$('#bbb').modal();
});
});
</script>
</head>
<body>
<form id="form1" runat ="server" >
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com/" class="bisic">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#" id="bisic" >Sub Item 1.1</a></li>
<li><a href="#" class="bisic1">Sub Item 1.2</a></li>
<li><a href="#" class="bisic2">Sub Item 1.3</a></li>
<li><a href="#" class="bisic">Sub Item 1.4</a></li>
<li><a href="#" class="bisic">Sub Item 1.2</a></li>
<li><a href="#" class="bisic">Sub Item 1.3</a></li>
<li><a href="#" class="bisic">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#" class="bisic">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#" class="bisic">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#" class="bisic">Sub Item 2.1.1</a></li>
<li><a href="#" class="bisic">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#" class="bisic">Sub Item 3.1.1.1</a></li>
<li><a href="#" class="bisic">Sub Item 3.1.1.2</a></li>
<li><a href="#" class="bisic">Sub Item 3.1.1.3</a></li>
<li><a href="#" class="bisic">Sub Item 3.1.1.4</a></li>
<li><a href="#" class="bisic">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#" class="bisic">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/%22%3EItem 4</a></li>
</ul>
</div>
<div id="Loading"><img src="ajax-loader13.gif" /></div>
<%--<cc1:WebUserControl runat="server" />
<cc2:WebUserControl runat="server" />
<cc3:WebUserControl runat="server" />--%>
<%--<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>--%>
<%-- <script src="js/basic.js" type="text/javascript" ></script>--%>
<script src="js/jquery.simplemodal.js" type="text/javascript" ></script>
</form>
</body>
</html>
浙公网安备 33010602011771号