Lets start building SmartUI application
- Fire up Visual Studio and create a new blank solution named ASPPatterns.Chap3.SmartUI
and add a new web application to it named ASPPatterns.Chap3.SmartUI.Web - add a new SQL express database to
the project by right-clicking on the web site and selecting Add ➪ New Item and selecting a SQL Server Database. Name the database Shop.mdf. - Now you need to add a table Products to the database
- Add the data to the table
- With the table created, you can simply drag and drop it onto the Default.aspx page.This automatically creates a GridView and adds a SQLDataSource control to the page.You should now be able to run the web application and see all the products listed
from the database
This is how now code looks like
<body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductId" DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display."> <Columns> <asp:BoundField DataField="ProductId" HeaderText="ProductId" ReadOnly="True" SortExpression="ProductId" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" /> <asp:BoundField DataField="RRP" HeaderText="RRP" SortExpression="RRP" /> <asp:BoundField DataField="SellingPrise" HeaderText="SellingPrise" SortExpression="SellingPrise" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ShopConnectionString1 %>" DeleteCommand="DELETE FROM [Products] WHERE [ProductId] = @ProductId" InsertCommand="INSERT INTO [Products] ([ProductId], [ProductName], [RRP], [SellingPrise]) VALUES (@ProductId, @ProductName, @RRP, @SellingPrise)" ProviderName="<%$ ConnectionStrings:ShopConnectionString1.ProviderName %>" SelectCommand="SELECT [ProductId], [ProductName], [RRP], [SellingPrise] FROM [Products]" UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [RRP] = @RRP, [SellingPrise] = @SellingPrise WHERE [ProductId] = @ProductId"> <DeleteParameters> <asp:Parameter Name="ProductId" Type="Int32" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="ProductId" Type="Int32" /> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="RRP" Type="Decimal" /> <asp:Parameter Name="SellingPrise" Type="Decimal" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="RRP" Type="Decimal" /> <asp:Parameter Name="SellingPrise" Type="Decimal" /> <asp:Parameter Name="ProductId" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> </div> </form> </body>
This is how our page looks like..
This now the modified code after adding template columns..
<body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductId" DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display." OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="ProductId" HeaderText="ProductId" ReadOnly="True" SortExpression="ProductId" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" /> <asp:BoundField DataField="RRP" HeaderText="RRP" SortExpression="RRP" /> <asp:BoundField DataField="SellingPrise" HeaderText="SellingPrise" SortExpression="SellingPrise" /> <asp:TemplateField HeaderText="Discount"> <ItemTemplate> <asp:Label runat="server" ID="lblDiscount"></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Savings"> <ItemTemplate> <asp:Label runat="server" ID="lblSavings"></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ShopConnectionString1 %>" DeleteCommand="DELETE FROM [Products] WHERE [ProductId] = @ProductId" InsertCommand="INSERT INTO [Products] ([ProductId], [ProductName], [RRP], [SellingPrise]) VALUES (@ProductId, @ProductName, @RRP, @SellingPrise)" ProviderName="<%$ ConnectionStrings:ShopConnectionString1.ProviderName %>" SelectCommand="SELECT [ProductId], [ProductName], [RRP], [SellingPrise] FROM [Products]" UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [RRP] = @RRP, [SellingPrise] = @SellingPrise WHERE [ProductId] = @ProductId"> <DeleteParameters> <asp:Parameter Name="ProductId" Type="Int32" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="ProductId" Type="Int32" /> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="RRP" Type="Decimal" /> <asp:Parameter Name="SellingPrise" Type="Decimal" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="RRP" Type="Decimal" /> <asp:Parameter Name="SellingPrise" Type="Decimal" /> <asp:Parameter Name="ProductId" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> </div> </form> </body>
One thought on “Anti Pattern – Smart UI Part 2”