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>
learnbycode 
One thought on “Anti Pattern – Smart UI Part 2”