|
En este primer capítulo veremos como implementar
Microsoft AJAX en sitios Webs ya existentes.
Iniciaremos esta sesión con uno de los controles
más utilizados de este conjunto de herramientas, el
UpdatePanel.
El UpdatePanel es el control por excelencia para recargas
parciales de nuestra página. Con la sola
utilización del mismo, podemos lograr que secciones de
nuestro sitio Web se recarguen evitando el conocido viaje de
ida y vuelta de datos hasta el servidor, con las consecuencias
de consumo de ancho de banda, o el parpadeo de toda la
página, entre otros, ya conocidos y normalmente
sufridos.
A continuación el video que muestra esto paso a
paso:
El código utilizado, a continuación:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Label ID="Label1" runat="server" Font-Names="Arial" Text="Seleccionar categoría: "></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource2"
DataTextField="CategoryName" DataValueField="CategoryID">
</asp:DropDownList>
<br />
<br />
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333"
GridLines="None">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="Nombre del Producto" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="Precio Unitario" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="Unidades en Stock" SortExpression="UnitsInStock" />
</Columns>
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [ProductName], [UnitPrice], [UnitsInStock] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" DefaultValue="0" Name="CategoryID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
|