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

Tagged: 

  • karamafrooz 1 year ago

    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

  • 66p
    SankalpS66p 1 year ago

    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

  • karamafrooz 1 year ago

    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 !

  • 66p
    SankalpS66p 1 year ago

    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

  • Luzcka 11 months, 1 week ago

    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






    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…!!!









    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.

    Attachments:
    1. WebApplication1.7z
  • 66p
    SankalpS66p 11 months, 1 week ago

    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

  • julian sanjaya 11 months, 1 week ago

    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

  • 66p
    SankalpS66p 10 months, 4 weeks ago

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.