使用JQUERY UI中的dialog对话框提示,如果点击确认,执行服务端代码的基本代码
Posted on 2009-12-03 08:08 hhq80 阅读(1134) 评论(1) 编辑 收藏 举报
<!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></title>
<script src="../css/jquery-1.3.2.js" type="text/javascript"></script>
<link type="text/css" href="../css/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../css/ui/ui.core.js"></script>
<script type="text/javascript" src="../css/ui/ui.resizable.js"></script>
<script type="text/javascript" src="../css/ui/ui.draggable.js"></script>
<script type="text/javascript" src="../css/ui/ui.dialog.js"></script>
<script type="text/javascript" src="../css/ui/effects.core.js"></script>
<script type="text/javascript" src="../css/ui/effects.highlight.js"></script>
<script type="text/javascript" src="../css/external/bgiframe/jquery.bgiframe.js"></script>
<link type="text/css" href="../css/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'是': function() {
$(this).dialog("close");
//alert($("#<%= hdnBtnPostback.ClientID %>").val());
eval($("#<%= hdnBtnPostback.ClientID %>").val());
},
"否": function() {
$(this).dialog('close');
}
}
});
});
function showjQueryDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="dialog" title="Create new user">
你是否需要发送一个短信给审批人:
</div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"
onclientclick="showjQueryDialog();return false;" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="hdnBtnPostback" runat="server" />
</form>
</body>
</html>
后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class test_DialogConfirm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
hdnBtnPostback.Value = Page.ClientScript.GetPostBackEventReference(Button1, string.Empty);
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "保存成功!";
}
}
另客户端设用服务端click事件的方法
<!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></title>
<script src="../css/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$().ready(function() {
$("#Button2").click(function() {
$("#Button1").click();
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="服务器端控件" OnClick="Button1_Click" />
<input id="Button2" type="button" value="客户端控件"><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<hr />
<a href="#" onclick="<%= PostBack()%>">test</a>
</div>
</form>
</body>
</html>
后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class test_ClientPostback : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
//Label1.Text = "test";
if (Request["__EVENTARGUMENT"] == "haha")
{
Response.Write("这个是链接的PostBack");
}
else
{
Response.Write("这个不是链接的PostBack");
}
}
protected string PostBack()
{
return this.Page.GetPostBackEventReference(Button1, "haha");
}
}
