A small demo ASP .NET 4.0 Web Application, using Entity Framework in a Master – Details view

21 June, 2010 Roel van Lisdonk 0 Comments 1 category

I just created a small demo ASP .NET 4.0 Web Application, it uses:

– ASP .NET 4.0

– Ajax

– Declarative DataBinding using a EntityDataSource

– DetailsView (master – details view, by using a RadGrid and a DetailsView)

– Entity Framework 4.0

– Masterpage and contentpages

– Microsoft SQL Server 2008 R2 RTM sample database AdventureWorks

– Stylesheet for the master page and per contentpage 1 styelsheet

– Telerik RadGrid

Screendump Master View (ProductCategoryOverview)

When you click on the “Edit” link a new page will be shown (ProductCategoryDetails.aspx)

Screendump Detials View (ProductCategoryDetails.aspx)

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Demo.WebApplication.Site" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>PowerPivot Demo WebApplication</title>
    <link href="Styles/Master.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server" class="form">
<telerik:RadScriptManager ID="generalRadScriptManager" runat="server" />
<!-- One RadAjaxManager for all content pages --> 
<telerik:RadAjaxManager ID="generalRadAjaxManager" runat="server" />
<!-- One RadAjaxLoadingPanel for all content pages --> 
<telerik:RadAjaxLoadingPanel ID="generalRadAjaxLoadingPanel" runat="server" BackgroundPosition="Center" Skin="Default" />
<div class="page">
    <div class="inside">
        <div class="header">
            <img alt="PowerPivot Logo" src="Images/PowerPivot_Logo.png"/>
            <!-- All postback's in the RadAjaxPanel1 will be converted to AJAX postback's and the page will not flicker on navigation -->
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="generalRadAjaxLoadingPanel">
                <div class="navigation">
                    <div class="navigationPrimary">
                        <ul> 
                            <li><asp:LinkButton ID="administrationLinkButton" runat="server" onclick="AdministrationLinkButton_Click">Manage</asp:LinkButton></li>
                            <li><asp:LinkButton ID="zakelijkLinkButton" runat="server" onclick="AdministrationLinkButton_Click">View</asp:LinkButton></li>
                        </ul>
                    </div>
                    <div class="navigationSeparator"></div>
                    <div class="navigationSecondairy">
                        <ul> 
                            <li><asp:LinkButton ID="customerLinkButton" runat="server" onclick="CustomerLinkButton_Click">Customer</asp:LinkButton></li>
                            <li><asp:LinkButton ID="ProductLinkButton" runat="server" onclick="ProductLinkButton_Click">Product</asp:LinkButton></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </telerik:RadAjaxPanel>
        </div>
        <div class="content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
        <div class="footerPlaceholder"></div>
    </div>
    <div class="footer">
        <ul class="footerLeftNav">
        <li>Contact Us</li>
        <li>Privacy Statement</li>
        </ul>
    </div>
</div>
</form>
</body>
</html>

ProductCategoryOverview.aspx

<%@ Page MasterPageFile="~/Site.master"  Language="C#" AutoEventWireup="true" CodeBehind="ProductCategoryOverview.aspx.cs" Inherits="Demo.WebApplication.ProductCategoryOverview" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="Styles/ProductCategoryOverview.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="PageContent" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadGrid 
        ID="PageRadGrid"
        AllowFilteringByColumn="True"
        AllowPaging="True"
        AllowSorting="True"
        AutoGenerateColumns="False"
        ShowStatusBar="True"
        DataSourceID="PageDataSource"
        EnableLinqExpressions="false"
        runat="server"
        PageSize="25">
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        <MasterTableView CommandItemDisplay="Top">
            <NoRecordsTemplate>
                <asp:Label runat="server" ID="noItemsLabel" Text="No records found!"></asp:Label>
            </NoRecordsTemplate>
            <CommandItemTemplate>
                <a class="addLink" href="ProductCategoryDetails.aspx?Id=-1">Add new record</a>
                <a class="refreshLink" href="ProductCategoryOverview.aspx">Refresh</a>
            </CommandItemTemplate>
            <SortExpressions>
               <telerik:GridSortExpression FieldName="Name" SortOrder="Ascending" />
            </SortExpressions>
            <Columns>
                <telerik:GridHyperlinkColumn
                    AllowFiltering="false"
                    UniqueName="EditColumn"
                    DataTextFormatString="Edit"
                    DataTextField="ProductCategoryID"
                    DataNavigateUrlFields="ProductCategoryID"
                    DataNavigateUrlFormatString="~/ProductCategoryDetails.aspx?Id={0}"
                    meta:resourcekey="EditColumn">
                </telerik:GridHyperlinkColumn>
                <telerik:GridButtonColumn 
                    CommandName="Delete" 
                    meta:resourcekey="DeleteColumn"
                    UniqueName="DeleteColumn"  
                    ConfirmText="Delete this customer?" 
                    Text="Delete">
                </telerik:GridButtonColumn>
                <telerik:GridBoundColumn 
                    AutoPostBackOnFilter="true"
                    CurrentFilterFunction="EqualTo"
                    DataField="ProductCategoryID"
                    FilterControlWidth="100px"
                    HeaderText="Id"
                    meta:resourcekey="ProductCategoryIDColumn" 
                    UniqueName="ProductCategoryID" 
                    SortExpression="ProductCategoryID"  
                    ShowFilterIcon="true">
                    <ItemStyle Width="100px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn 
                    AutoPostBackOnFilter="true"
                    CurrentFilterFunction="Contains"
                    DataField="Name"
                    FilterControlWidth="100px"
                    HeaderText="Name"
                    meta:resourcekey="NameColumn" 
                    UniqueName="Name" 
                    SortExpression="Name"  
                    ShowFilterIcon="true">
                    <ItemStyle Width="100px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn 
                    AutoPostBackOnFilter="true"
                    CurrentFilterFunction="Contains"
                    DataField="rowguid"
                    FilterControlWidth="200px"
                    HeaderText="rowguid"
                    meta:resourcekey="rowguidColumn" 
                    UniqueName="rowguid" 
                    SortExpression="rowguid"  
                    ShowFilterIcon="true">
                    <ItemStyle Width="200px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn 
                    AutoPostBackOnFilter="true"
                    CurrentFilterFunction="Contains"
                    DataField="ModifiedDate"
                    FilterControlWidth="200px"
                    HeaderText="ModifiedDate"
                    meta:resourcekey="ModifiedDateColumn" 
                    UniqueName="ModifiedDate" 
                    SortExpression="ModifiedDate"  
                    ShowFilterIcon="true">
                    <ItemStyle Width="200px" />
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    
    <asp:EntityDataSource 
        ID="PageDataSource" 
        runat="server" 
        EnableDelete="true" 
        EnableInsert="true" 
        EnableUpdate="true"
        ConnectionString="name=AdventureWorksEntities"
        DefaultContainerName="AdventureWorksEntities"
        EntitySetName="ProductCategory"
        >
    </asp:EntityDataSource>
</asp:Content>

ProductCategoryDetails.aspx

<%@ Page MasterPageFile="~/Site.master" Language="C#" AutoEventWireup="true" CodeBehind="ProductCategoryDetails.aspx.cs" Inherits="Demo.WebApplication.ProductCategoryDetails" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="Styles/ProductCategoryDetails.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="PageContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:DetailsView 
        ID="PageDetailsView" 
        runat="server"
        DataSourceID="PageDataSource"
        AllowPaging="false"
        AutoGenerateDeleteButton="true"
        AutoGenerateEditButton="true"
        AutoGenerateInsertButton="true"
        AutoGenerateRows="false"
        EmptyDataText="No record found!"
        DataKeyNames="ProductCategoryID" 
        onitemcommand="PageDetailsView_ItemCommand">
        <Fields>
            <asp:BoundField
                DataField="ProductCategoryID"
                HeaderText="ProductCategoryID">
            </asp:BoundField>
            <asp:BoundField
                DataField="Name"
                HeaderText="Name">
            </asp:BoundField>
            <asp:BoundField
                DataField="rowguid"
                HeaderText="rowguid">
            </asp:BoundField>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:Label ID="ModifiedDateHeaderLabel" runat="server" Text="ModifiedDate"></asp:Label>
                </HeaderTemplate>
                    <ItemTemplate>
                    <div>
                    <asp:Label ID="ModifiedDateLabel" runat="server" Text='<%# Bind("ModifiedDate") %>'></asp:Label>
                    <asp:LinkButton ID="ModifiedDateLinkButton" runat="server" CssClass="generateLinkButton" CommandName="GenerateModifiedDate">Generate</asp:LinkButton>
                    </div>
                </ItemTemplate>
                <EditItemTemplate>
                    <div>
                    <asp:TextBox ID="ModifiedDateTextBox" runat="server" Text='<%# Bind("ModifiedDate") %>'></asp:TextBox>
                    <asp:LinkButton ID="ModifiedDateLinkButton" runat="server" CssClass="generateLinkButton" CommandName="GenerateModifiedDate">Generate</asp:LinkButton>
                    </div>
                </EditItemTemplate>
            </asp:TemplateField>
        </Fields>
    </asp:DetailsView>
    <asp:EntityDataSource 
        ID="PageDataSource" 
        runat="server" 
        EnableDelete="true" 
        EnableInsert="true" 
        EnableUpdate="true"
        ConnectionString="name=AdventureWorksEntities"
        DefaultContainerName="AdventureWorksEntities"
        EntitySetName="ProductCategory"
        Where="it.[ProductCategoryID]=@ProductCategoryID">
        <WhereParameters> 
            <asp:QueryStringParameter DbType="Int32" Name="ProductCategoryID" QueryStringField="Id" /> 
        </WhereParameters> 
    </asp:EntityDataSource>
</asp:Content>

Note: In my application I must use “it” before the column name in the Where property of the EntityDataSource, else I will get an exception:

System.Web.HttpUnhandledException (0x80004005): Exception of type ‘System.Web.HttpUnhandledException’ was thrown. —> System.Data.EntitySqlException: ‘ProductCategoryID’ could not be resolved in the current scope or context. Make sure that all referenced variables are in scope, that required schemas are loaded, and that namespaces are referenced correctly. Near escaped identifier, line 6, column 1. at System.Web.UI.WebControls.EntityDataSourceView.ExecuteSelect(DataSourceSelectArguments arguments) at System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback) at System.Web.UI.WebControls.DataBoundControl.PerformSelect() at System.Web.UI.WebControls.BaseDataBoundControl.DataBind() at System.Web.UI.WebControls.DetailsView.DataBind() at System.Web.UI.WebControls.BaseDataBoundControl.EnsureDataBound() at System.Web.UI.WebControls.DetailsView.EnsureDataBound() at System.Web.UI.WebControls.CompositeDataBoundControl.CreateChildControls() at System.Web.UI.Control.EnsureChildControls() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) at System.Web.UI.Page.HandleError(Exception e) at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) at System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) at System.Web.UI.Page.ProcessRequest() at System.Web.UI.Page.ProcessRequestWithNoAssert(HttpContext context) at System.Web.UI.Page.ProcessRequest(HttpContext context) at ASP.productcategorydetails_aspx.ProcessRequest(HttpContext context) in c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\f1d0d8b4\9eb9cfbd\App_Web_2z53k4nc.5.cs:line 0 at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously

ProductCategoryDetails.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Demo.WebApplication
{
    public partial class ProductCategoryDetails : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void PageDetailsView_ItemCommand(object sender, DetailsViewCommandEventArgs e)
        {
            if (this.PageDetailsView.DefaultMode == DetailsViewMode.ReadOnly)
            {
                if (e.CommandName.Equals("GenerateModifiedDate", StringComparison.CurrentCultureIgnoreCase))
                {
                    Label modifiedDateLabel = this.PageDetailsView.FindControl("ModifiedDateLabel") as Label;
                    modifiedDateLabel.Text = DateTime.Now.ToString();
                }
            }
            else
            {
                if (e.CommandName.Equals("GenerateModifiedDate", StringComparison.CurrentCultureIgnoreCase))
                {
                    TextBox modifiedDateTextbox = this.PageDetailsView.FindControl("ModifiedDateTextbox") as TextBox;
                    modifiedDateTextbox.Text = DateTime.Now.ToString();
                }
            }
        }
    }
}

Master.css

*
{
    margin: 0px; /* All elements start with 0px margin */
    padding: 0px;  /* All elements start with 0px padding */
}
html
{
    height: 100%; /* Must be 100% for footer at the bottom of the page */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: normal;
    color: #222;
}
body
{
    height: 100%; /* Must be 100% for footer at the bottom of the page */
}
form
{
    height: 100%; /* Must be 100% for footer at the bottom of the page */
}
a
{
    color: #222;
    text-decoration: none;
}
a:hover
{
    color: #222;
    text-decoration: underline;
}
div.page
{
    margin-right: auto; /* Center the page */
    margin-left:auto; /* Center the page */
    height: 100%;  /* Must be 100% for footer at the bottom of the page */
    text-align: left;
    width: 1000px; /* Fixed width for screen resolution 1024px optimalisation */
}
div.inside
{
    border-left: 1px solid rgb(224,225,226);
    border-right: 1px solid rgb(224,225,226);
    min-height: 100%;  /* Must be 100% for footer at the bottom of the page, using min-height instead of height allows content to be larger then intial page size */
    margin-bottom: -33px; /* Negative bottom margin is used for correct the 100% height with the height of the footer, else vertical scrollbars will be shown */
}
div.header
{
    padding: 10px 0px 8px 0px;
}
div.header img
{
    height: 60px;
    margin-left: 20px;
}
div.content
{
    color: #666;
    font-size: 70%;
    padding: 20px 15px 15px 15px;
}
div.navigation
{
    border-bottom: 2px solid rgb(143,208,64);
    position: absolute;
    top: 0px;
    width: 998px;
}
div.navigationSeparator
{
    border-top: 1px solid rgb(222,222,222);
    margin-left: 279px;
}
div.navigationPrimary ul
{
    height: 26px;
    margin-top: 13px;
    padding-left: 299px;
}
div.navigationPrimary ul li
{
    background: url(../Images/TabLeft.gif) no-repeat scroll left top;
    float: left; /* Makes the unoderdered list flow horizontal instead of vertical */
    font-weight: bold;
    font-size: 75%;
    height: 26px;
    line-height: 26px;
    list-style-type: none; /* Don't display bullets */
    margin: 0px 4px 0px 0px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
div.navigationPrimary ul li a
{
    background: url(../Images/TabRight.gif) no-repeat scroll right top;
    float: left;
    height: 26px;
    line-height: 26px;
    padding: 0px 15px 0px 15px;
}
div.navigationPrimary ul li a:hover
{
    color: rgb(143,208,64);
}
div.navigationSecondairy ul
{
    padding-left: 310px;
    margin-top: 
}
div.navigationSecondairy ul li
{
    border-left: 1px solid rgb(143,208,64);
    float: left; /* Makes the unoderdered list flow horizontal instead of vertical */
    font-size: 80%;
    list-style-type: none; /* Don't display bullets */
    margin: 10px 12px 10px 0px;
    padding-left: 10px;
    white-space: nowrap;
}
div.navigationSecondairy ul li a
{
    float: left;
}
div.navigationSecondairy ul li a:hover
{
    color: rgb(143,208,64);
}
div.footerPlaceholder
{
    height: 33px; /* The height should be equal to the full height of the footer (including any padding or borders you may add). Without the "footerPlaceholder" div, the content will flow beneath the footer */
}
div.footer
{
    background-color: rgb(143,208,64);
    color: rgb(255,255,255);
    font-size: 60%;
    padding: 10px 46px 10px 46px;
    width: 906px;
}
ul.footerLeftNav
{
    margin: 0px;
    padding: 0px;
    page-break-inside: avoid;
    list-style-position: outside;
    list-style-type: none;
}
ul.footerLeftNav li
{
    display: inline;
    padding-right: 18px;
}

ProductCategoryOverview.css

div.content
{
    padding-top: 30px;
}
div.content a:hover
{
    text-decoration: underline;
}
a.addLink
{
    background: url(../Images/AddCross.gif) no-repeat scroll left center;
    cursor: pointer;
    float: left;
    margin: 5px 0px 5px 10px;
    padding-left: 20px;
}
a.refreshLink
{
    background: url(../Images/Refresh.gif) no-repeat scroll right center;
    cursor: pointer;
    float: right;
    margin: 5px 10px 5px 0px;
    padding-right: 22px;
}

ProductCategoryDetails.css

div.content a.generateLinkButton
{
    margin-left: 25px;
    color: Blue;
}
div.content table
{
    border: none;
}
div.content td
{
    border: none;
    padding: 2px 5px 2px 5px;
    white-space: nowrap;
}
div.content input[type=text]
{
    width: 300px;
}

Tags: ASP .NET Entity Framework

Category: Uncategorized

One Reply to “A small demo ASP .NET 4.0 Web Application, using Entity Framework in a Master – Details view”

Pingback: Using the ASP .NET 4.0 DetailsView ItemCommand event to set the value of a fields textbox (edit modus) or label (read modus) « Knowledgebase

This site uses Akismet to reduce spam. Learn how your comment data is processed.