how to open or close Dialog from c# code behind ?

Originally Posted 25 September 2013, 6:53 pm EST

  • Originally Posted 25 September 2013, 6:53 pm EST

    Hi , I want to know how I can " open or close" OR "make visible and invisible" the asp.net c1dialog control from c# code beind
    thx in advance
  • Reply

    Hello,

    The only way which you can use to open or close a C1Dialog from server side is to write the client side script and register it from the code behind. For example, the client script will look like:

            //To open the dialog
    function ShowPopup(message) {
    $(function () {
    $("#C1Dialog1").c1dialog('open');
    $("#C1Dialog1").html(message);
    $("#C1Dialog1").c1dialog({
    title: "Wijmo Dialog Popup",
    modal: false
    });
    });
    };

    //To close the dialog
    function CloseDialog() {
    $(function () {
    $("#C1Dialog1").c1dialog('close');
    });
    };


    Next you can place two ASP.NET buttons and call these scripts from server side like:

            protected void btnOpen_Click(object sender, EventArgs e)
    {
    string message = "Message from server side";
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
    }

    protected void btnClose_Click(object sender, EventArgs e)
    {
    ClientScript.RegisterStartupScript(this.GetType(), "Close", "CloseDialog();", true);
    }


    Attached is a small sample application implementing this functionality. Please check it and let me know if this helps.

    Regards,
    Sankalp
    2013/09/Dialog_ServerSide.zip
  • Reply

    hi SankalpS
    thanks alot for your answear , and the code you posted works just fine !
    BUT !!! I am using a c1dialog inside a content page and inside my dialog I have an ASP.NET Ajax Updatepanel and inside the UpdatePanel I have an ASP.NET GridView which I have provided the RowCommand Event and when this event fires an AsyncPostBack happens and after the AsyncPostBack I want to close the dialog But It does not work :(
    Here is my full .aspx Page Code :


    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default2.aspx.cs" Inherits="Default2" %>

    <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1Dialog"
    TagPrefix="wijmo" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript">

    //To open the dialog
    function ShowPopup(message) {
    $(function () {
    $("#cd1").c1dialog('open');
    $("#cd1").html(message);
    $("#cd1").c1dialog({
    title: "Wijmo Dialog Popup",
    modal: false
    });
    });
    };

    //To close the dialog
    function CloseDialog() {
    $(function () {
    $("#cd1").c1dialog('close');
    });
    };
    </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
    </asp:ScriptManager>
    <div dir="rtl">
    <wijmo:C1Dialog ID="cd1" runat="server" AppendTo="body" MaintainVisibilityOnPostback="False"
    Show="blind" Width="650px" ShowOnLoad="False" Height="400px">
    <CollapsingAnimation Option="">
    </CollapsingAnimation>
    <ExpandingAnimation Option="">
    </ExpandingAnimation>
    <CaptionButtons>
    <Pin IconClassOn="ui-icon-pin-w" IconClassOff="ui-icon-pin-s"></Pin>
    <Refresh IconClassOn="ui-icon-refresh"></Refresh>
    <Minimize IconClassOn="ui-icon-minus"></Minimize>
    <Maximize IconClassOn="ui-icon-extlink"></Maximize>
    <Close IconClassOn="ui-icon-close"></Close>
    </CaptionButtons>
    <Content>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
    <img src="Images/484.gif" />
    </ProgressTemplate>
    </asp:UpdateProgress>
    <div dir="rtl">
    <asp:GridView ID="GV" runat="server" AutoGenerateColumns="false" AllowPaging="true"
    PageSize="2" BorderStyle="solid" BorderColor="Black" GridLines="Horizontal" HeaderStyle-BackColor="#e62c1f"
    HeaderStyle-ForeColor="White" HeaderStyle-Font-Names="Tahoma" HeaderStyle-Font-Size="12px"
    BackColor="White" AlternatingRowStyle-BackColor="Control" ForeColor="Black" OnPageIndexChanging="GV_PageIndexChanging"
    PagerStyle-HorizontalAlign="Center" OnRowCommand="GV_RowCommand" DataKeyNames="ID">
    <PagerSettings Mode="NextPreviousFirstLast" FirstPageImageUrl="~/Images/Grid/Last.png"
    LastPageImageUrl="~/Images/Grid/First.png" NextPageImageUrl="~/Images/Grid/Privious.png"
    PreviousPageImageUrl="~/Images/Grid/next.png" FirstPageText="اول" PreviousPageText="قبلی"
    NextPageText="بعدی" LastPageText="آخر" />
    <Columns>
    <asp:TemplateField ItemStyle-Width="40px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle"
    HeaderStyle-Height="30px" HeaderStyle-Font-Size="14px" HeaderStyle-Font-Bold="false"
    HeaderStyle-BackColor="#e62c1f" ShowHeader="false">
    <ItemTemplate>
    <asp:ImageButton ID="btnSelect" runat="server" ImageUrl="~/Images/Grid/Select.png"
    CommandName="Select" CommandArgument='<%# Eval("ID") %>' ToolTip="انتخاب" CausesValidation="False" /></ItemTemplate>
    <HeaderStyle Height="30px"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Font-Names="Tahoma" ForeColor="Black" VerticalAlign="Middle"
    Width="44px"></ItemStyle>
    </asp:TemplateField>
    <asp:BoundField DataField="FullName" HeaderText="نام فرستنده" ItemStyle-Width="250px"
    HeaderStyle-Height="30" HeaderStyle-Font-Size="12px" HeaderStyle-Font-Bold="false"
    HeaderStyle-BackColor="#e62c1f" HeaderStyle-Font-Names="Tahoma">
    <HeaderStyle Height="30px" HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
    <ItemStyle Width="170px" Height="24px" ForeColor="Black" HorizontalAlign="Center"
    Font-Names="Tahoma" Font-Size="12px"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField DataField="Description" HeaderText="شرح رویداد" ItemStyle-Width="550px"
    HeaderStyle-Height="30px" HeaderStyle-Font-Size="12px" HeaderStyle-Font-Bold="false"
    HeaderStyle-BackColor="#e62c1f" HeaderStyle-Font-Names="Tahoma">
    <HeaderStyle Height="30px" HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
    <ItemStyle Width="350px" Height="24px" ForeColor="Black" HorizontalAlign="Center"
    Font-Names="Tahoma" Font-Size="12px"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField DataField="IsChecked" HeaderText="وضعیت" ItemStyle-Width="550px"
    HeaderStyle-Height="30px" HeaderStyle-Font-Size="12px" HeaderStyle-Font-Bold="false"
    HeaderStyle-BackColor="#e62c1f" HeaderStyle-Font-Names="Tahoma">
    <HeaderStyle Height="30px" HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
    <ItemStyle Width="80px" Height="24px" ForeColor="Black" HorizontalAlign="Center"
    Font-Names="Tahoma" Font-Size="12px"></ItemStyle>
    </asp:BoundField>
    </Columns>
    <HeaderStyle BackColor="#D7ECF2" Font-Names="Titr" Font-Size="Larger"></HeaderStyle>
    <AlternatingRowStyle BackColor="Control"></AlternatingRowStyle>
    </asp:GridView>
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>
    </Content>
    </wijmo:C1Dialog>
    </div>
    <div>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
    <div>
    <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static" ></asp:TextBox>
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    <div>
    <input id="Button1" type="button" value="Click Me!" onclick="$('#<%=cd1.ClientID%>').c1dialog('open')" />
    </div>
    </asp:Content>


    and here is the c# code which shows how I try to close the dialog in the GridView_RowCommand event :

        protected void GV_RowCommand(object sender, GridViewCommandEventArgs e)
    {
    string commandName = Convert.ToString(e.CommandName);
    string ID = e.CommandArgument.ToString();
    switch (commandName)
    {
    case "Select":
    MyData myData = new MyData();
    setPageStatus(PageStatus.view);
    try
    {
    myData = getDataSource().Where(x => x.ID == ID).First();
    LoadDataToControls(myData);
    ClientScript.RegisterStartupScript(this.GetType(), "Close", "CloseDialog();", true);
    }
    catch
    {
    setPageStatus(PageStatus.insert);

    }
    break;



    I would really appriciate if you could help me through this , thx again !
  • Reply

    Hello,

    Considering your requirement to fire a client script after an AsyncPostBack, I would suggest you kindly modify the approach as suggested in the following links:
    http://www.dotnetcurry.com/ShowArticle.aspx?ID=200
    http://www.dotnetcurry.com/ShowArticle.aspx?ID=256

    I hope this helps.

    Regards,
    Sankalp
  • Reply

    [xml][/xml]Hi,

    I tested the sample application attached (Dialog_ServerSide.zip) and this works perfectly, but when implementing this same solution using a master page does not work ... As I'm implementing my tests (I'm studying web development) using Oxygene - RemObjects, thought it might be a problem of the tool and thus implemented the same test using C #, but again not work ... The interesting is that when implementing a Web Form without master page the dialogue works. What can be the reason?? I implemented the following code:

    With Master Page


    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
    //To open the dialog
    function ShowPopup(message) {
    $(function () {
    $("#C1Dialog1").c1dialog('open');
    $("#C1Dialog1").html(message);
    $("#C1Dialog1").c1dialog({
    title: "Wijmo Dialog Popup",
    modal: false
    });
    });
    };

    //To close the dialog
    function CloseDialog() {
    $(function () {
    $("#C1Dialog1").c1dialog('close');
    });
    };
    </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div style="height: 203px">
    <wijmo:C1Dialog ID="C1Dialog1" runat="server" ShowOnLoad="False"></wijmo:C1Dialog>
    </div>
    <div style="height: 33px">
    <asp:Button ID="Button1" runat="server" Text="Open" OnClick="Button1_Click" />
    <asp:Button ID="Button2" runat="server" Text="Close" OnClick="Button2_Click" />
    <asp:Button ID="Button3" runat="server" Height="24px" OnClick="Button3_Click" Text="Redirect" Width="218px" />
    </div>
    </asp:Content>




    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace WebApplication1
    {
    public partial class Default : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
    string message = "Message from server side";
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
    ClientScript.RegisterStartupScript(this.GetType(), "Close", "CloseDialog();", true);
    }

    protected void Button3_Click(object sender, EventArgs e)
    {
    Response.Redirect("~/SimpleWebForm.aspx");
    }
    }
    }

    An interesting point is that on set ShowOnLoad to True the Open button works, but the Close button also opens the dialog too.

    In the other form (access by redirect) this code work fine...!!!

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script type="text/javascript">
    //To open the dialog
    function ShowPopup(message) {
    $(function () {
    $("#C1Dialog1").c1dialog('open');
    $("#C1Dialog1").html(message);
    $("#C1Dialog1").c1dialog({
    title: "Wijmo Dialog Popup",
    modal: false
    });
    });
    };

    //To close the dialog
    function CloseDialog() {
    $(function () {
    $("#C1Dialog1").c1dialog('close');
    });
    };
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div style="height: 155px">

    <wijmo:C1Dialog ID="C1Dialog1" runat="server" ShowOnLoad="False">
    </wijmo:C1Dialog>

    </div>
    <div>
    <asp:Button ID="Button1" runat="server" Text="Open" OnClick="Button1_Click" />
    <asp:Button ID="Button2" runat="server" Text="Close" OnClick="Button2_Click" />
    </div>
    </form>
    </body>
    </html>

    namespace WebApplication1
    {
    public partial class SimpleWebForm : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
    string message = "Message from server side";
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
    ClientScript.RegisterStartupScript(this.GetType(), "Close", "CloseDialog();", true);
    }
    }
    }

    Any help is welcome!
    Thanks in advance.
    2013/11/WebApplication1.7z
  • Reply

    Luzcka,

    I would request you to kindly provide me some time to test this issue. I will update you as soon as possible.

    Regards,
    Sankalp
  • Reply

    Hi,

    Somehow I got the same problem with Luzcka...the dialog doesn't work when I implemented it with master page...it work wonderfull if it's only a simple web form without master page
    Is there any solution??

    Thanks for the help
    Regards,
    Kuranamasa
  • Marked as Answer

    Reply

    Luzcka and Kuranamasa,

    Very sorry for the delay in getting back to you. I was able to notice the issue which you are experiencing. The issue is caused due to the fact that when using Master pages, the id of the control cannot be retrieved using the normal jQuery approach. So you will need to modify the script code like this.:

                //To open the dialog
    function ShowPopup(message) {
    $(function () {
    $("[id$=C1Dialog1]").c1dialog('open');
    $("[id$=C1Dialog1]").html(message);
    $("[id$=C1Dialog1]").c1dialog({
    title: "Wijmo Dialog Popup",
    modal: false
    });
    });
    };

    //To close the dialog
    function CloseDialog() {
    $(function () {
    $("[id$=C1Dialog1]").c1dialog('close');
    });
    };


    I tested this and it works perfectly. Let me know if this helps.

    Regards,
    Sankalp
  • Reply

    You can watch this tutorial where he is practically explaining the method of
    How to open bootstrap modal popup on button click in asp.net c#
    Click on the following link
    https://youtu.be/qdnKnOHnicw
  • Reply

    Hi,

    Thank you for sharing the video.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels