Discussion :

[OminiuS]

Bonjour,

j'ai crée un Textbox Calendar sous forme de UserControl (Textbox avec bouton pour selectionner la date sur un calendar!
seulement, l'affichage de mon calendar(contenu dans un panel) se fait en code behind, ce qui fait donc un appel au serveur juste pour ça

j'aimerai pouvoir le faire en javascript pour éviter un rechargement des données!
mais je sais pas trop comment faire

voici mon code actuel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCCalendar.ascx.cs" Inherits="UCCalendar" %>
<div>
    <asp:TextBox ID="txtDate" runat="server" ReadOnly="True"></asp:TextBox>
    <asp:ImageButton ID="ibtnCalendar" runat="server" ImageUrl="~/App_Themes/Default/Images/calendar.jpg"  OnClick="ibtnCalendar_Click" />
    <asp:Panel ID="pnlCalendar" runat="server" Visible="false" CssClass="calendar">
        <asp:Calendar ID="calendar" runat="server" OnSelectionChanged="calendar_SelectionChanged" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px">
            <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
            <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
            <SelectorStyle BackColor="#CCCCCC" />
            <WeekendDayStyle BackColor="#FFFFCC" />
            <OtherMonthDayStyle ForeColor="#808080" />
            <NextPrevStyle VerticalAlign="Bottom" />
            <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
            <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
        </asp:Calendar>
    </asp:Panel>
</div>

et mon code behind

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class UCCalendar : System.Web.UI.UserControl
{
    /// <summary>
    /// Chargement du contrôle
    /// </summary>
    /// <param name="sender">Contrôle</param>
    /// <param name="e">Evènement</param>
    protected void Page_Load(object sender, EventArgs e)
    {
    }
 
    /// <summary>
    /// Ouverture du calendrier
    /// </summary>
    /// <param name="sender">Contrôle</param>
    /// <param name="e">Evènement</param>
    protected void ibtnCalendar_Click(object sender, ImageClickEventArgs e)
    {
        if (this.pnlCalendar.Visible)
            this.pnlCalendar.Visible = false;
        else
            this.pnlCalendar.Visible = true;
    }
 
    /// <summary>
    /// Sélection de la date
    /// </summary>
    /// <param name="sender">Contrôle</param>
    /// <param name="e">Evènement</param>
    protected void calendar_SelectionChanged(object sender, EventArgs e)
    {
        this.txtDate.Text = this.calendar.SelectedDate.ToShortDateString();
        this.pnlCalendar.Visible = false;
    }
}

si quelqu'un a des pistes ou une solution!

merki

[Pongten]

Dans la balise <imageButton OnClientClick="ShowCalendar(true)".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<script>
 
function ShowCalendar(visible)
{
      <%=calendar.ClientID %>.style.visible = visible;
}
</script>

C'est juste une piste à approfondir un peu...

:-)

[OminiuS]

Voici mon code définitif

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCCalendar.ascx.cs" Inherits="UCCalendar" %>
<div>
    <asp:TextBox ID="txtDate" runat="server" ReadOnly="True"></asp:TextBox>
    <asp:Image ID="iCalendar" runat="server" ImageUrl="~/App_Themes/Default/Images/calendar.jpg" />
    <asp:Panel ID="pnlCalendar" runat="server" CssClass="calendar"style="display: none;">
        <asp:Calendar ID="calendar" runat="server" OnSelectionChanged="calendar_SelectionChanged" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px">
            <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
            <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
            <SelectorStyle BackColor="#CCCCCC" />
            <WeekendDayStyle BackColor="#FFFFCC" />
            <OtherMonthDayStyle ForeColor="#808080" />
            <NextPrevStyle VerticalAlign="Bottom" />
            <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
            <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
        </asp:Calendar>
    </asp:Panel>
</div>

et pour le code behind

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class UCCalendar : System.Web.UI.UserControl
{
    /// <summary>
    /// Chargement du contrôle
    /// </summary>
    /// <param name="sender">Contrôle</param>
    /// <param name="e">Evènement</param>
    protected void Page_Load(object sender, EventArgs e)
    {
    }
 
    /// <summary>
    /// Sélection de la date
    /// </summary>
    /// <param name="sender">Contrôle</param>
    /// <param name="e">Evènement</param>
    protected void calendar_SelectionChanged(object sender, EventArgs e)
    {
        this.txtDate.Text = this.calendar.SelectedDate.ToShortDateString();
    }
 
 
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        // ajoute la fonction javascript sur le clic de l'image.
		this.imgCalendar.Attributes["onclick"] = "UCCalendarToggleCalendar('" + this.pnlCalendar.ClientID + "');";
		// ajoute le code javascript à la page (une seul fois).
		Page.ClientScript.RegisterClientScriptInclude(typeof(UCCalendar), "UCCalendarToggleCalendar", "./App_Themes/Default/Js/UCCalendar.js");
    }
}

avec dans le UCCalendar.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function UCCalendarToggleCalendar(panelId)
{
    // recupere le panel a afficher/masquer
    var pnl = document.getElementById(panelId);
    if (!pnl) return;
    // affiche/masque le panel
    pnl.style.display = ("none" == pnl.style.display ? "block" : "none");
}

merki pour ton aide Pongten

et merki a Guilaume pour la version définitive

[Pongten]

Avec plaisir :-)