Thursday, December 02, 2010

WebFormContrib – Sample Part 1




After using the WebFormContrib mini-framework the past couple weeks, I’ve grown to really like it. I thought I’d share some of the ways I’m using it in hopes that you might benefit from it too.

This first sample is on how to show data on a page and not have to worry about any of the form elements. We will also not use any asp.net controls like gridviews, literals, or labels. So, here we go using Visual Studio 2008…

  1. Create a New Web Site or Use an Existing
  2. Download and reference the WebFormContrib DLL
  3. Delete the CodeFile="Default.aspx.cs" Inherits="_Default" in the <%@ Page area
  4. Delete the actual ….aspx.cs
  5. Create a new Class file in the App_Code folder ( I called mine DefaultPage)
  6. Inherit the DefaultPage from BasePage<SampleDataView>
  7. Create a new Class file called SampleDataView and make it look like this:
public class SampleDataView
{
public SampleDataView()
{
Employees =
new List<Employee>();
}
public string DepartmentName { get; set; }
public IList<Employee> Employees { get; set; }
public int TotalEmployees { get { return Employees.Count; } }
}

The above class is just made up of some practical things that your view might contain. My Employee class just looks like this:

public class Employee
{
public Employee(string firstName, string lastName)
{
FirstName = firstName;
LastName = lastName;
}

public string FirstName { get; set; }
public string LastName { get; set; }
}

  1. Back in the DefaultPage Class that we created in Step 6, add the following code:

public class DefaultPage : BasePage<SampleDataView>
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
return;

initializePage();
}

private void initializePage()
{
//this is where you'd call your repository and possibly automapper to map from your domain model to your view model
ViewModel.DepartmentName = "Sample Department";
ViewModel.Employees.Add(
new Employee("John", "Smith"));
ViewModel.Employees.Add(
new Employee("Cindy", "Sue"));
ViewModel.Employees.Add(
new Employee("Speed", "Racer"));
ViewModel.Employees.Add(
new Employee("Joan", "Arc"));
}
}

  1. Now we can setup our view in the Default.aspx page like this:

<%@ Page Language="C#" AutoEventWireup="true" Inherits="DefaultPage" %>
<!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 runat="server">
<
title>WebFormContrib Sample Part 1</title>
</
head>
<
body>
<
form id="form1" runat="server">
<h3><%=ViewModel.DepartmentName %></h3>
<
p>Total Employees: <%=ViewModel.TotalEmployees %></p>
<
ul>
<% foreach (var employee in ViewModel.Employees) {%>
<li><%=employee.FirstName %> <%=employee.LastName %></li>
<% }%>
</ul>
</form>
</
body>
</
html>

As you can see, it looks pretty much exactly like MVC and it allows you to keep complete control of your HTML. When you run your app, you should see this:

image

Download the sample project here.

Please comment if you have any questions or suggestions. Thanks for reading!


Shout it

kick it on DotNetKicks.com

blog comments powered by Disqus
Related Posts Plugin for WordPress, Blogger...