Discussion :

[zesamoth]

Bonjour à tous,

Est ce que l'un d'entre vous saurait m'orienter vers des infos, ressources, etc... pour créer un templated UserControl.
En gros ce que je souhaiterais faire ne me parait pas insurmotable mais j'avoue me noyer un peu dans la masse d'infos que je peux trouver. Donc je cherche et me dis que quelqu'un a peut être déjà fait ça et qu'il saura m'aider.

L'idée serait de créer un usercontrol avec une partie contenant un place holder. Imaginons par exemple un user control qui permettrait de créer un popup. L'intérêt de ce user control étant qu'il embarque tout le design du popup et expose juste les propriétés utiles style Titre du popup, boutons affichés dans le footer, etc... Pour tout ça pas de problèmes.

Par contre, j'aimerais que le popup me permette de gérer un espace type place holder pour le compléter au besoin lors de l'utilisation.

Ce qui me donnerait un usage du type :

Code :

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

1
2
3
4
5
6
 
<uc:MyControl runat="server" id="myControl" title="Test popup" ShowExitButton="True" etc...>
    <Content>
         Mon contenu !
    </Content>
</uc:MyControl>

Avec par la suite, dans l'idéal, la possibilité d'utiliser ce type de control pour en faire un formview popup que je pourrais utiliser comme suit :

Code :

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

1
2
3
4
5
6
 
<uc:MyFormviewPopup runat="server" id="myControl" title="Test popup" DataSourceEFProcess="EFProcess" DataSourceSelectMethod="List" DataSourceItemType="EFEntity" etc...>
    <ItemTemplate>
         <%#Eval(Item.Libelle)%>
    </ItemTemplate>
</uc:MyControl>

D'aavnce un grand merci pour votre aide et surtout une bonne année à tous !

[zesamoth]

Voici une réponse pour ceux que ça intéresse. De plus le contrôle est assis sur les capacités de bootstrap.
A la différence que je gère l'affichage du popup via un évènement postback (et non jquery comme Bootstrap natif)

Pour le contrôle POPUP - Coté ASPX

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
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ucPopup.ascx.vb" Inherits="Elan2.UserControls._Common.Misc.ucPopup" %>
<!-- Fenetre Modale -->
<asp:panel CssClass="modal fade" id="panMain" runat="server" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" runat="server" id="divDialog" >
    <div class="modal-content">
      <asp:Panel class="modal-header" runat="server" id="panHeader">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">
            <asp:Image id="imgMain" runat ="server" Visible="false" />
            <i runat="server" id="imgText" visible="false" style="padding-right:20px;"></i>
            <asp:Label runat="server" ID="lblTitle" />
        </h4>
      </asp:Panel>
      <div class="modal-body">
        <asp:PlaceHolder runat="server" ID="plhMain" />
      </div>
      <div class="modal-footer">
          <ucCommon:ucLinkButton runat="server" ID="ucLnkCancel" ShowImageText="true" ImageText="fa-ban" ButtonType="_Default" Text="Annuler" Visible="false" />
          <ucCommon:ucLinkButton runat="server" ID="ucLnkQuit" ShowImageText="true" ImageText="fa-power-off"  ButtonType="Primary" Text="Quitter"  />
      </div>
    </div>
  </div>
</asp:panel>

Côté 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
Imports Elan2.UserControls._Common.List
 
Namespace UserControls
    Namespace _Common.Misc
 
        ''' <summary>
        ''' Table de mise en forme d'un titre de page. 
        ''' </summary>
        ''' <remarks>Permet de mettre en forme un titre de page avec icone + titre h5</remarks>
        Partial Public Class ucPopup
            Inherits System.Web.UI.UserControl
 
#Region "Eveneemnts"
            Public Event Cancel()
            Public Event Quit()
#End Region
 
#Region "Chargement du popup"
            Private Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
                Javascript.AddJavascript("$('#" & divDialog.ClientID & "').draggable({handle: '.modal-header'});")
                If (Not Contents Is Nothing) Then Contents.InstantiateIn(plhMain)
            End Sub
#End Region
 
#Region "Affichage du popup"
            Public Sub ShowPopup()
                Javascript.AddJavascript("$('#" & panMain.ClientID & "').modal('show');")
            End Sub
#End Region
 
#Region "Constante du chemin par défaut des images utilisée avec ShortImageSource"
            Public Const ShortImagePath As String = "~/Pictures/16x16/"
#End Region
 
#Region "Propriétés du titre"
            Public Property Title As String
                Get
                    Return lblTitle.Text
                End Get
                Set(value As String)
                    lblTitle.Text = value
                End Set
            End Property
            Public Property ShowTitleImageText() As Boolean
                Get
                    Return imgText.Visible
                End Get
                Set(ByVal value As Boolean)
                    imgText.Visible = value
                End Set
            End Property
            Public Property ShowTitleImage() As Boolean
                Get
                    Return imgMain.Visible
                End Get
                Set(ByVal value As Boolean)
                    imgMain.Visible = value
                End Set
            End Property
            Public Property TitleImageText As String
                Get
                    If Not imgText.Attributes("class") Is Nothing Then
                        Return imgText.Attributes("class").Replace("fa ", "").Replace(" fa-fw", "")
                    Else
                        Return Nothing
                    End If
                End Get
                Set(value As String)
                    imgText.Attributes("class") = String.Concat("fa ", value, " fa-fw")
                End Set
            End Property
            Public Property TitleImageSource() As String
                Get
                    Return imgMain.ImageUrl
                End Get
                Set(ByVal value As String)
                    imgMain.ImageUrl = value
                End Set
            End Property
            Public Property TitleShortImageSource() As String
                Get
                    Return imgMain.ImageUrl.Replace(ShortImagePath, "")
                End Get
                Set(ByVal value As String)
                    imgMain.ImageUrl = ShortImagePath & value
                End Set
            End Property
            Public Property TitleIMageTooltip() As String
                Get
                    Return imgMain.ToolTip
                End Get
                Set(ByVal value As String)
                    imgMain.ToolTip = value
                End Set
            End Property
            Public WriteOnly Property TitleImageRightMargin() As Integer
                Set(ByVal value As Integer)
                    imgMain.Style.Add("margin-right", CStr(value) & "px")
                End Set
            End Property
#End Region
 
#Region "Contenu du popup"
            <TemplateContainer(GetType(TemplateControl))> _
         <PersistenceMode(PersistenceMode.InnerProperty)> _
         <TemplateInstance(TemplateInstance.Single)>
            Public Property Contents As ITemplate
#End Region
 
#Region "Boutons du popup"
            'Bouton Annuler
            Public Property ButtonCancelVisible As Boolean
                Get
                    Return ucLnkCancel.Visible
                End Get
                Set(value As Boolean)
                    ucLnkCancel.Visible = value
                End Set
            End Property
            'Boton quitter
            Public WriteOnly Property ButtonQuitType As Elan2Utils.Enumerations._Common.Button.ButtonType
                Set(value As Elan2Utils.Enumerations._Common.Button.ButtonType)
                    ucLnkQuit.ButtonType = value
                End Set
            End Property
            Public Property ButtonQuitText As String
                Get
                    Return ucLnkQuit.Text
                End Get
                Set(value As String)
                    ucLnkQuit.Text = value
                End Set
            End Property
            Private Sub ucLnkCancel_Click(sender As Object, e As EventArgs) Handles ucLnkCancel.Click
                RaiseEvent Cancel()
            End Sub
            Private Sub ucLnkQuit_Click(sender As Object, e As EventArgs) Handles ucLnkQuit.Click
                RaiseEvent Quit()
            End Sub
#End Region
 
        End Class
 
    End Namespace
End Namespace

L'usage étant du coup le suivant

Code :

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

1
2
3
<ucCommon:ucPopup ID="ucPopMain" runat="server" title="Quitter" ShowTitleImageText="true" TitleImageText="fa-power-off" ButtonQuitType="Danger" ButtonQuitText="Continuer" ButtonCancelVisible="True">
    <Contents>L'application va être fermée, souhaitez vous continuer ?</Contents>
</ucCommon:ucPopup>

Et pour afficher la fenêtre modale vous utiliserez, sur n'importe quel évènement

Code :

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

nomDuControle.ShowPopup