Skip to content

View a Generic List with ASP.NET MVC. Step by Step With Preview 5

Updated: at 06:34 PM

I've just started (within the past 2 days) learning and building a prototype with Microsoft's new MVC platform.  It's really just another project type in Visual Studio 2008, but it changes the way you write asp.net applications.  So far I like it, but I'm still on the honeymoon.  I have not really tried to do anything complex yet, and because it's new to me, the simple things are still hard.  Scott Guthrie's posts posts have been helpful, as well as reading a pre-release of Manning's upcoming book ASP.NET MVC In Action by Jeffrey Palermo, Ben Scheirman and Jimmy Bogard.

So, as is normal, when I learn something new, the most obvious things just don't seem to work.  In this case, I'm just trying to make a web page that shows a list of data on a page.  I'm not going to try and teach MVC here, but if you are like me and struggled with this, this should help you get through some of the tough spots. My plan is to start a new MVC project with Visual Studio and show you what is necessary to generate the list.  Instead of going after a database, I'm going to use an simple business object class so you can run this without connecting to a database.  Not sure about you, but I never seem to be able to get the databases from example code working.  Scott Guthrie uses the Northwind databases Product table, and after spending about 15 minutes searching, all I could find was a Northwind database from sqlserver 2000 that does not have a Product table.  With my demo, you won't have to worry about that.  By the way, here is the project if you want to download it in action.

Download Solution - Solution.zip

So, Here we go.  First thing, Open Visual Studio 2008 and create a new MVC Project (not a web site, this will give you a csproj type file)

 image

Answer the next question YES because of course you want a Test Project.

image

You should get a Solution that looks like this:

image

Now, Add the business object that I will be using for this rest of this demonstration.  It's in the project file, our you just download it here (put this in your Models Directory).

BusinessObjectClass.cs BusinessObjectClass.cs

Now, let's create the MVC Controller.  Highlight the Controller's Folder and say Add Item (TMI if I show you that).  Here is the dialog.  Create the name of your controller with the syntax {Name}Controller.  In my case, the name is EmailListControler.cs.

image

Add the following code to your EmailListController.cs file to retrieve some data and return it as a View (which will be processed by the View Page coming up).

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
 
namespace Solution.Controllers
{
    public class EmailListController : Controller
    {
        public ActionResult Index()
        {
            var businessObject = new BusinessObject();
            List<BusinessObjectItem> members = 
                businessObject.GetMembers();
            return View("Index", members);
        }
    }
}using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
 
namespace Solution.Controllers
{
    public class EmailListController : Controller
    {
        public ActionResult Index()
        {
            var businessObject = new BusinessObject();
            List<BusinessObjectItem> members = 
                businessObject.GetMembers();
            return View("Index", members);
        }
    }
}

Then, create a new folder called EmailList under the Views folder.

 image

Then, create a MVCViewPage in the EmailList folder called Index.aspx.

 image

(Actually, choose MVC View Content Page, not MVC View Page)

Then, chose the Master Page to use as follows (there is only one):

image

The View will be referring to the ViewData.Model which somehow is associated with how the code behind is implemented. Make sure you have the ViewPage look like the following and the data type specified as below.  This is the file Index.aspx.cs which is in your email directory.

using System.Collections.Generic;
using System.Web.Mvc;
 
namespace Solution.Views.EmailList
{
    public partial class Index :
        ViewPage<IEnumerable<BusinessObjectItem>>
    {
    }
}

Now, for the Index.aspx file which is also in your Views/EmailList directory, enter the following between the content tags.

 

<table border="1">
    <tr>
        <td>
            <strong>Name</strong>
        </td>
        <td>
            <strong><strong>Email Address</strong>
        </td>
    </tr>
    <% foreach (var emailItem in ViewData.Model)
       { %>
    <tr>
        <td>
            <%= emailItem.Name %>
        </td>
        <td>
            <%=emailItem.Email %>
        </td>
    </tr>
    <% } %>
</table>

Notice that you have intellisense working on your foreach items.

 image

Finally, go to your Master Page and add a link for this new EmailList as follows.  That is, change the file /Views/Shared/Site.Master

<ul id="menu">              
    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
    <li><%= Html.ActionLink("About Us", "About", "Home")%></li>
    <li><a href="/EmailList">Email List</a></li>
</ul>

As you can see, I don't quite grock the ActionLinke parameters so I just put in a standard anchor tag.  Please comment below on what it should be to be able to reference /EmailList and I will update the article.  For now, lunch is coming and I need to run.

When you finally run that app, you get this for your new output.  Notice the New Email List Tab.

image

That's it for now.  Hope this helps!