Saturday, December 04, 2010

WebFormContrib – Sample Part 2




This sample on the WebFormContrib mini-framework is a mixture of a form post and viewing an item. If you’d like a particular sample on how to do something or if I’m missing something, please leave a comment.

Down to the code…

  1. Create a New Web Site of 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 Default.aspx.cs file attached to the Default.aspx page
  5. Create a new Class in the App_Code folder ( I’m calling 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>();
SelectedEmployee =
new Employee();
}
public IList<Employee> Employees { get; set; }
public Employee SelectedEmployee { get; set; }
public string SelectedEmployeeEmailAddress { get; set; }
}

My Employee class looks like this:

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

public string DisplayName {get { return FirstName + " " + LastName;}}
public string Email { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}

  1. In the DefaultPage Class create in Step 6, add the following code:

public class DefaultPage : BasePage<SampleDataView>
{
private IRepository rep;
protected void Page_Load(object sender, EventArgs e)
{
rep =
DI.CreateSampleRepository();
initializePage();
}

private void initializePage()
{
ViewModel.Employees = rep.GetAllEmployeesResult;
}

protected void getEmployee(object sender, EventArgs e)
{
ViewModel.SelectedEmployee = rep.GetEmployeeBy(ViewModel.SelectedEmployeeEmailAddress);
}
}
  1. Create the IRepository Interface and a new DI Class that look like these:
public interface IRepository
{
IList<Employee> GetAllEmployeesResult { get; }
Employee GetEmployeeBy(string emailAddress);
}
public class DI
{
public static IRepository CreateSampleRepository()
{
return new SampleRepository();
}
}
  1. Let’s implement the IRepository real quick with a Class called SampleRepository. Looks like this:
public class SampleRepository : IRepository
{
public IList<Employee> GetAllEmployeesResult
{
get
{
var list = new List<Employee>();
list.Add(
new Employee("John", "Smith", "john@test.com"));
list.Add(
new Employee("Cindy", "Sue", "sue@test.com"));
list.Add(
new Employee("Speed", "Racer", "speed@test.com"));
list.Add(
new Employee("Joan", "Arc", "joan@test.com"));
return list;
}
}
public Employee GetEmployeeBy(string emailAddress)
{
return GetAllEmployeesResult.SingleOrDefault(x => x.Email == emailAddress);
}
}
  1. Now we get to see the fun part, the HTML code :)
<%@ Page Language="C#" AutoEventWireup="true" Inherits="DefaultPage" %>
<%
@ Import Namespace="WebFormContrib.Helpers" %>
<!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></title>
</
head>
<
body>
<
form id="form1" runat="server">
<
div>
<%=Html<DropDownList>(f=>f.SelectedEmployeeEmailAddress)
.Options(ViewModel.Employees, f=>f.DisplayName, f=>f.Email)
.Selected(ViewModel.SelectedEmployeeEmailAddress)
%>
<asp:Button ID="bLoadEmployee" runat="server" Text="Display Employee" OnClick="getEmployee" />

<
p>Selected Employee:<br />
Email <
strong><%=ViewModel.SelectedEmployee.DisplayName %></strong> at <%=ViewModel.SelectedEmployee.Email %></p>
</
div>
</
form>
</
body>
</
html>

You will notice the new DropDownList with Options and Selected extension methods. The Options extension has 2 other overloads that accepts the IEnumerable<string> or IEnumerable<ListItem> so you don’t have to specify the datafield and valuefield. The Selected extension gets the value of what needs to be selected after the postback or during an initial load.

When you run the app, you should see this:

image

After clicking Display Employee:

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...