• John Katsiotis
• asp.net, WebForms, MVP, Tutorials, Design Patterns,
• 22 comments

Objectives

• Build Contact Page (a page that interacts with a data-storage)
• Build a Contact List Page (a page with a gird)
• Do it using ASP.NET WebForms
• Create Unit Tests

We will use the MVP pattern and the open-source project WebFormsMVP to accomplish that! Can’t wait? Download the sample!

Ready?

First we open Visual Studio 2010 and create a new ASP.NET Web Application Project like the screenshot.

Then we add a new project to our solution which contains our Application Logic like the screenshot.

Next we fire-up Package Manager Console, set as Default Project .Web  and type

Install-Package WebFormsMvp

Repeat the above setting as Default Project .Logic

Now we are ready to create our Database and our Database Access Layer.

Because in this post this is the less important part our DB is a static List and has a table which is represented by the Contact class. Our DAL is the following:

Contact.cs

public class Contact
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Message { get; set; }
    DateTime? _CreatedAt = null;
    public DateTime CreatedAt
    {
        get
        {
            if (!_CreatedAt.HasValue)
                _CreatedAt = DateTime.Now;
            return _CreatedAt.Value;
        }
    }
}

IContactRepository.cs

public interface IContactRepository
{
    List<Contact> FindAll();
    void Save(Contact entity);
}

ContactRepository.cs

public class ContactRepository : IContactRepository
{
    private static List<Contact> Db;
    static ContactRepository() { Db = new List<Contact>(); }
    public List<Domain.Contact> FindAll() { return Db; }
    public void Save(Domain.Contact entity) { Db.Add(entity); }
}

And a screenshot:

Next let’s start designing and implementing our contact page.

The page needs to handle some data (a model). Let’s create a ContactModel class

public class ContactModel
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Message { get; set; }
    public enProcessState ProcessState { get; set; }
}

The enProcessState is the following self-explained enum

public enum enProcessState
{
    Pending,
    Saved
}

Remember we are using the MVP pattern and we have still to implement the View and the Presenter.

Let’s create our view. Because a view is possible to be implemented in various ways (desktop, mobile client etc.) we will first create an interface or a contract that we want to code against. Our interface looks like this:

public interface IContactView : WebFormsMvp.IView<ContactModel>
{
    event EventHandler<EventArgs> Contacting;        
}

The view inherits from WebFormsMvp.IView and defines an event. It also defines a model with the type of ContactModel.

Last but not least let’s implement our Presenter. All the above take place inside .Logic project and not inside Web.

Our presenter looks like this:

public class ContactPresenter : WebFormsMvp.Presenter<IContactView>
{
    private readonly IContactRepository _repository;
    public ContactPresenter(IContactView view)
        : this(view, new ContactRepository()) { }
    public ContactPresenter(IContactView view, IContactRepository repository)
        : base(view)
    {
        _repository = repository;
        View.Contacting += new EventHandler<EventArgs>(Contacting);
    }

    void Contacting(object sender, EventArgs e)
    {
        if (View.Model == null || View.Model.ProcessState == Views.Models.enProcessState.Saved)
            return;
        _repository.Save(View.Model.ToDomainModel());
        View.Model.ProcessState = Views.Models.enProcessState.Saved;
    }
}

The presenter inherits from WebFormsMvp.Presenter and defines the type of view that is handling. It also defines two constructors (for now). To explain in a single sentence the main purpose of the presenter I will say that some times is called also a Controller.

Everything looks right except we don’t have an implementation for our View! Let’s move to our .Web project to build one.

We will create a user control named ContactControl.ascx. The controls code-behind looks like this:

public partial class ContactControl : WebFormsMvp.Web.MvpUserControl<ContactModel>, 
    LoveForWebForms.Logic.Views.IContactView
{
    public event EventHandler<EventArgs> Contacting;
    private void OnContacting()
    {
        if (Contacting != null)
            Contacting(this, EventArgs.Empty);
    }
    protected void btnContactUs_Click(object sender, EventArgs e)
    {
        Model.Name = txtName.Text;
        Model.Email = txtEmail.Text;
        Model.Message = txtMessage.Text;
        OnContacting();
        View activeView = Model.ProcessState == enProcessState.Saved ? vSaved : vContact;
        mv.SetActiveView(activeView);
    }
}

and mark-up looks like this

<asp:MultiView runat="server" ID="mv" ActiveViewIndex="0">
    <asp:View runat="server" ID="vContact">
        <fieldset>
            <legend>Contact Us</legend>
            <table>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtName" />
                        <asp:RequiredFieldValidator ErrorMessage="*" ControlToValidate="txtName" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Email
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtEmail" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Message
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtMessage" TextMode="MultiLine" Rows="10" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Button Text="Contact Us" runat="server" OnClick="btnContactUs_Click" />
                    </td>
                </tr>
            </table>
        </fieldset>
    </asp:View>
    <asp:View runat="server" ID="vSaved">
        Contact request was Saved! <a href="ContactList.aspx">View all</a> contact requests.
    </asp:View>
</asp:MultiView>

Our markup is pretty much standard. In our code-behind file when the user clicks the button we prepare our Model and raise the Contacting Event. If everything went OK the ProcessState property of our model becomes Saved and the appropriate view of MultiView control is displayed.

All we wave to do is to create a page and put our UserControl inside. Just a simple page.

But I didn’t declared anywhere the presenter!! How is ContactPresenter is selected? This is where MvpWebForms projects comes!

Pay attention to names. ContactControl.ascx, ContactPresenter,IContactView. When you follow these conventions (just like MVC has it’s own) no further actions are required. If something like this isn’t possible you can use attributes like

[WebFormsMvp.PresenterBinding(typeof(LoveForWebForms.Logic.Presenters.ContactPresenter))]

in the user control to indicate which presenter to use.

Dependency Injection

Let’s say that I am a WebForms developer. When I ‘m around MVC developers I want to be able to say things like: “Yeah Dependency injection rocks!” or “When you say DI god kills a kitten, but still using it in my projects! DI DI DI…”

Can I do it? Is it helpful in any way? Yes and yes!

Go to Package Manager Console target the Web Project and type

Install-Package WebForms.Mvp.Autofac

You might notice that WebFormsMvp has packages for Autofac, Unity and Castle. Let’s use Autofac for now.

After the package is being installed we make the following changes to global.asax

public class Global : System.Web.HttpApplication, IContainerProviderAccessor
{
    protected void Application_Start(object sender, EventArgs e)
    {
        var builder = new ContainerBuilder();
        builder.RegisterType<ContactRepository>().As<IContactRepository>();
        _containerProvider = new ContainerProvider(builder.Build());            
        PresenterBinder.Factory = new AutofacPresenterFactory(_containerProvider.ApplicationContainer);
    }
    static IContainerProvider _containerProvider;        
    public IContainerProvider ContainerProvider
    {
        get { return _containerProvider; }
    }
}

Implement IContainerProviderAccessor and add the code above to Application_Start.

Now let’s change our ContactPresenter and remove the first constructor. Now our presenter looks like

public class ContactPresenter : Presenter<IContactView>
{
    private readonly IContactRepository _repository;
    public ContactPresenter(IContactView view, IContactRepository repository)
        : base(view)
    {
        _repository = repository;
        view.Contacting += new EventHandler(view_Contacting);
    }

    void view_Contacting(object sender, EventArgs e)
    {
        if (View.Model.ProcessState == Views.Models.enProcessState.Saved)
            return;

        _repository.Save(View.Model.ToDomainModel());
        View.Model.ProcessState = Views.Models.enProcessState.Saved;
    }
}

The instantiation of IContactRepository is taken care by Autofac.

What about creating a grid page with paging that also uses an ObjectDataSource?

What about validation?

Because this post is really long those scenarios are implemented in the source code! So download and see for your self! But really quick I am posting a view screenshots to get an idea. When you download the project don’t forget to run the Install-Package command to get dependencies from Nuget as they are not included by default.

What about testing?

I 've written a detailed article on DotNetSlackers about testing!

I think it’s time for refactor!

Download Sample

When you download the project don’t forget to run the Install-Package command to get dependencies from Nuget as they are not included by default. Commands are

1. Install-Package WebFormsMvp for .Logic project
2. Install-Package WebFormsMvp.Autofac for .Web project

 

Add a Comment (gravatar-enabled)

Name

Email

Comment

Enter the words on the picture