Aide, tutos, assistance pour créer un "Templated UserControl"
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:
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:
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 !
Réponse pour ceux que ça pourrait intéresser
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:
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">×</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:
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:
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:
nomDuControle.ShowPopup
