Modal popup et gridview

**Msysteme** · 11/06/2010, 01h09

Bonjour,
Mon modal popup ne s'ouvre pas quand je clique sur un boutton edit :

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
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Page sans titre</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
 
        <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"><asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"><HeaderTemplate>
Catégories
</HeaderTemplate>
<ContentTemplate>
<asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="idCategorie" AllowPaging="True" AllowSorting="True" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"><Columns>
<asp:TemplateField ShowHeader="False">
						<ItemTemplate>
							<asp:ImageButton ID="btnEdit" runat="server" CausesValidation="false" ImageUrl="~/images/btn_edit.gif"/>
						</ItemTemplate>
					</asp:TemplateField>
<asp:BoundField DataField="idCategorie" HeaderText="idCategorie" ReadOnly="True" SortExpression="idCategorie"></asp:BoundField>
<asp:BoundField DataField="Categorie" HeaderText="Categorie" SortExpression="Categorie"></asp:BoundField>
</Columns>
</asp:GridView>
<asp:Button ID="btnHiddenCategorie" runat="Server" Style="display: none" />
			<asp:ModalPopupExtender ID="mpeCatedorie" runat="server" TargetControlID="btnHiddenCategorie" PopupControlID="pnlCategorie" CancelControlID="btnCancelCategorie" BackgroundCssClass="modalBackground" PopupDragHandleControlID="CategorieCaption">
			</asp:ModalPopupExtender>
 
<asp:Panel ID="pnlCategorie" runat="server" CssClass="modalBox" Style="display: none;" Width="500px">
				<asp:Panel ID="CategorieCaption" runat="server" CssClass="caption" Style="margin-bottom: 10px; cursor: hand;">Edition catégorie</asp:Panel>
				        <asp:HiddenField ID="hidCategorieEditIndex" runat="server" Value="-1" />
				        <div class="divCol">Catégorie : </div>
				        <div class="divColLast">
					        <asp:TextBox ID="txtCategorie" runat="server" AutoCompleteType="FirstName" MaxLength="64" Width="250" ></asp:TextBox>
				        </div>
				        <div class="clearer"> </div>
 
				        <div style="white-space: nowrap; text-align: center;">
					        <asp:Button ID="btnSaveCategorie" runat="server" Text="Save" OnClick="btnSaveCategorie_Click" CausesValidation="true"/>
					        <asp:Button ID="btnCancelCategorie" runat="server" CausesValidation="false" Text="Cancel"/>
				        </div>
			</asp:Panel>
    &nbsp;
    <asp:SqlDataSource id="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ASSURANCEConnectionString %>" SelectCommand="SELECT [idCategorie], [Categorie] FROM [Categorie]"></asp:SqlDataSource> 
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2"><HeaderTemplate>
                    Branches
 
</HeaderTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="TabPanel3" ID="TabPanel3"><HeaderTemplate>
                    Sous branches
 
</HeaderTemplate>
</asp:TabPanel>
</asp:TabContainer>
    </form>
</body>
</html>

Que dois je faire ?

Merci.

**Nicolas Esprit** · 11/06/2010, 07h02

Bonjour,

Ton btnEdit ne semble pas être le déclencheur pour la PopUp. SI tu souhaites gérer l'affichage après un PostBack, tu n'as pas de méthode dans le code-behind associée au clic du btnEdit non plus.

Regarde cet exemple :

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
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head" runat="server">
    <title>Master Details Example</title>
    <script runat="server">
 
 
    /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void BtnViewDetails_Click(object sender, EventArgs e)
    {
        //  get the gridviewrow from the sender so we can get the datakey we need
        Button btnDetails = sender as Button;
        GridViewRow row = (GridViewRow)btnDetails.NamingContainer;
 
        //  extract the customerid from the row whose details button originated the postback.
        //  grab the customerid and feed it to the customer details datasource
        //  finally, rebind the detailview
        this.sqldsCustomerDetails.SelectParameters.Clear();
        this.sqldsCustomerDetails.SelectParameters.Add("customerid", Convert.ToString(this.gvCustomers.DataKeys[row.RowIndex].Value));
        this.dvCustomerDetail.DataSource = this.sqldsCustomerDetails;
        this.dvCustomerDetail.DataBind();
 
        //  update the contents in the detail panel
        this.updPnlCustomerDetail.Update();
        //  show the modal popup
        this.mdlPopup.Show();
    }   
 
    </script>
    <style>
        .modalBackground {
            background-color:Gray;
            filter:alpha(opacity=70);
            opacity:0.7;
        }
    </style>
</head>
<body>
    <form id="form" runat="server">
        <asp:ScriptManager ID="scriptManager" runat="server" />
        <div>
            <asp:SqlDataSource ID="sqldsCustomers" runat="server" 
                SelectCommand="select customerid, companyname, contactname, contacttitle from dbo.customers"
                SelectCommandType="Text" ConnectionString="todo" />
            <asp:SqlDataSource ID="sqldsCustomerDetails" runat="server" 
                SelectCommand="select * from dbo.customers where customerid=@customerid"
                SelectCommandType="Text" CancelSelectOnNullParameter="true" ConnectionString="todo"/>
 
            <p style="background-color:AliceBlue; width:95%">
                Example of using a ModalPopupExtender to edit the indivdual rows of a GridView.<br />
                To test out the functionality, click the Details button of any of the rows and watch what happens.<br />
            </p>
 
            <br />
            <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>            
                    <asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" />
                    <asp:GridView 
                        ID="gvCustomers" runat="server" DataKeyNames="customerid" AutoGenerateColumns="false" 
                        AllowPaging="true" AllowSorting="true" PageSize="10" DataSourceID="sqldsCustomers" Width="95%">
                        <AlternatingRowStyle BackColor="aliceBlue" />
                        <HeaderStyle HorizontalAlign="Left" />
                        <Columns>
                            <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px">
                                <ItemTemplate>
                                    <asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="customerid" HeaderText="ID" SortExpression="customerid" ReadOnly="true" />
                            <asp:BoundField DataField="companyname" HeaderText="Company" SortExpression="companyname" ReadOnly="true" />
                            <asp:BoundField DataField="contactname" HeaderText="Name" SortExpression="contactname" ReadOnly="true" />
                            <asp:BoundField DataField="contacttitle" HeaderText="Title" SortExpression="contacttitle" ReadOnly="true" />                
                        </Columns>                    
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>                    
 
            <asp:Button id="btnShowPopup" runat="server" style="display:none" />
            <ajaxToolKit:ModalPopupExtender 
                ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup" 
                CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
            <asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none">
                <asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Label ID="lblCustomerDetail" runat="server" Text="Customer Detail" BackColor="lightblue" Width="95%" />
                        <asp:DetailsView ID="dvCustomerDetail" runat="server" DefaultMode="Edit" Width="95%" BackColor="white" />
                    </ContentTemplate>                
                </asp:UpdatePanel>
                <div align="right" style="width:95%">
                    <asp:Button 
                        ID="btnSave" runat="server" Text="Save" 
                        OnClientClick="alert('Sorry, but I didnt implement save because I dont want my northwind database getting messed up.'); return false;" 
                        Width="50px" />
                    <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
                </div>             
            </asp:Panel>
        </div>
    </form>
</body>
</html>

**Msysteme** · 16/06/2010, 12h22

merci pour le lien, maintenant j'ai pu avoir un resultat, le popup s'affiche corretement, ce qui me reste a faire c'est de créer une fonction pour le boutton save pour effectuer l'update de l'elemet selectionné.

Merci

**Msysteme** · 16/06/2010, 13h26

J'ai pu avancer un tout petit peu

asp.net

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
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Gestion d'assurance</title>
        <link type="text/css" href="datagrid.css" rel="stylesheet" />  
    <link type="text/css" href="detailgrid.css" rel="stylesheet" /> 
    <link type="text/css" href="default.css" rel="stylesheet" /> 
 
</head>
<body>
 
 
         <!--=============================================================================================================================================================================-->
 
          <!--=============================================================================================================================================================================-->
<form id="form1" runat="server">
 
        <asp:ScriptManager ID="scriptManager" runat="server" />
        <div>
            <asp:SqlDataSource ID="sqldsCategories" runat="server" 
                SelectCommand="select idCategorie, Categorie from Categorie"
                SelectCommandType="Text" ConnectionString="<%$ ConnectionStrings:ASSURANCEConnectionString %>" >
            </asp:SqlDataSource>
 
            <asp:SqlDataSource ID="sqldsCategorieDetails" runat="server" 
                SelectCommand="select * from Categorie where idCategorie=@idCategorie"
                SelectCommandType="Text" CancelSelectOnNullParameter="true" ConnectionString="<%$ ConnectionStrings:ASSURANCEConnectionString %>"
                UpdateCommand = "UPDATE [Categorie] SET [Categorie] = @Categorie WHERE [idCategorie] = @idCategorie">
                <UpdateParameters>
			        <asp:Parameter Name="Categorie" Type="String" />
		        </UpdateParameters>
            </asp:SqlDataSource>
 
            <br />
            <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>            
                    <asp:Label ID="lblTitle" runat="server" Text="Categories" BackColor="lightblue" Width="50%" />
                    <asp:GridView 
                        ID="gvCategories" runat="server" DataKeyNames="idCategorie" AutoGenerateColumns="false" 
                        AllowPaging="true" AllowSorting="true" PageSize="10" DataSourceID="sqldsCategories" Width="50%">
                        <AlternatingRowStyle BackColor="lightblue" />
                        <HeaderStyle HorizontalAlign="Left" />
                        <Columns>
                            <asp:TemplateField >
                                <ItemTemplate>
                                    <asp:ImageButton ID="btnViewDetails" runat="server"  OnClick="BtnViewDetails_Click" ImageUrl="~/images/Crayon.ico"/>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="idCategorie" HeaderText="ID" SortExpression="idCategorie" ReadOnly="true" />
                            <asp:BoundField DataField="Categorie" HeaderText="Categorie" SortExpression="Categorie" ReadOnly="true" />               
                        </Columns>                    
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>                    &nbsp;
 
            <asp:Button id="btnShowPopup" runat="server" style="display:none" />&nbsp;
 
            <asp:ModalPopupExtender 
                ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup" 
                CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
 
            <asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none" CssClass="modalBox" >
                <asp:UpdatePanel ID="updPnlCategorieDetail" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <br />
                        <asp:Panel ID="PersonCaption" runat="server" CssClass="caption" Style="margin-bottom: 10px; cursor: hand;">Detail Categorie</asp:Panel>
 
                        <!--<asp:DetailsView ID="dvCategorieDetail" runat="server" DefaultMode="Edit" Width="95%" BackColor="white" />-->
                        <asp:HiddenField ID="hidCategorieEditIndex" runat="server" Value="-1" />
                        <div class="divCol"> Categorie :</div>
				        <div class="divColLast">
					        <asp:TextBox ID="txtCategorie" runat="server" MaxLength="64" Width="250" ></asp:TextBox>
				        </div>
				    <div class="clearer"></div>
                    </ContentTemplate>                
                </asp:UpdatePanel>
                &nbsp;
                <div style="width:50%;">
                    <asp:Button ID="btnSave" runat="server" OnClientClick="btnSave_Click" Text="Save"
                        Width="50px" />
                    <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
                </div>             
            </asp:Panel>
 
        </div>
 
</form>
</body>
</html>

CodeBehind :

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
using System;
using System.Data;
using System.Configuration;
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;
using System.Data.SqlClient;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
 
    protected void BtnViewDetails_Click(object sender, EventArgs e)
    {
        ImageButton btnDetails = sender as ImageButton;
        GridViewRow row = (GridViewRow)btnDetails.NamingContainer;
 
        hidCategorieEditIndex.Value = Scrub(row.Cells[1].Text);
        txtCategorie.Text = Scrub(row.Cells[2].Text);
 
        this.updPnlCategorieDetail.Update();
 
        this.mdlPopup.Show();
 
 
        /*hidPCategorieEditIndex.Value = Scrub(row.Cells[1].Text);
        
        this.sqldsCategorieDetails.SelectParameters.Clear();
        this.sqldsCategorieDetails.SelectParameters.Add("idCategorie", Convert.ToString(this.gvCategories.DataKeys[row.RowIndex].Value));
        this.dvCategorieDetail.DataSource = this.sqldsCategorieDetails;
 
        this.dvCategorieDetail.DataBind();
 
        this.updPnlCategorieDetail.Update();
 
        this.mdlPopup.Show();*/
 
    }
 
    protected string Scrub(string text) { return text.Replace("&nbsp;", ""); }
 
 
    protected void btnSave_Click(object sender, EventArgs e)
    {
        if (gvCategories.DataSourceID == sqldsCategorieDetails.ID)
        {
            SaveCategorie(sqldsCategorieDetails, Convert.ToInt16(hidCategorieEditIndex.Value), txtCategorie.Text);
        }
 
        this.gvCategories.DataBind();
        this.updPnlCategorieDetail.Update();
        this.mdlPopup.Hide();
    }
 
    private void SaveCategorie(SqlDataSource ds, Int16 id, string lblCategorie)
    {
        SqlCommand cmd = new SqlCommand(ds.UpdateCommand);
 
        using (cmd)
        {
            using (cmd.Connection = new SqlConnection(ds.ConnectionString))
            {
                cmd.Connection.Open();
 
                cmd.Parameters.AddWithValue("@idCategorie", id);
                cmd.Parameters.AddWithValue("@Categorie", lblCategorie);
 
                cmd.ExecuteNonQuery();
            }
        }
    }
}

sauf que :

- Lorsque le modal popup s'affiche, le gridview disparait
- la methode update ne met pas a jour le champ

j'ai pas pu identifier le probleme, pourriez vous m'aider ?

**Nicolas Esprit** · 16/06/2010, 19h57

Bonjour,

As-tu essayé de mettre ton UpdatePanel en Always et de ne pas appeler la méthode Update() dans ton code-behind ?

En ce qui concerne la mise à jour des données, que se passe-t-il exactement ? Les données ne sont pas rafraîchies sur ta page ou dans ta base ?

**Msysteme** · 16/06/2010, 20h11

j'ai résolu le probleme de l'affichage

concernant le probleme de la mise a jour, la page se rafraichit mais les données ne sont pas mis a jour meme dans la BD.

malheureusement j'arrive pas a s'arreter sur u point d'arret pour voir ce qui se passe, le mode debug est activé mais ca me donne rien, prière de m'aider !

Modal popup et gridview

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager