Hello World ASP.net MVC3 in Composite C1

5/12/2018 Hello World ASP.net MVC3 in Composite C1 - slidepdf.com

http://slidepdf.com/reader/full/hello-world-aspnet-mvc3-in-composite-c1 1/10

Composite A/S

Nygårdsvej 16

DK-2100 Copenhagen

Phone +45 3915 7600

www.composite.net

Hello World ASP.NET MVC3 in Composite

C1

Composite 2011-01-19



Page 2 of 10 Hello World ASP.NET MVC3 in Composite C1

Contents

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




1 Introduction

Composite C1 is an ASP.NET-based content management system that allows you to quicklybuild 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 Who Should Read This Guide

This guide is intended for ASP.NET Web developers who are familiar with the MVC patternin 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 assumethat as an ASP.NET developer you work with Visual Studio 2010.

We also assume that you have downloaded and launched Composite C1 in Visual Studio2010 and installed a sample website. If you haven’t, please refer to “Hello World Page inComposite C1” and take steps described in it.

1.3 What You Will Learn

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

Create an MVC Web application and use it in C1




2 Using MVC in C1

C1 allows you to embed an ASP.NET MVC 3 Web application within a web page. Youshould 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 providesyou with the ad-hoc function that embeds your MVC application within a C1 web page. Youshould 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 CompositeC1”).

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 information’s 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.




The Home view will output “Hello World” and have a link to the Ajax controller. The AjaxView 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”, Step1, 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.ascx4. 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.aspx6. Delete its contents and add the following code:




<%@ 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.cs9. 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:




using System;


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 thistutorial we will create a simple Razor-enabled application, which will consist of one view andone 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:




1. Open the website in Visual Studio (see “Hello World Page in Composite C1”, Step1, 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 presentshortly 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.cshtml5. 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.cs8. Delete its contents and add the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;


using Composite.Data;

using 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).

http://docs.composite.net/Downloads/Sample.Paging.UsStates.zip







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 MVCapplication 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 page’s 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)).




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.

Documents

Hello World ASP.net MVC3 in Composite C1