Upload
vitvvx
View
92
Download
0
Embed Size (px)
Citation preview
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
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 2/10
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
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 3/10
Page 3 of 10 Hello World ASP.NET MVC3 in Composite C1
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
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 4/10
Page 4 of 10 Hello World ASP.NET MVC3 in Composite 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.
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 5/10
Page 5 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 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:
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 6/10
Page 6 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.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:
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 7/10
Page 7 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 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:
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 8/10
Page 8 of 10 Hello World ASP.NET MVC3 in Composite C1
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 System.Web.Mvc;
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).
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 9/10
Page 9 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 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)).
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 10/10
Page 10 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.