用JQuery 访问JSON动态生成ASP.NET控件
来源:互联网 发布:淘宝怎么搜好看的鞋子 编辑:程序博客网 时间:2024/05/16 18:30
[原文(英文)地址]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>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="5000000" />
</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head" runat="server">
<title>With JQuery</title>
<link type="text/css" href="StyleSheets/iGridView-classic.css" rel="stylesheet" />
<link type="text/css" href="StyleSheets/iGridView-common.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.2.6.pack.js"></script>
<style type="text/css">
body
{
width:95%;
padding-left:20px;
font-family:Arial;
font-size:10pt;
padding-right:20px;
}
</style>
</head>
<body>
<form id="form" runat="server">
<input type="button" value="Load Customer Order" onclick="getData('ScriptService.asmx/GetControlHtml','~/Controls/GridView.ascx');" />
<input type="button" value="Load Login" onclick="getData('ScriptService.asmx/GetControlHtml','~/Controls/LoginControl.ascx');" />
<input type="button" value="Register New User" onclick="getData('ScriptService.asmx/GetControlHtml','~/Controls/NewUserControl.ascx');" />
<div id="testDiv"></div>
</form>
</body>
</html>
JavaScript通过JSON模式调用WebService:
<script type="text/javascript">
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#示例源码
- 用JQuery 访问JSON动态生成ASP.NET控件
- 用JQuery 访问JSON动态生成ASP.NET控件
- asp.net动态生成控件及访问控件
- asp.net返回json 动态生成jQuery Easyui tree
- 动态生成asp.net控件
- 动态生成asp.net控件
- 动态生成asp.net控件
- asp.net动态生成控件,并为控件绑定事件
- jquery访问asp.net 返回的json对象
- 使用JQuery解析asp.net MVC控制器返回的json数据并用动态生成的表格显示解析的数据
- asp.net jQuery用json取值
- 在asp.net中动态生成web控件
- 在asp.net中动态生成web控件
- ASP.NET动态加载用户控件的页面生成过程
- asp.net mvc动态生成file控件批量上传文件
- asp.net点击按钮动态生成文本框控件
- asp.net mvc动态生成file控件批量上传文件 .
- asp.net如何获取页面动态生成的服务器控件
- teechart2
- 数列题快速求解方法
- POI(1)
- POI(2
- UNREFERENCED_PARAMETER的作用(转)
- 用JQuery 访问JSON动态生成ASP.NET控件
- http://hi.baidu.com/feixue
- printf()和标准输出
- POI(3)
- POI(4)
- nocall,一段昔日的代码,青山依旧在,几度夕阳红...
- Linux操作系统内核启动参数详细解析
- 别人的优秀博客集锦
- 周思博趣谈软件——给计算机系学生的建议