Visualizzare e modificare i dati di un GridView in una pagina di dettaglio

Uno scenario molto comune nelle applicazioni web vede una griglia contenente un elenco - spesso molto esteso - di dati, e selezionando una riga appare una maschera che mostra i dettagli relativi alla riga selezionata. In Asp.Net si può ottenere questo accoppiando opportunamente un controllo GridView a un DetailsView.

Visualizzare form di dettaglio nella stessa pagina web

  • Creare un SqlDataSource per la griglia che conterrà l'elenco degli elementi
  • Creare la griglia (GridView) e abilitare l'opzione di selezione
  • Aggiungere un SqlDataSource per la maschera di dettaglio e impostare il fitro sulla query (pulsante Where) associandolo alla riga selezionata nel GridView
  • Aggiungere un controllo DetailsView e associarlo al SqlDataSource
  • Facoltativo: attivare la modifica del DetailsView

Di seguito riporto il codice che si ottiene. Contiene anche l'html per avere i due controlli affiancati anziché uno sotto l'altro.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DetailsView Demo - www.Dev-oClock.com</title>
	<style type="text/css">
		.grid {float:left;}
		.dettaglio {float:left; margin-left: 20px;}
	</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
		<div class="wrap">
			<%-- Data Source elenco fornitori --%>
			<asp:SqlDataSource ID="SqlDataSource_Elenco" runat="server" 
				ConnectionString="<%$ ConnectionStrings:Grid_List_DB %>" 
				SelectCommand="SELECT [SupplierID], [CompanyName], [City], [Phone], [Country] FROM [Suppliers] ORDER BY [CompanyName]">
			</asp:SqlDataSource>
			
			<%-- Grid elenco fornitori --%>
			<div class="grid">
				<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" 
					CellPadding="4" DataKeyNames="SupplierID" DataSourceID="SqlDataSource_Elenco" 
					ForeColor="#333333" GridLines="None">
					<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
					<Columns>
						<asp:CommandField ShowSelectButton="True" />
						<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" ReadOnly="True" 
							SortExpression="SupplierID" Visible="False" />
						<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
						<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
						<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />
						<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
					</Columns>
					<EditRowStyle BackColor="#999999" />
					<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
					<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
					<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
					<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
					<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
					<SortedAscendingCellStyle BackColor="#E9E7E2" />
					<SortedAscendingHeaderStyle BackColor="#506C8C" />
					<SortedDescendingCellStyle BackColor="#FFFDF8" />
					<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
				</asp:GridView>
			</div>
			<%-- Data Source dettagli fornitore --%>
			<div class="dettaglio">
				<asp:SqlDataSource ID="SqlDataSource_Dettaglio" runat="server"
					ConflictDetection="CompareAllValues"
					ConnectionString="<%$ ConnectionStrings:Grid_List_DB %>"
					DeleteCommand="DELETE FROM [Suppliers] WHERE [SupplierID] = @original_SupplierID AND [CompanyName] = @original_CompanyName AND (([Address] = @original_Address) OR ([Address] IS NULL AND @original_Address IS NULL)) AND (([City] = @original_City) OR ([City] IS NULL AND @original_City IS NULL)) AND (([PostalCode] = @original_PostalCode) OR ([PostalCode] IS NULL AND @original_PostalCode IS NULL)) AND (([Country] = @original_Country) OR ([Country] IS NULL AND @original_Country IS NULL)) AND (([Phone] = @original_Phone) OR ([Phone] IS NULL AND @original_Phone IS NULL)) AND (([HomePage] = @original_HomePage) OR ([HomePage] IS NULL AND @original_HomePage IS NULL))"
					InsertCommand="INSERT INTO [Suppliers] ([SupplierID], [CompanyName], [Address], [City], [PostalCode], [Country], [Phone], [HomePage]) VALUES (@SupplierID, @CompanyName, @Address, @City, @PostalCode, @Country, @Phone, @HomePage)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [SupplierID], [CompanyName], [Address], [City], [PostalCode], [Country], [Phone], [HomePage] FROM [Suppliers] WHERE ([SupplierID] = @SupplierID)" UpdateCommand="UPDATE [Suppliers] SET [CompanyName] = @CompanyName, [Address] = @Address, [City] = @City, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [HomePage] = @HomePage WHERE [SupplierID] = @original_SupplierID AND [CompanyName] = @original_CompanyName AND (([Address] = @original_Address) OR ([Address] IS NULL AND @original_Address IS NULL)) AND (([City] = @original_City) OR ([City] IS NULL AND @original_City IS NULL)) AND (([PostalCode] = @original_PostalCode) OR ([PostalCode] IS NULL AND @original_PostalCode IS NULL)) AND (([Country] = @original_Country) OR ([Country] IS NULL AND @original_Country IS NULL)) AND (([Phone] = @original_Phone) OR ([Phone] IS NULL AND @original_Phone IS NULL)) AND (([HomePage] = @original_HomePage) OR ([HomePage] IS NULL AND @original_HomePage IS NULL))">
					<DeleteParameters>
						<asp:Parameter Name="original_SupplierID" Type="Int32" />
						<asp:Parameter Name="original_CompanyName" Type="String" />
						<asp:Parameter Name="original_Address" Type="String" />
						<asp:Parameter Name="original_City" Type="String" />
						<asp:Parameter Name="original_PostalCode" Type="String" />
						<asp:Parameter Name="original_Country" Type="String" />
						<asp:Parameter Name="original_Phone" Type="String" />
						<asp:Parameter Name="original_HomePage" Type="String" />
					</DeleteParameters>
					<InsertParameters>
						<asp:Parameter Name="SupplierID" Type="Int32" />
						<asp:Parameter Name="CompanyName" Type="String" />
						<asp:Parameter Name="Address" Type="String" />
						<asp:Parameter Name="City" Type="String" />
						<asp:Parameter Name="PostalCode" Type="String" />
						<asp:Parameter Name="Country" Type="String" />
						<asp:Parameter Name="Phone" Type="String" />
						<asp:Parameter Name="HomePage" Type="String" />
					</InsertParameters>
					<SelectParameters>
						<asp:ControlParameter ControlID="GridView1" Name="SupplierID"
							PropertyName="SelectedValue" Type="Int32" />
					</SelectParameters>
					<UpdateParameters>
						<asp:Parameter Name="CompanyName" Type="String" />
						<asp:Parameter Name="Address" Type="String" />
						<asp:Parameter Name="City" Type="String" />
						<asp:Parameter Name="PostalCode" Type="String" />
						<asp:Parameter Name="Country" Type="String" />
						<asp:Parameter Name="Phone" Type="String" />
						<asp:Parameter Name="HomePage" Type="String" />
						<asp:Parameter Name="original_SupplierID" Type="Int32" />
						<asp:Parameter Name="original_CompanyName" Type="String" />
						<asp:Parameter Name="original_Address" Type="String" />
						<asp:Parameter Name="original_City" Type="String" />
						<asp:Parameter Name="original_PostalCode" Type="String" />
						<asp:Parameter Name="original_Country" Type="String" />
						<asp:Parameter Name="original_Phone" Type="String" />
						<asp:Parameter Name="original_HomePage" Type="String" />
					</UpdateParameters>
				</asp:SqlDataSource>

				<%-- DetailsView dettagli fornitore --%>
				<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="350px"
						DataKeyNames="SupplierID" DataSourceID="SqlDataSource_Dettaglio"
						CellPadding="4" ForeColor="#333333" GridLines="None">
					<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
					<CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
					<EditRowStyle BackColor="#999999" />
					<FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
					<Fields>
						<asp:CommandField ShowEditButton="True" />
					</Fields>
					<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
					<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
					<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
					<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
				</asp:DetailsView>
			</div>
		</div>
		<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
	</div>
    </form>
</body>
</html>

Questo è il risultato: selezionando una riga della griglia, a destra appare il form per la visualizzazione dei dettagli con il pulsante Edit che permette la modifica.
Per quanto riguarda la concurrency, la validazione dell'input e la richiesta di conferma prima di eliminare una riga si applicano le stesse procedure già esposte per il GridView in un articolo precedente.

Visualizzare e modificare i dati in un pagina web esterna

In molti casi una pagina web contiene la griglia con l'elenco degli elementi, e cliccando su un collegamento si apre una seconda pagina web nella quale è possibile visualizzare e volendo anche modificare i dati.

Pagina con l'elenco

  • Creare un SqlDataSource
  • Aggiungere un GridView e associarlo al DataSource
  • Aggiungere al GridView una colonna di tipo HyperLinkField.
    Impostare le proprietà della colonna come nell'immagine per creare i link che rimandano alla pagina di dettaglio passando in querystring l'id del record interessato
<Columns>
	<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" ReadOnly="True" />
	<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" />
	<asp:BoundField DataField="City" HeaderText="City" />
	<asp:BoundField DataField="Country" HeaderText="Country" />
	<asp:HyperLinkField DataNavigateUrlFields="SupplierID"
		DataNavigateUrlFormatString="aaa_dettaglio.aspx?sup={0}" 
		ShowHeader="False" Target="_blank" Text="Dettaglio" />
</Columns>

Pagina di dettaglio

  • Creare un SqlDataSource impostando il filtro (pulsante WHERE) sul parametro Querystring (chiamato "sup" in questo esempio).
  • Aggiungere un controllo di tipo DetailsView e associarlo al DataSource

Autore: Sergio Roberto Boarina