本文转自:http://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPNet.aspx
In this article I will explain with an example, how to use jQuery UI Dialog Modal Popup as Yes No Confirmation Box in ASP.Net using C# and VB.Net.
The jQuery UI Dialog Modal Popup can be configured to work as the JavaScript Yes No Confirmation Box by using Custom Buttons.
HTML Markup
The following HTML Markup consists of jQuery UI Script and CSS files inherited to use jQuery UI Dialog Modal Popup box, an HTML DIV and an ASP.Net Button with UseSubmitBehavior property set to False.
Inside the jQuery document ready event handler, the jQuery UI Dialog Modal Popup box is initialized and the Delete Button is assigned the jQuery click event handler.
The jQuery UI Dialog Modal Popup box has two Custom Buttons i.e. Yes and No. When the Yes Button is clicked, the rel attribute of the Delete button is set to value delete and the click event of the Delete Button is triggered.
And when the No Button is clicked, the jQuery UI Dialog Modal Popup box is closed using the “close” command.
When the Button is clicked, if the rel attribute does not have value delete, the jQuery UI Dialog Modal Popup box is opened using the “open” command, else using the __doPostBack function, the Sever Side event handler of the Button is triggered.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id*=btnDelete]").removeAttr("onclick");
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Confirmation",
width: 350,
height: 160,
buttons: [
{
id: "Yes",
text: "Yes",
click: function () {
$("[id*=btnDelete]").attr("rel", "delete");
$("[id*=btnDelete]").click();
}
},
{
id: "No",
text: "No",
click: function () {
$(this).dialog('close');
}
}
]
});
$("[id*=btnDelete]").click(function () {
if ($(this).attr("rel") != "delete") {
$('#dialog').dialog('open');
return false;
} else {
__doPostBack(this.name, '');
}
});
});
</script>
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="DeleteRecord" UseSubmitBehavior="false" />
<div id="dialog" style="display: none" align="center">
Do you want to delete this record?
</div>
Server Side Code
When the Yes option is clicked inside the jQuery UI Dialog Modal Popup box, the following event handler is raised which simulates deletion of record.
C#
protected void DeleteRecord(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Record Deleted.')", true);
}
VB.Net
Protected Sub DeleteRecord(sender As Object, e As EventArgs)
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Record Deleted.')", True)
End Sub
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
- API分析——Jquery UI Dialog
1.阅读API文档的一般方法? 通常地, API由三部分构成:属性.方法.事件. 属性表示参数配置,作为一个组件的微调,或者功能的开启与关闭: 方法表示组件能够发生的动作,或者组件的状态监测: 事件表 ...
- jQuery UI dialog 的使用
今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框. 1 <input type= ...
- jQuery UI dialog 參数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...
- Jquery - UI - Dialog(转)
jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...
- jQuery UI dialog 参数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的 ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- jQuery UI dialog
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...
- jQuery UI dialog插件出错信息:$(this).dialog is not a function
使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...
随机推荐
- [转]基于 Quercus 的手游项目终于上线了
原文:http://blog.andsky.com/quercus-php-ngame/ 经过半年的开发,我们第一款手游戏终于开发完毕,架构使用了 netty + Quercus 实现用 php 通过 ...
- AC自动机---病毒侵袭
HDU 2896 题目网址: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110773#problem/B Description 当太 ...
- activiti 工作流
1. 工作流的概念 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实 ...
- RabbitMQ与AMQP协议详解
1. 消息队列的历史 了解一件事情的来龙去脉,将不会对它感到神秘.让我们来看看消息队列(Message Queue)这项技术的发展历史. Message Queue的需求由来已久,80年代最早在金融交 ...
- Convert string to binary and binary to string in C#
String to binary method: public static string StringToBinary(string data) { StringBuilder sb = new S ...
- winform(多窗体、菜单和工具栏)
一.多窗体 1.哪个是主窗体 利用From1的button将From2打开 private void button1_Click(object sender, EventArgs e) { Form2 ...
- TeamCity配置笔记
1.编译sln 2.发布网站 3.重复代码检测 4.代码分析 5.单元测试&覆盖率测试 查看代码覆盖率 7.代码签入时自动触发编译 8.通知 1.在teamcity安装目录中找到TrayNot ...
- 2004-输入一个百分制的成绩t,将其转换成对应的等级
,具体转换规则如下: 90~100为A; 80~89为B; 70~79为C; 60~69为D; 0~59为E; 如果输入数据不在0~100范围内,请输出一行:“Score is error!”. 这题 ...
- UtilDev Web Server Pro
A good tool for asp.net hosting: http://ultidev.com/products/UWS-Cassini-Pro/
- Mac OS X上安装 Ruby运行环境
环境 对于新入门的开发者,如何安装 Ruby和Ruby Gems 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境.此安装方法同样适用于产品环境! 系统需求 ...