sitecore mvc (user group conference, may 23rd 2014)
DESCRIPTION
The slides from my presentation about Sitecore MVC during the Dutch Sitecore User Group Conference on the 23rd of May in Utrecht, The Netherlands.TRANSCRIPT
#sugcon
#sitecore
Sitecore MVC
Ruud van Falier
ParTech IT
2
Topics
• The basic concept• Traditional ASP.NET MVC• Sitecore MVC
• Sitecore renderings
• Controllers
• Models• Model binding
• Views• SitecoreHelper
• Inversion of Control• Dependency Injection
• MVC vs. WebForms
3
How we used to roll…
The basic concept of (Sitecore) MVC
4
5
The basic concept of (Sitecore) MVC
View
Model
Controller
UserUses
ManipulatesUpdates
Sees
6
The basic concept of (Sitecore) MVC
• Views display a certain set of data. They do not know where the data comes from.
• Models are classes that hold data.They may also execute logic for managing this data. They do not know how the data is displayed.
• Controllers are classes that execute logic that controls what data is seen and which view is used to display it.
7
The basic concept of (Sitecore) MVC
A traditional ASP.NET MVC request
Browser URL Routing Controller Model View
RequestInvoke action
Initialize
Lookup view
Render
HTML
8
The basic concept of (Sitecore) MVC
A Sitecore MVC request
Request
httpBeginRequest pipeline
MVC route?
Layout specified?
Is it an MVC view
file?
Controller specified?
MVC request
WebFormsrequest
No No No
No
Yes Yes Yes
Yes
Source: Martina Welander
9
Sitecore Renderings
•View RenderingRenders a View using a built-in controller action. The controller passes a model of type RenderingModel to the View.
•Controller RenderingCalls an action on a controller and lets the controller handle the View rendering.
10
Controllers
11
Controllers
PageController
About
Portfolio
News
Request to:/page/news
var model = repository.GetNews();
return View(model);
/Views/News.cshtml
12
Controllerspublic class MvcDemoController : Controller{ public ViewResult NewsOverview() { // Get news root item from Sitecore. Item newsRoot = Sitecore.Context.Database.GetItem("{NEWS-ROOT-GUID}"); IEnumerable<Item> newsItems = newsRoot.Children;
// Get temperature from weather service. var weatherService = new WeatherService(); int temperature = weatherService.GetTemperature();
// Initialize model for News Overview page. return this.View(new NewsOverviewModel { NewsItems = newsItems, Temperature = temperature }); }}
13
Controllers
public class MvcDemoController : Controller{ public ViewResult SearchNews(string keyword, int page) { // Perform search and return NewsOverViewModel with results. var model = new NewsOverviewModel(); return this.View(model); }}
/MvcDemo/SearchNews?keyword=my_search_terms&page=1
14
Controllers
/MvcDemo/SearchNews?keyword=my_search_terms&page=1
public class MvcDemoController : Controller{ public ViewResult SearchNews(SearchRequestModel request) { // Perform search and return NewsOverViewModel with results. var model = new NewsOverviewModel(); return this.View(model); }}
15
Controllers
Do
• Retrieve data required to initialize models
• Initialize models
• Return appropriate View (or other ActionResult)
Don’t
• Cramp them with logic
• Use them if it’s not necessary
16
Models
17
Modelspublic class ContentPageModel{ public string Title { get; set; }
public string Intro { get; set; }
public string Body { get; set; }}
18
Modelspublic class ContentPageModel{ public string Title { get; set; }
public string Intro { get; set; }
public string Body { get; set; }}
public class ContentPageModel{ public string Title { get; set; }
public string Intro { get; set; }
public string Body { get; set; }
public ContentPageModel Parent { get; set; }
public IEnumerable<ContentPageModel> SubPages { get; set; }}
19
Modelspublic class ContentPageModel{ public string Title { get; set; }
public string Intro { get; set; }
public string Body { get; set; }}
public class ContentPageModel{ public string Title { get; set; }
public string Intro { get; set; }
public string Body { get; set; }
public ContentPageModel Parent { get; set; }
public IEnumerable<ContentPageModel> SubPages { get; set; }}
public class ContentPageModel{ /* Snipped properties */
public void CreateSubPage(ContentPageModel model) { // Logic for creating a sub page. }
public void DeleteSubPage(ContentPageModel model) { // Logic for deleting a sub page. }}
20
Model Binding
public class SearchRequestModel{ public string Keyword { get; set; }
public int Page { get; set; }
public bool OrderByRelevance { get; set; }}
public class MvcDemoController : Controller{ public ViewResult SearchNews(SearchRequestModel request) { // Perform search and return NewsOverViewModel with results. var model = new NewsOverviewModel(); return this.View(model); }}
/MvcDemo/SearchNews?keyword=my_search_terms&page=1
21
Models
In Sitecore MVC:
• View Models usually represent Templates from Sitecore.
• This way, View Models can contain content from Sitecore items.
• There are several Object-Relational Mappers that are created specifically for that task.
Make sure to attend Mike Edwards’ and Robin Hermanussen’s session for more on ORM!
22
Models
Do
• Hold data
• Provide logic to manipulate data
Don’t
• Add presentation elements to data
• Use for application logic
23
Views
24
Razor Syntax
Source: http://haacked.com
25
Views
@model RenderingModel
<section id="main_content"> <h3> @Model.Item["Title"] </h3> <p> <strong> @Model.Item["Intro"] </strong> </p> @Model.Item["Body"] </section>
26
Views
@model RenderingModel
<section id="main_content"> <h3> @Model.Item["Title"] </h3> <p> <strong> @Model.Item["Intro"] </strong> </p> @Model.Item["Body"] </section>
@model RenderingModel
<section id="main_content"> <h3> @Model.Item["Title"] </h3> <p> <strong> @Html.Raw(Model.Item["Intro"]) </strong> </p> @Html.Raw(Model.Item["Body"]) </section>
27
Views
@model RenderingModel
<section id="main_content"> <h3>
@Html.Sitecore().Field("Title") </h3>
<p> <strong> @Html.Sitecore().Field("Intro") </strong> </p>
@Html.Sitecore().Field("Body") </section>
28
Views
using System.Web;using Sitecore.Mvc.Helpers;
/// <summary>/// Extension methods for the SitecoreHelper class./// </summary>public static class SitecoreHelperExtensions{ public static HtmlString WhoAreYou(this SitecoreHelper helper) { return new HtmlString("I'm your father!"); }}
@Html.Sitecore().WhoAreYou() @* Output: "I'm your father" *@
29
Views
public class ContentController : Controller{ public ViewResult ContentPage() { var model = new ContentPageModel();
// Populate model properties with data from Sitecore.
return this.View("~/Views/Content page.cshtml", model); }}
public class ContentPageModel{ public string Title { get; set; }
public string Intro { get; set; }
public string Body { get; set; }}
30
Views
public class ContentController : Controller{ public ViewResult ContentPage() { var model = new ContentPageModel();
// Populate model properties with data from Sitecore.
return this.View("~/Views/Content page.cshtml", model); }}
public class ContentPageModel{ public string Title { get; set; }
public string Intro { get; set; }
public string Body { get; set; }}
@model ContentPageModel
<section id="main_content">
<h3> @Model.Title </h3>
<p> <strong> @Model.Intro </strong> </p>
@Model.Body
</section>
31
Views
Do
• Display data from a model
• Use simple flow logic that is required to present data (if / foreach / retrieval methods)
Don’t
• Add complex logic
• Go nuts with inline code
32
Inversion of Control (IoC)
“A software architecture with this design inverts control as compared to traditional procedural programming: in traditional programming, the custom code that expresses the purpose of the program calls into reusable libraries to take care of generic tasks, but with inversion of control, it is the reusable code that calls into the custom, or problem-specific, code.”, Wikipedia
The decoupling of dependencies by isolating code for certain responsibilities into separate libraries and referring to those libraries using their interfaces instead of their concrete implementation.
33
Inversion of Control (IoC)
IoC serves the following design purposes:
• To decouple the execution of a task from implementation.• To focus a module on the task it is designed
for.• To free modules from assumptions about how
other systems do what they do and instead rely on contracts (interfaces).• To prevent side effects when replacing a
module.
34
Inversion of Control (IoC)public class MvcDemoController : Controller{ public ViewResult NewsOverview() { // Get news root item from Sitecore. Item newsRoot = Sitecore.Context.Database .GetItem("{NEWS-ROOT-GUID}"); IEnumerable<Item> newsItems = newsRoot.Children;
// Get temperature from weather service. var weatherService = new WeatherService(); int temperature = weatherService.GetTemperature();
// Initialize model for News Overview page. return this.View(new NewsOverviewModel { NewsItems = newsItems, Temperature = temperature }); }}
35
Inversion of Control (IoC)public class MvcDemoController : Controller{ public ViewResult NewsOverview() { // Get news root item from Sitecore. Item newsRoot = Sitecore.Context.Database .GetItem("{NEWS-ROOT-GUID}"); IEnumerable<Item> newsItems = newsRoot.Children;
// Get temperature from weather service. var weatherService = new WeatherService(); int temperature = weatherService.GetTemperature();
// Initialize model for News Overview page. return this.View(new NewsOverviewModel { NewsItems = newsItems, Temperature = temperature }); }}
TIGHT COUPLING
36
Inversion of Control (IoC)public class MvcDemoController : Controller{ private readonly ISitecoreContext sitecoreContext; private readonly IWeatherService weatherService;
public MvcDemoController(ISitecoreContext sitecoreContext, IWeatherService weatherService) { this.sitecoreContext = sitecoreContext; this.weatherService = weatherService; }
public ViewResult NewsOverview() { // Get news root item from Sitecore. Item newsRoot = this.sitecoreContext.ItemManager.GetItem("{NEWS-ROOT-GUID}"); IEnumerable<Item> newsItems = newsRoot.Children;
// Get temperature from weather service. int temperature = this.weatherService.GetTemperature();
// Initialize model for News Overview page. return this.View(new NewsOverviewModel { NewsItems = newsItems, Temperature = temperature }); }}
37
Inversion of Control (IoC)public class MvcDemoController : Controller{ private readonly ISitecoreContext sitecoreContext; private readonly IWeatherService weatherService;
public MvcDemoController(ISitecoreContext sitecoreContext, IWeatherService weatherService) { this.sitecoreContext = sitecoreContext; this.weatherService = weatherService; }
public ViewResult NewsOverview() { // Get news root item from Sitecore. Item newsRoot = this.sitecoreContext.ItemManager.GetItem("{NEWS-ROOT-GUID}"); IEnumerable<Item> newsItems = newsRoot.Children;
// Get temperature from weather service. int temperature = this.weatherService.GetTemperature();
// Initialize model for News Overview page. return this.View(new NewsOverviewModel { NewsItems = newsItems, Temperature = temperature }); }}
LOOSE COUPLING
38
Dependency Injection (DI)
There are several methods for DI, some examples are:
• Constructor injection (as seen in the example)• Parameter injection• Setter injection
Use a framework that handles DI for you:
• Windsor container (because it ships with Glass)• Ninject• Autofac
39
MVC vs. WebFormsWhy MVC is better
• Strict separation of responsibilities• Simpler page lifecycle.• Stateless (No more ViewState).• No more server controls.• Very easy to work with AJAX.• Not bound to generated markup.• Multiple forms on a page.
When to stick to WebForms
• Legacy application• Team knowledge• Prototyping
WebForms is just an extremely complex abstraction over HTML/JS, invented before the introduction of jQuery and AJAX;We don’t need this abstraction anymore.
40
Join us!
Are you an awesome Sitecore Developer?
ParTech is looking for people to expand their team!
We offer you an excellent salary and benefits and the chance to work on enterprise Sitecore projects together with the most skilled developers available.
Join the Sitecore elite,apply at www.partechit.nl !
41
References
• Follow me on Twitter:@BrruuD
• Contact me by e-mail:[email protected]
• Read our blog:www.partechit.nl/blog
42
Thank you