Hello World ASP.

NET MVC 3 in Compos ite C1

Composite 2011-01-19

Composite A/S Nygrdsvej 16 DK-2100 Copenhagen Phone +45 3915 7600 www.composite.net

Contents
1 1.1 1.2 1.3 2 2.1 2.2 2.3 2.4 INTRODUCTION .................................................................................................... 3 Who Should Read This Guide Before You Begin What You Will Learn Installing Composite.AspNet.MvcPlayer Creating an MVC Application Creating an MVC Application Using Razor Embedding an MVC Application within a Page in C1 3 3 3 4 4 7 8

USING MVC IN C1 ................................................................................................. 4

Page 2 of 10

Hello World ASP.NET MVC3 in Composite C1

Introduction

Composite C1 is an ASP.NET-based content management system that allows you to quickly build and manage websites. The document provides you with a step-by-step tutorial for programming tasks you can do in C1 such as embedding an ASP.NET MVC 3 Web application within a website.

1.1

W ho Should Read This Guide

This guide is intended for ASP.NET Web developers who are familiar with the MVC pattern in general and ASP.NET MVC 3 in particular and who work in Visual Studio 2010.

1.2

Before You Begin

Since you will write code that will implement some functionality on a C1 website, we assume that as an ASP.NET developer you work with Visual Studio 2010. We also assume that you have downloaded and launched Composite C1 in Visual Studio 2010 and installed a sample website. If you havent, please refer to Hello World Page in Composite C1 and take steps described in it.

1.3

W hat You W ill Learn

Create an MVC Web application and use it in C1

Once you have finished this guide, you will be able to:

Page 3 of 10

Hello World ASP.NET MVC3 in Composite C1

Using MVC in C1

C1 allows you to embed an ASP.NET MVC 3 Web application within a web page. You should take the following steps to complete this task: 1. Install the MVC Player package. 2. Create an ASP.NET MVC 3 Web application. 3. Embed the MVC application on a C1 page using the MVC Player function.

2.1

Installing Composite.AspNet.MvcPlayer

The Composite.AspNet.MvcPlayer package prepares your website for MVC and provides you with the ad-hoc function that embeds your MVC application within a C1 web page. You should thus install it only once. To install the Composite.AspNet.MvcPlayer package: 1. Log into the C1 Administrative console Studio (see Hello World Page in Composite C1). 2. In the System perspective, expand Packages, Available Packages, Composite.AspNet. 3. Select Composite.AspNet.MvcPlayer and click Package Info. 4. Click Install in the package informations tab.

Figure 1: Installing MvcPlayer

5. Follow the steps of the wizard.

2.2

Creating an MVC Application

For the purpose of this tutorial you are going to create a very simple MVC application, which will consists of two views and two controllers - Home and Ajax.

Page 4 of 10

Hello World ASP.NET MVC3 in Composite C1

The Home view will output Hello World and have a link to the Ajax controller. The Ajax View will present a few MVC AJAX-based controls and a link to the Home controller.

Figure 2: You will create these elements on your website

To create a simple MVC Web application: 1. Open the website in Visual Studio (see Hello World Page in Composite C1, Step 1, for details). First, create two views: 2. Create the Home and Ajax folders in the Views folder. 3. Add a new Web User Control to the Home folder and call it Index: ~\Views\Home\Index.ascx 4. Delete its contents and add the following code:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <%@ Import Namespace="System.Web.Mvc.Html" %> <h2>Hello <%= Html.Encode(ViewData["ToGreet"]) %>!</h2> <%= Html.ActionLink("View AJAX Sample", "Index", "Ajax") %>

5. Add a new Web Form to the Ajax folder and call it Index: ~\Views\Ajax\Index.aspx 6. Delete its contents and add the following code:

Page 5 of 10

Hello World ASP.NET MVC3 in Composite C1

<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewPage" %> <%@ Import Namespace="System.Web.Mvc.Html" %> <%@ Import Namespace="System.Web.Mvc.Ajax" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js" type="text/javascript"></script> </head> <body> <span id="Text"> <%= DateTime.Now.ToLongTimeString()%> </span> <br /> <%= Ajax.ActionLink("Get Date", "GetDate", new AjaxOptions{UpdateTargetId="Text" }) %><br /> <% using (Ajax.BeginForm("SetText", new AjaxOptions { UpdateTargetId = "Text" })) { %> Text <%= Html.TextBox("text","")%> <input type="submit" value="Set Text" /><br /> <% } %> <br /> <%= Html.ActionLink("Return to Home", "Index", "Home") %><br /> </body> </html>

Then, create two controllers: 7. In the App_Code folder, create the Controllers folder. 8. In the Controllers folder, add a class called HomeController: ~\App_Code\Controllers\HomeController.cs 9. Delete its contents and add the following code:
using System.Web.Mvc; namespace HelloWorld.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewData["ToGreet"] = "World"; return View(); } } }

10. In the Controllers folder, add a class called AjaxController: ~\App_Code\Controllers\AjaxController.cs 11. Delete its contents and add the following code:

Page 6 of 10

Hello World ASP.NET MVC3 in Composite C1

using System; using System.Web.Mvc; namespace HelloWorld.Controllers { public class AjaxController : Controller { public ActionResult Index() { return View(); } public string GetDate() { return DateTime.Now.ToLongTimeString(); } public string SetText(string text) { return text + DateTime.Now.ToLongTimeString(); } } }

12. Save all these files (File | Save All).

2.3

Creating an MVC Application Using Razor

You can use the Razor view engine in your MVC 3 application. For the purpose of this tutorial we will create a simple Razor-enabled application, which will consist of one view and one controller - UsStates. The view will list the states (USA) with their abbreviations and capitals in a table.

Figure 3: You will create these elements on your website

To create a simple MVC Web application using Razor:

Page 7 of 10

Hello World ASP.NET MVC3 in Composite C1

1. Open the website in Visual Studio (see Hello World Page in Composite C1, Step 1, for details). 2. Download and install the Sample.Paging.UsStates package. The package will create a global data type, which will contain data we are going to present shortly with Razor. First, create the view: 3. Create the UsStates folder in the Views folder. 4. Add a new Empty Page (Razor) to the UsStates folder and call it Index: ~\Views\UsStates\Index.cshtml 5. Delete its contents and add the following code:
@{ } <div> <table class="StateList"> <tr> <th>Abbreviation</th> <th>Name</th> <th>Capital</th> </tr> @foreach (var m in @ViewBag.States) { <tr> <td>@m.Abbreviation</td> <td>@m.Name</td> <td>@m.Capital</td> </tr> } </table> </div>

Next, create the controller: 6. In the App_Code folder, create the Controllers folder. 7. In the Controllers folder, add a class called UsStatesController: ~\App_Code\Controllers\UsStatesController.cs 8. Delete its contents and add the following code:
using using using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; Composite.Data; Sample.Paging;

public class UsStatesController : Controller { public ActionResult Index() { using (DataConnection connection = new DataConnection()) { ViewBag.States = connection.Get<UsState>(); return View(); } } }

9. Save all these files (File | Save All).

Page 8 of 10

Hello World ASP.NET MVC3 in Composite C1

2.4

Embedding an MVC Application within a Page in C1

Now you have to embed your MVC application within a page using the MvcPlayer function. First of all, select where you want your MVC application to appear: 1. Log into the C1 Administrative console (see Hello World Page in Composite C1). 2. In the Content perspective, select the page where you want to embed the MVC application and click Edit Page on the toolbar. The page will open in Visual Editor. Then, insert the MVC application using the Composite.AspNet.MvcPlayer function: 3. On the pages toolbar, click Insert, then Function. 4. In the Select Function window, expand All Functions, Composite, and then AspNet and select the MvcPlayer function.

Figure 4: Selecting MvcPlayer

5. Click OK. The Function Properties window appears. 6. Select the Path property and enter the path to your MVC application (in this case /Home or /Ajax for the first application or /UsStates for the second (Razor)).

Page 9 of 10

Hello World ASP.NET MVC3 in Composite C1

Figure 5: Specifying the path

7. Click OK. Finally, view the result: 8. Save and publish the page. 9. In Visual Studio, press F5 to launch the website in the browser and browse to the page. The page will show the contents of your simple MVC application.

Page 10 of 10

Hello World ASP.NET MVC3 in Composite C1