Saturday, November 14, 2009

Understanding MVC Views

We saw that MVC views are similar to traditional ASP.NET pages except that thay may not be correspondant to the url that the user types in the browser, meaning that if the user types [URL]/Account/MyAccount.aspx there must be an aspx page on the server named MyAccount.aspx under a folder named Account
In MVC it's different this page would be called Index.aspx placed under Views/Account
A view is a standard (X)HTML document that can contain scripts. You use scripts to add dynamic content to a view.
The listing below is the html of a view that has a label displaying the string "Hello"

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage"  %> 

<!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>Demo page</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <div>
        <asp:Label ID="Label1" runat="server" Text="Hello"></asp:Label>
    </div>
    </form>
</body>
</html>

If you want to display the current date and time you can use this:

<% Response.Write(DateTime.Now);%>

you can write any c# code inside the tags and display them like

<% int x = 5;
       int y = 2;
       int z = x + y;
       Response.Write(z);
    %>
which will display the number 7 on the page.
Instead of writing Response.Write() you can replace it with "=" sign
so writing
<% =DateTime.Now %>
will display the current DateTime

Using HTML Helper
HTML Helper is a function that generates a string of the markup of the some of the HTML (not ASP.NET controls) Controls to reduce the amount of HTML you write
the following code displays a text box on the page

<%
            using (Html.BeginForm())
            { %>
        <% =Html.TextBox("txtHello","This is a text box") %>
        <%}
        %>
this resmbles the following html

<input id="txtHello" name="txtHello" type="text" value="This is a text box" />
you can also use the HTML Helper class to produce other types of controlls. more info can be found in this link

View Data
Each Controller class has a property called ViewData
this property is used to pass data between the controller and the view. It is used in a way close to using
Session variables. It uses a Key-Value pair

The following code in the controller class adds a string to the View Data

ViewData["message"]="This is view data";
this code adds an entry with the key message and value This is view data to the ViewData of the view
In the view to display this string you write:

<%= Html.Encode(ViewData["message"]) %>
We use the HTML.Encode method to encode any special characters that can be there like > or <. You can pass any types in the ViewData cosider the following controller code:
ArrayList arr = new ArrayList();
            arr.Add("1");
            arr.Add("2");
            ViewData["message"] = arr;
            return View();
and the following View script

<% ArrayList temp =(ArrayList)ViewData["message"]; %>
       <%= temp[1] %>
this passes an arraylist to the view, then at the view it displays the second element of the arraylist

that was a quick explanation of the MVC View and how they interact with Controllers

No comments:

Post a Comment