用JQuery 访问JSON动态生成ASP.NET控件

来源：互联网发布：自我评价知乎编辑：程序博客网时间：2024/05/16 05:48

［原文（英文）地址］Dynamically create ASP.NET user control using JQuery and JSON enabled Ajax Web Service

(简单翻译如下：）
用JQuery 访问JSON动态生成ASP.NET控件

使用JQuery动态生成控件是很有趣也很容易,下面先看一段简单的示例代码：

function getJsonAjaxObject(webServiceURL, jsonData) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: serviceURL,

data: jsonData,

success:

function(msg){

//execute code related to success of web service

error:

function(XMLHttpRequest, textStatus, errorThrown){

//execute code related to failier of web service

}

});

}

配置webservers的maxJsonLength 属性：

<system.web.extensions>

</webServices>

</scripting>

</system.web.extensions>

C#/VB.NET XHTML代码：

<%@ Page Language="C#" EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>With JQuery</title>

body

{

width:95%;

padding-left:20px;

font-family:Arial;

font-size:10pt;

padding-right:20px;

}

</style>

</head>

<body>

</form>

</body>

</html>

JavaScript通过JSON模式调用WebService:

function getData(serviceURL, controlLocation) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: serviceURL,

data: "{'controlLocation':'" + controlLocation + "'}",

success:

function(msg){

$('#testDiv').html(eval(msg));

formatTable();

error:

function(XMLHttpRequest, textStatus, errorThrown){

alert( "Error Occured!" );

}

});

}

function formatTable(){

//get all row in gridview table and set style/event/attribute on them

$("div#testDiv tr")

.addClass("data-row")

.mouseover(function(){

if(! isClickedStyleSet(this.className)){

this.className = "row-over";}

if(! jQuery.browser.mozilla){

this.style.cursor ="hand";

}})

.mouseout(function(){

if(! isClickedStyleSet(this.className)){

this.className = "data-row" ;}

})

.click(

function(){

if(! isClickedStyleSet(this.className)){

this.className = "row-select" ;}

else{this.className = "data-row" ;}

});

//get all cell in gridview table and set style/event/attribute on them

$("div#testDiv td")

.addClass("data-row")

.css("white-space", "nowrap")

.css("vertical-align", "middle")

.mouseover(function(){

setTitle(this);

});

}

function setTitle(object){

//check browser type

if(jQuery.browser.mozilla){

object.title = object.textContent;

}

else{

object.title = object.innerText;

}

function isClickedStyleSet(className){

//if row is already clicked return true

if(className == "row-select"){

return true;

}

return false;

}

</script>

下面是屏幕剪切图:

当用户点击"Load Customer Order"按钮时,将调用 ScriptService.asmx/GetControlHtml WebService方法,得到控件的html数据, 载入 'testDIV' ,格式化div中的表格, 实现mouseover/mouseout等.

同样用户点击 "load login" 按钮 ,加载 "User Login" 窗口

为了载入用户控件,需要调用 "getdata" 函数调用webservice的url和控件位置:.

如： getData('ScriptService.asmx/GetControlHtml', '~/Controls/GridView.ascx');.

附本文相关示例源码下载： VB示例源码 C#示例源码
<script type="text/javascript"></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>