現在做網站都追求用戶體驗，那么ajax自然就必不可少。如果您用過Asp.Net MVC ，你會發現Asp.Net MVC 和jQuery 配合的非常默契(事實上jQuery已經成了微軟的御用腳本庫了)，你可以用jQuery直接去異步加載一個PartialView(即.ascx用戶控件)。如：$("#div").load("Controler/UserList.ascx");但是在webForm模式下就沒這么幸福了，
如果你也這樣去load一個用戶控件，它會報錯:"由于已明確禁止所請求的頁類型，無法對該類型的頁提供服務。擴展名“.ascx”可能不正確。?? 請檢查以下的 URL 并確保其拼寫正確"。
那我們就甘心放棄這樣一種讓人興奮的方法，回去像以前那樣一句一句的拼接字符串嘛？那樣做不僅工作量大，而且繁瑣易錯，美工給的靜態頁面也不能拿來直接用，拼字符串時遇到引號還要轉義。
我想，你肯定和我一樣都不甘心放棄這種“load”方法，那我們就自己來實現吧。

首先設想一下，如果有這樣一個類，它叫一PageProxy,這個類繼承Page類，然后讓我們的頁面繼承這個PageProxy類，而不是像默認的那樣繼承System.Web.UI.Page，
使我們在頁面上能夠直接load用戶控件，那么如果我們要在哪個頁面上異步load一個用戶控件，我們就讓那個頁面繼承這個PageProxy就行了。設想總是美好的，但要我們去實現。

那我們就去建有這樣一個類吧，由于這個類是給其他類繼承的，所以有 public abstract class PageProxy : Page。具體代碼如下： ???public?abstract?class?PageProxy?:?Page
????{
????????///?<summary>
????????///?輸出用戶控件的Html片段
????????///?</summary>
????????///?<param?name="control">控件的相對路徑</param>
????????///?<returns></returns>
????????[WebMethod]
????????public?static?string?RenderUserControl(string?control)
????????{
????????????Page?page?=?new?Page();
????????????UserControl?ctl?=?(UserControl)page.LoadControl("~/"?+?control);
????????????page.Controls.Add(ctl);
????????????StringWriter?writer?=?new?StringWriter();
????????????HttpContext.Current.Server.Execute(page,?writer,?false);
????????????return?writer.ToString();
????????}
????} 這個類只有一個webMethod方法，RenderUserControl，顧名思義，這個方法的功能是輸出用戶控件，也就是返回用戶控件生成的html片斷。

然后讓我們的頁面繼承這個類，如：?
public?partial?class?WebForm3?:?PageProxy
{?
???//?.......
?} 這樣我們就可以用ajax訪問這個方法了。到這里我們可以使用我另一篇文章：甩掉 ashx/asmx，使用jQuery.ajaxWebService請求WebMethod,Ajax處理更加簡練中封裝的$.ajaxWebService(url, dataMap, fnSuccess)來訪問這個方法了。
假如您已經了解了$.ajaxWebService(url, dataMap, fnSuccess)，那現在比如我們要在一個div中加載一個叫UserList.ascx的用戶控件：
?$.ajaxWebService("WebForm3/RenderUserControl",?"{control:'UserList.ascx'}",?function(result)?{
????????$("div").html(result.d);
????}); 到這里我們的工作好像完成了，為什么說好像呢？因為我們還沒有直接可以像這樣$("div").load("UserList.ascx");簡單的加載一個用戶控件。
要實現這樣其實也很簡單只要給jQuery做個擴展，對上面的代碼進行一下封裝就OK了。代碼如下：
///????<summary>
///????jQuery實例擴展，Ajax加載封裝用戶控件(*.ascx)，輸出Html，僅適用于Asp.Net。
///?????依賴?$.ajaxWebService(url,?dataMap,?fnSuccess)
///????</summary>
///????<param?name="control"?type="String">
///?????需要加載的用戶控件的相對路徑
///</param>
///????<param?name="page"?type="String">
///?????輸出控件Html片段的頁面，不一定是當前頁面。可選，缺省值為當前頁面。
///</param>
$.fn.loadUserControl?=?function(control,?page)?{
????var?$dom?=?this;
????if?(page?==?""?||?page?==?null)?{
????????page?=?location.pathname.replace("/",?"");
????}
????page?+=?"/RenderUserControl";?//RenderUserControl是PageProxy中的方法，不要輕易修改
????$.ajaxWebService(page,?"{control:'"?+?control?+?"'}",?function(result)?{
????????$dom.html(result.d);
????});
} 其中第一個參數control必選，第二個參數page可選。
這時我們再加載UserList.ascx,就可以這樣寫了： $("div").loadUserControl("UserList.ascx");
這也是我們最終要的效果。

到此我們的實現就全部完成了。
下面給出一個完整的示例代碼：
?????? PageProxy.cs:
????public?abstract?class?PageProxy?:?Page
????{
????????[WebMethod]
????????public?static?string?RenderUserControl(string?control)
????????{
????????????Page?page?=?new?Page();
????????????UserControl?ctl?=?(UserControl)page.LoadControl("~/"?+?control);
????????????page.Controls.Add(ctl);
????????????StringWriter?writer?=?new?StringWriter();
????????????HttpContext.Current.Server.Execute(page,?writer,?false);
????????????return?writer.ToString();
????????}
????}

?
?? WebForm3.aspx.cs:

????public?partial?class?WebForm3?:?PageProxy
????{
????????protected?void?Page_Load(object?sender,?EventArgs?e)
????????{
????????????
????????}
????}
????

?

jquery.extend.js：
///????<summary>
///????jQuery原型擴展，重新封裝Ajax請求WebServeice
///????</summary>
///????<param?name="url"?type="String">
///?????處理請求的地址
///</param>
///????<param?name="dataMap"?type="String">
///?????參數，json格式的字符串
///</param>
///????<param?name="fnSuccess"?type="function">
///?????請求成功后的回調函數
///</param>
$.ajaxWebService?=?function(url,?dataMap,?fnSuccess)?{
????$.ajax({
????????type:?"POST",
????????contentType:?"application/json",
????????url:?url,
????????data:?dataMap,
????????dataType:?"json",
????????success:?fnSuccess
????});
}




///????<summary>
///????jQuery實例擴展，Ajax加載封裝用戶控件(*.ascx)，輸出Html，僅適用于Asp.Net。
///?????依賴?$.ajaxWebService(url,?dataMap,?fnSuccess)
///????</summary>
///????<param?name="control"?type="String">
///?????需要加載的用戶控件的相對路徑
///?????</param>
///????<param?name="page"?type="String">
///?????輸出控件Html片段的頁面，不一定是當前頁面。可選，缺省值為當前頁面。
///?????</param>
$.fn.loadUserControl?=?function(control,?page)?{
????var?$dom?=?this;
????if?(page?==?""?||?page?==?null)?{
????????page?=?location.pathname.replace("/",?"");
????}
????page?+=?"/RenderUserControl";?//RenderUserControl是PageProxy中的方法，不要輕易修改
????$.ajaxWebService(page,?"{control:'"?+?control?+?"'}",?function(result)?{
????????$dom.html(result.d);
????});

}

?

WebForm3.aspx:
<%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="WebForm3.aspx.cs"?Inherits="WebFormjQuery.WebForm3"?%>

<!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>WebForm下使用jQuery.loadUserControl異步load用戶控件</title>
????<script?src="Scripts/jquery-1.3.2.js"?type="text/javascript"></script>
????<script?src="Scripts/jquery.extend.js"?type="text/javascript"></script>
????<script?type="text/javascript">
????????function?loadUserList(){
?????????$("#div_userList").loadUserControl("Controls/UserList.ascx");
????????}????????
????</script>
</head>
<body>
????<form?id="form1"?runat="server">
????<div>
????<div><input?type="button"?value="加載用戶列表（用戶控件）"?onclick?="loadUserList()"?/></div>
????<div?id='div_userList'></div>
????</div>
????</form>
</body>
</html>

?

PersonOM:

????public?class?PersonOM//model類，作為demo，我們就懶得建數據庫了
????{
????????public?string?Name?{?get;?set;?}

????????public?int?Age?{?get;?set;?}
????}

?

UserList.ascx：//待加載的用戶控件
????<%@?Control?Language="C#"?AutoEventWireup="true"?CodeBehind="UserList.ascx.cs"?Inherits="WebFormjQuery.Controls.UserList"?EnableViewState="false"?%>
????<%@?Import?Namespace="?System.Collections.Generic"?%>
????????<ul>
????????????<%?List<PersonOM>?lstps?=?WebForm1.GetResult();?%>
????????????<%?foreach?(?PersonOM?ps?in?lstps)
???????????????{?%>
????????????<li>姓名：<%=ps.Name?%>&nbsp;&nbsp;年齡：<%=ps.Age?%></li>
????????????<%}?%>
????????</ul>

?

　　源碼下載

?

原文地址：http://www.cnblogs.com/xumingxiang/archive/2010/05/04/1727614.html

作者 : 祥叔
出處：http://xumingxiang.cnblogs.com/
版權：本文版權歸作者和博客園共有
轉載：歡迎轉載，為了保存作者的創作熱情，請按要求【轉載】，謝謝
要求：未經作者同意，必須保留此段聲明；必須在文章中給出原文連接；否則必究法律責任

?

Tag標簽: Asp.Net,jQuery 祥叔
關注 - 0
粉絲 - 1 關注博主

轉載于:https://www.cnblogs.com/yurukai/archive/2010/05/06/1729187.html

總結

以上是生活随笔為你收集整理的[转载]WebForm下使用 jQuery.loadUserControl异步load用户控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。