zoukankan      html  css  js  c++  java
  • [转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net

    本文转自: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.
     
    In this scenario the jQuery UI Dialog Modal Popup box makes of Custom Buttons, to read more about it please refer my article jQuery UI Dialog Modal Popup Custom Buttons example.
    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",
                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. 

  • 相关阅读:
    CentOS7.4下载与安装
    Windows 环境下vue+webpack前端开发环境搭建
    PHPSSO通信一直失败。
    TortoiseGit安装和使用的图文教程
    TortoiseGit安装教程
    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
    linux 安装xamp
    linux的rpm命令
    0和空的判断
    mysql中 case when的使用
  • 原文地址:https://www.cnblogs.com/freeliver54/p/5139471.html
Copyright © 2011-2022 走看看