如何在asp.net和jquery中动态工作 [英] how to work dynamically in asp.net and jquery
本文介绍了如何在asp.net和jquery中动态工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好
这是我的问题
我有一个具有ID和详细信息按钮的数据列表，当用户单击详细信息按钮时将显示项目的详细信息，jQuery弹出窗口应打开并具有淡入效果，以便用户可以看到单击的项目的详细信息，显然这也将在jquery中动态完成，因此到目前为止，我无法弄清楚，也没有任何错误
这是我的aspx，js和CSS代码
aspx代码
hi all
here here is my problem
i have a datalist having id and details button to show details of an item when user clicks details button a jquery popup should open with fade in effect so user can see details of an item clicked and obviously this would be done dynamically in jquery as well so far i could not figure it out and not having any kind of error what so ever
here are my aspx,js and css codes
aspx code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="_Default" %>
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
house_id:
<asp:Label ID="house_idLabel" runat="server" Text='<%# Eval("house_id") %>' />
<br />
ref_no:
<asp:Label ID="ref_noLabel" runat="server" Text='<%# Eval("ref_no") %>' />
<br />
<center>
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
<div id="button1"> <input id="button" type="button" runat="server" value="Press me please!" /></div>
<!---->
</center>
<div class="backgroundPopup" style=" color: White;">
house_id:
<asp:Label ID="Label1" runat="server" Text='<%# Eval("house_id") %>' />
</div>
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:AY real estateConnectionString %>"
SelectCommand="SELECT [house_id], [ref_no] FROM [homes]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
CSS代码
css code
.backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
js代码
js code
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(bgpopup){
//loads popup only if it is disabled
if(popupStatus==0){
//.live('click',function(){
bgpopup.css({
"opacity": "0.7"
});
bgpopup.fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
popupStatus = 0;
}
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
//$("#button").click(function(){
$('input[type="button"]').live('click',function(){
//centering with css
var bgPopup = $(this).parent();
//centerPopup();
//load popup
loadPopup(bgPopup);
});
//Click out event!
$("#backgroundPopup").live('click',function(){
//$('input[type="#backgroundPopup"]').live('click',function(){
disablePopup();
});
//Press Escape event!
});
推荐答案
ConnectionStrings:AY real estateConnectionString ％> " span> =" 从[家]中选择[house_id]，[ref_no]" < /asp:SqlDataSource > < /div > < /form > < /body > < /html >
ConnectionStrings:AY real estateConnectionString %>" SelectCommand="SELECT [house_id], [ref_no] FROM [homes]"> </asp:SqlDataSource> </div> </form> </body> </html>
CSS代码
css code
.backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
js代码
js code
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(bgpopup){
//loads popup only if it is disabled
if(popupStatus==0){
//.live('click',function(){
bgpopup.css({
"opacity": "0.7"
});
bgpopup.fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
(" ).fadeOut(" 慢")； popupStatus = 0 ; } } // 在jQuery中控制事件
("#backgroundPopup").fadeOut("slow"); popupStatus = 0; } } //CONTROLLING EVENTS IN jQuery
(文档).ready(功能(){ // 加载弹出窗口 // 单击按钮事件！ //
(document).ready(function(){ //LOADING POPUP //Click the button event! //
这篇关于如何在asp.net和jquery中动态工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
