This project is read-only.

Hand on Coding Walkthrough

Employee Info Starter Kit v5.0 - ASP.NET Web Form Edition | All Versions and Editions

Release Home Page - Direct Download Link - Installation Walkthrough - Hand on Coding Walkthrough - Technical Reference

As soon as you installed Employee Info Starter Kit, you will have some time to explore different features available there. After some time you will probably want to have your hand dirty to do some stuffs on your own! Here are some quick steps that shows how you can build data driven application features within just few minutes.

1. Create a New Database Table

First, let’s consider a new database table ‘Companies’ to be created in Employee Info Starter Kit database, based on which the data driven feature will be implemented.

image_thumb[2]

You can get the table creation script with few sample data under: Eisk.Web\App_Data\SQL\Extras\script.sql path.

2. Generate Data Access and Business Logic Components

Now that you have created the database table, you will need to build required Business Entity (aka: Data Container), Data Access and Business Logic classes. Fortunately Employee Info Starter Kit contains T4 templates (which has built-in support in Visual Studio), by which you can create these classes with just few clicks!

  • Open Visual Studio 2010 with an instance of Employee Info Starter Kit loaded.
  • Open Solution Explorer (Ctrl+W,S)
  • Go to <project root>App_Logic\Entity Model\ folder and double click “DatabaseContext.edmx” to open it. This file is basically an XML file that holds Entity Framework mapping with application layer and underlying database objects.
  • Right click on the designer and select “Update Model from Database…”
  • You will see the “Update Wizard”. Under the “Add” tab expand the “Tables” node. You will see a table “Companies” under the Tables node, as shown below:

image_thumb[5]

  • Click “Finish” button to close the wizard.
  • You will see the new table “Company” has been added in Entity Designer, along with residing initial entity “Employee”.
  • Hit “Ctrl+S” to save the model. Once you save the model, a cool magic will be happened behind the scene! Visual Studio will generate Business Entity, Data Access and Business Logic Layer classes relevant to “Company” data container automatically. Go to the following T-4 templates using Visual Studio Solution Explorer, which are also highlighted in the figure provided below.
    • Go to Eisk.Web\App_Logic\Business Entities\Business Entities.tt, expand it. You will see a new class “Eisk.BusinessEntities.Company” has been added under “Business Entities.cs” file.
    • Go to Eisk.Web\App_Logic\Data Access Layer\Data Access Layer.tt, expand it. You will see a new property “Companies” of type IObjectSet<Company> has been added under “Eisk.DataAccessLayer.DatabaseContext” class in “Data Access Layer.cs” file.
    • Go to Eisk.Web\App_Logic\Business Logic Layer\Business Logic Layer.tt, expand it. You will see a new file “CompanyBLL.Generated.cs” which belongs the “CompanyBLL” class containing CRUD methods required by UI (such as ASP.NET GridView, DetailsView, FormView etc) components.
    •  ARCHITECTURE NOTE: Employee Info Starter Kit architecture cleverly uses the benefit of partial class and partial method language feature, which enables you to put your business logic specific code in these generated code model, without touching the generated code at all! You can see such examples in “EmployeeBLL.Custom.Partial Methods.cs” and “EmployeeBLL.Custom.Queries.cs” files under “Eisk.Web\Business Logic Layer\” folder.

3. Building User Interfaces

This is out last step in this walkthrough, where we’ll create User Interfaces, based on “Company” business entity.

  • Hit “Shift+B” to build the project
  • Under the solution explorer, right click on the project node “Eisk.Web”, select “Add –> New Item”
  • In the “Add New Item” dialogue window, scroll down in the mid panel and select “Web Form using Master Page”
  • Put “companies.aspx” in Name textbox and hit “Add” button
  • In “Select a Master Page” window, from the left panel, navigate to “App_Resources\” folder and double click to “default.master” to select it.
  • Switch to “Design” view from bottom left part of Visual Studio
  • Hit “Ctrl+W,X” to load Visual Studio Toolbox
  • Go to “Data” section and double click “Gridview” to add a ASP.NET gridview control to page.

image_thumb[14]

  • Click to the small button located on the upper right corner part of gridview, which will show “Gridview Tasks” floating window
  • Select “Choose Data Source” dropdown and select “<New data source..>” (as shown in the figure above) from “Gridview Tasks” floating window
  • “Data Source Configuration Wizard” window will be appeared. Choose “Object” as the data source type.
  • Once you hit “Ok” button, you will see the “Configure Data Source” window
  • From “Choose your business object” dropdown, select “Eisk.BusinesssLogicLayer.CompanyBLL” and hit “Next”

image_thumb[16]

  • From the available tabs:
    • Select “GetAllCompaniesPaged” as the SELECT method under the SELECT tab
    • Select “UpdateCompany” as the UPDATE method under the UPDATE tab (which will be selected automatically)
    • Select “DeleteCompany” as the DELETE method under the DELETE tab
  • Click “Finish” in the “Configure Data Source” window.
  • Now from the “Gridview Tasks” floating window, select
    • Enable Paging
    • Enable Editing and
    • Enable Deleting”
  • Hit “F4” to show the property windows for GridView and provide the following values for the following properties
    • DataKeyNames: CompanyId
    • SkinID: GridView
  • Select the object data source control from the designer windows and hit “F4” to the property window to set the following values:
    • EnablePaging: True
    • SelectCountMethod: GetTotalCountForAllCompanies
    • SortParameterName: orderby
  • Go to solution explorer, open “Web.sitemap” and add a siteMapNode entry with the following value, which will cause your sample to be appeared in left navigation and breadcrumb automatically.
    • <siteMapNode url="~/companies.aspx" title="Companies" description="Companies" />
  • You are almost done! Go to solution explorer, right click “companies.aspx” and select “View in Browser”
  • Enjoy Edit, Delete, Sorting, Paging feature in GridView you just created!

 

image_thumb[23]

Now that you have some hand on experience with Employee Info Starter Kit, you may want to learn more about it’s technical details. See Technical Reference to satisfy your hunger!

Last edited Apr 1, 2011 at 12:47 AM by joycsc, version 16

Comments

jhlg May 19, 2012 at 1:41 AM 
How I can create a web page for details? please explain

enviso May 11, 2012 at 11:51 PM 
At Step 2. when adding the table Companies i get the following error:
...\Employee Info Starter Kit\C#\App_Logic\Entity Model\DatabaseContext.edmx' is not found or not supported. Type or select a different path.

So my Companies table is not created. Maybe i could create a new solution and add the project files to the new solution?

Ilya_Sergeev Apr 25, 2012 at 3:06 AM 
Sirs, maybe I miss something. But there are other hot keys in Visual Studio 2010. For instance, I can't open Solution Explorer hitting Ctrl+W,S. The correct combination is Ctr+Alt+L. It relates to the most of hot keys combinations in the article.