Sitecore MVC: Converting Web Forms sublayouts

Sitecore MVC renderings

Converting Web Forms sublayouts

Prepared by: Jason St-Cyr and Nick Allen

November 2014

Converting Sitecore Web Forms to MVC

• Sublayouts to Controller Renderings

• The ViewModel

• The View

• Things to watch out for

Resources

Sublayouts to Controller Rendering

• Create Controller Rendering item (sitecore\Layout\Renderings)

- 1-to-1 Sublayout item to Controller Rendering item

- Many fields are the same (Cache settings, Display Name, Custom Experience buttons)

- Not necessarily 1-to-1 for .cshtml

• Create Controller method

- Examine presentation logic of ASCX and ASCX.cs

- Determine ‘state’ toggles (Page Editor vs. Normal, Empty Collections, No Datasource specified)

- Build business logic to load different views for each state

Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 3

Sublayouts to Controller Rendering: Controller example


public ActionResult Accordion(){

var model = DataSourceItem != null ? new AccordionViewModel(this.DataSourceItem) : null;var viewResult = model != null ? this.View("Accordion/Accordion", model) : this.View("Accordion/Accordion");

if (Sitecore.Context.PageMode.IsPageEditor){

if (model == null){

viewResult = this.View("DatasourceMissing", new DatasourceMissingViewModel());}else if (!model.AccordionContainer.Panes.Any()){

viewResult = this.View("Accordion/AccordionNoPanels", model);}else{

viewResult = this.View("Accordion/AccordionPageEditor", model);}

}

return viewResult;}

Sublayouts to Controller Rendering: The ViewModel


• Create .cs file to represent the object model

• Should contain all the properties needed for rendering

• Should wrap around data object

• Constructor must take an Item (datasource)

• Migrate ASCX and ASCX.cs logic to ViewModel as needed

• e.g. Code for loading configurations, methods to determine Boolean conditions, logic to determine ‘active’ classes

• Ensure Controller is instantiating ViewModel

Sublayouts to Controller Rendering: ViewModel Example


using System.Globalization;using Keystone.SBL.Templates.Components;using Sitecore.Data.Items;

namespace Keystone.MVC.ViewModels.Components{

public class IFrameViewModel{

public IFrame Frame { get; set; }public string Height { get; set; }public string FrameBorder { get; set; }

public IFrameViewModel(Item dataSource){

Frame = new IFrame(dataSource);

Height = !Frame.Height.HasValue ? "500" :Frame.Height.Value.ToString(CultureInfo.InvariantCulture);

FrameBorder = Frame.ShowFrameBorder ? "1" : "0";}

}}

Sublayouts to Controller Rendering: The View


• Create .cshtml file in the “Views” folder

• Website\Views\<path>

• May need multiple (e.g. Accordion shown earlier).

• Group multiple similar views in folders

• Build markup in View

• Use Sitecore HTML Helper methods for outputting fields

• Associate to ViewModel

• Minimize logic in the View, place in ViewModel class

Sublayouts to Controller Rendering: View Example


@using Keystone.SBL.Templates.Components@using Sitecore.Mvc@model Keystone.MVC.ViewModels.Components.PanelViewModel

<div class="panel @Model.StyleCode @Model.Panel.BaseComponent["Additional Styles"]"><div class="panel-heading">

<h3 class="panel-title">@Html.Sitecore().Field(Panel.FieldIds.Title.ToString())</h3></div><div class="panel-body">@Html.Sitecore().Field(Panel.FieldIds.Content.ToString())</div>

</div>

Things to watch out for

• Placeholder settings

- Need to update to make an MVC component available.

- If building both Web Forms and MVC components in the same build, may have same name in placeholder settings.

- May need separate placeholder settings for MVC vs. Web Forms.

• Insert Options

- Need to have custom insert rules to specify which templates are available to author (MVC or Web Forms).

- This may be driven via path naming convention in the tree, or via a configuration-driven rule.

• Page Templates

- Different Page Templates are required in order to specify an MVC layout and default MVC components.

- Recommendation is to have ‘base’ templates which define all fields, then have presentation templates that specify only the layout portion.


More things to watch out for

• Post-backs. As in: there are none.

- Use forms and actions to send data to the controller.

- Similar to building an HTTP POST integration

- No more server-control events, use Javascript events and AJAX

• Shared renderings

- If you use RenderPartial, needs to be in the Shared folder.

• Visual Studio syntax highlighting in Views

- Need reference to System.Web.MVC to get rid of the red squigglies


Resources

Sitecore Community Docs

• http://sitecore-community.github.io/docs/documentation/Sitecore%20MVC/index.html

• Contains links to online content submitted by the Sitecore community.

• Key links:

- Anything by Martina Welander

- Creating a Visual Studio Project for Sitecore MVC

- Sample Sitecore MVC project (used in Youtube tutorial videos)


http://sitecore-community.github.io/docs/documentation/Sitecore MVC/index.html

MSDN and others

• ASP.NET MVC Overview:

- http://msdn.microsoft.com/en-us/library/dd381412(v=vs.100).aspx

• Getting Started with ASP.NET MVC 5

- http://www.asp.net/mvc/overview/getting-started/introduction/getting-started

• PluralSight ASP.NET MVC 5 Fundamentals

- http://www.pluralsight.com/courses/aspdotnet-mvc5-fundamentals

http://msdn.microsoft.com/en-us/library/dd381412(v=vs.100).aspx

http://www.asp.net/mvc/overview/getting-started/introduction/getting-started

http://www.pluralsight.com/courses/aspdotnet-mvc5-fundamentals

Lessons LearnedJason St-Cyr

Solution Architect and Sitecore MVP, nonlinear digital

Background in .NET software development and Application Lifecycle

Management

Contact me: [email protected]

Around the web:

Technical Blog:

http://theagilecoder.wordpress.com

LinkedIn Profile:

http://www.linkedin.com/pub/jason-st-cyr/26/a73/645

Nonlinear Thinking:

http://www.nonlinearcreations.com/Digital/how-we-think

Twitter: @AgileStCyr

Lessons LearnedNick Allen

Solution Architect and Sitecore MVP, nonlinear digital

Background in .NET software development

Contact me: [email protected]

Around the web:

Technical Blog:

http://sitecorecreative.wordpress.com

LinkedIn Profile:

https://www.linkedin.com/in/nickallen80

Nonlinear Thinking:

http://www.nonlinearcreations.com/Digital/how-we-think

Twitter: @sitecoretweet

Sitecore MVC: Converting Web Forms sublayouts

Technology

Transcript of Sitecore MVC: Converting Web Forms sublayouts