Posted 10 September 2017, 11:56 am 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
How to open or close Dialog from c# code behind?
Posted by: karamafrooz on 10 September 2017, 11:56 am EST
-
karamafrooz
-
sankalps
Posted 10 September 2017, 11:56 am EST
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:
[js] //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'); }); };[/js]Next you can place two ASP.NET buttons and call these scripts from server side like:
[csharp] 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); }[/csharp]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 -
karamafrooz
Posted 10 September 2017, 11:56 am EST
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 :[html]<%@ 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>[/html]and here is the c# code which shows how I try to close the dialog in the GridView_RowCommand event :
[csharp] 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;[/csharp]I would really appriciate if you could help me through this , thx again !
-
sankalps
Posted 10 September 2017, 11:56 am EST
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=256I hope this helps.
Regards,
Sankalp -
luzcka
Posted 10 September 2017, 11:56 am EST
[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”>
//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”>
<wijmo:C1Dialog ID=“C1Dialog1” runat=“server” ShowOnLoad=“False”></wijmo:C1Dialog>
<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” />
</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…!!!
//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><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>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. -
sankalps
Posted 10 September 2017, 11:56 am EST
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 -
kuranamasa
Posted 10 September 2017, 11:56 am EST
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 -
sankalps
Posted 10 September 2017, 11:56 am EST
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.:
[js] //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'); }); };[/js]I tested this and it works perfectly. Let me know if this helps.
Regards,
Sankalp -
hurman74
Posted 14 January 2020, 5:08 am EST
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 -
ashwin.saxena
Posted 14 January 2020, 7:05 am EST
Hi,
Thank you for sharing the video.
