In the last “Quick Tip” we talked about the model and we pretty much reached the conclusion that it can be anything. After all, as long as the View that we pass the model to can interpret it and render it, it’s all good.

In any case, there are two simple ways of passing data to a view:

·        ViewData dictionary

·        Passing it as a parameter on the controller’s action method

Let’s look at both cases:

Create a new ASP.NET MVC Application.

Create a new Action Method in your Home controller:

public ActionResult Demo(string id)

{

    ViewData["message"] = "Hello " + id;

    return View();

}


Tipically, if you want to pass something as simple as a string, the best way is to do it through the ViewData dictionary. Your view will be able to access it and retrieve the data you passed in very easily.

Right-click on top of your Action method and choose Add View, then change the view code like this:

<h2><%= Html.Encode(ViewData["message"]) %></h2>


If you didn’t change the default route in global.asax, browsing to http://<yoursite>/Home/Demo/Bloggers will render a page saying “Hello Bloggers” (I’ll talk about routes in a later post).

If you want to pass a slightly more complex object, usually it’s simpler to pass it as a parameter. In your Models folder, add a class and use the following code:

public class Person

{

    public string Name;

    public int Age;

 

    public Person(string name, int age)

    {

        Name = name;

        Age = age;

    }

}



Back in the Home controller add a new Action method with this code:

public ActionResult ShowPerson()

{

    Person p = new Person("Nuno Silva", 30);

    return View("ShowPerson",p);

}


Notice that we specify the name of the view we want to return, but in this case it wouldn’t be needed as it will default to a view with the same name as the action method.

Before you go any further, build your application. Then right-click the action method and choose “Add View”, but this time choose to add a strongly-typed view, choose the Person class from the data class combo, and choose the Details template (since you are trying to display a single object).

The view will generate and you can see on top a very important attribute:

Inherits="System.Web.Mvc.ViewPage<MvcApplication2.Models.Person>"


This will be in the page directive and basically sets the environment for you. If you look at the markup in your view, it should resemble this:

<h2>ShowPerson</h2>

 

<fieldset>

    <legend>Fields</legend>

    <p>

        Name:

        <%= Html.Encode(Model.Name) %

    </p>

    <p>

        Age:

        <%= Html.Encode(Model.Age) %>

    </p>

</fieldset>


If you now browse to http://<yoursite>/Home/ShowPerson you will see the information we prepared in our controller action method. Notice that we have full intellisense support and we can benefit from a strongly-typed model to work with. So, even if you had chosen the empty template, you could easily build the UI as you wanted it.

Let’s try now passing a list of Person objects and adding a bit more complexity.

Add a new class to your Models folder and name it Organization. Add the following code:

public class Organization

{

    private string _name;

    private string _address;

 

    public string Name { get { return _name; } set { _name = value; } }

    public string Address { get { return _address; } set { _address = value; } }

 

    public Organization(string name, string address)

    {

        _name = name;

        _address = address;

    }

}


Now, change your Person class and add the following properties:

private List<Person> _children;

private Organization _workplace;

 

public List<Person> Children {get{return _children;} set{_children = value;}}

public Organization Workplace {get{return _workplace;} set{_workplace = value;}}


We want to change our action method so that we include information in these new properties. Change the code as follows:

public ActionResult ShowPerson()

{

    Person p = new Person("Nuno Silva", 30);

    p.Workplace = new Organization("Microsoft", "somewhere in Portugal");

 

    Person child1 = new Person("John", 8);

    Person child2 = new Person("Mary", 6);

 

    p.Children = new List<Person>();

    p.Children.Add(child1);

    p.Children.Add(child2);

 

    return View("ShowPerson",p);

}


If you browse to http://<yoursite>/Home/ShowPerson you see that nothing as changed because the view is not rendering these new properties. If you try to recreate the view using the Details template again you will see that nothing changed. The templates only look at scalar properties, so you have to code it by hand.

Luckily, it’s not hard at all to do…add this information to the ShowPerson view:

<p>

    Workplace Name:

    <%= Html.Encode(Model.Workplace.Name) %>

</p>

<p>

    Workplace Address:

    <%= Html.Encode(Model.Workplace.Address) %>

</p>

<br />

<h3>

    Children</h3>

<ul style="list-style: none">

    <% foreach (var item in Model.Children)

       { %>

        <li>

          Name: <%= Html.Encode(item.Name) %> |

          Age: <%= Html.Encode(item.Age) %>

        </li>

    <% } %>

</ul>

 Accessing the workplace details is simple enough. The children property is a list of Person objects, so the best way to code the markup for it is to use a foreach statement.

As a small note, I shouldn’t have placed that inline style in the ul element. The MVC project includes a CSS that you can tailor to your own needs. One of the selling points of ASP.NET MVC is the clean HTML code that is very easy to style through CSS, and that is one of the aspects you should take advantage of.

Until next time!