Blog posts by Team Oshyn

Blog posts by Team Oshyn2016-03-04T21:26:47.4430000Zhttps://world.optimizely.com/blogs/team-oshyn/ Optimizely World Posting Forms with Episerver MVCIn <a href="/link/7cdcbf8902014c478c9347fa4ee079ac.aspx">my previous post</a>, I briefly discussed Episerver MVC support and included a few examples on how to implement it in a project. In this post, I’m going to talk about a functionality usually required by almost all web sites: forms. Episerver provides tools to editors to build forms (Episerver form add-on). But most of the time, specific forms that shouldn’t be modified by editors are desired. This post focuses on how to build these kinds of forms. For the following example, we are going to implement a form as an Episerver block. This will allow you to drop the form in any page with a suitable container. First of all, we need to create a base class for any Form models. This base class will contain basic data such as the current page link, current block link, current language and the form’s parent block. We’ll see later the use of these fields. <img src="/link/9172b9820eb748129284e04dea55e3d3.aspx" alt="Image codeB1.png" /> Before we create our form model, let’s first create the Block Type. For this example, it will only have one content field that will contain the form’s title. <img src="/link/184e460ea9a947eda7f314189e9307c2.aspx" alt="Image codeB2.png" /> Now we can create the form model. This will follow the same standard MVC patterns for forms, except that the model class will inherit from the Base Form Model class.  <img src="/link/f509a986fc5a4b1a9d3f132cdc3f3a16.aspx" alt="Image codeB3.png" /> We are using a simple Form Model for this example, with required fields for Name and Email, and a Regular Expression validator for the Email field. Next, we have to create the Form Controller. We’ll create a Base Form Controller with the methods we’ll reuse in any Form Controller. When we do a Post in a form, we’ll be losing the Episerver Context information. These methods will help keep the Episerver Context temporarily in the TempData store, and merge it back to the ViewData when returning to the Episerver page after the submission. <img src="/link/c8f6bf6143694314bc866c608826749c.aspx" alt="Image codeB4.png" /> Now we can create our Form Controller. It will have a standard Index action that will display the form. Additionally, it will have a Submit action to handle the data submission from the form. <img src="/link/d73d016bfdb94e0a996dcecc3b13f0ac.aspx" alt="Image CodeB5.png" /> Let’s analyze the code of this controller. In the index action method, we get the current block content link in Episerver. The ID of the block will be used as part of the key in the TempData store. If the action was called after a form submission, the submit action would have stored the Episerver Context by using the SaveModelState() method. So the LoadModelState() method call would, at this point, merge the previous model state into the current one in order to maintain consistency and be able to show validation messages when something is not entered correctly by the user. When creating the form model, we store the current page link, the current block link, the language and the current block reference. In case this is a redirect from a posted form, if everything is valid, the partial view to display will be the one named “Success”. Otherwise, the default “index” view will be displayed. For the submit action, it will first get the return URL for the page (it will come from the hidden fields in the view that will contain the page data). If the data entered by the user is valid (Model.IsValid), then it will process your data, and add to the Return URL the “form posted” flag with the Block ID. It will save the Model State into the TempData store (using the SaveModelState() call) and redirect the call to the return URL. When redirected to the return URL, it will process the block through the normal Index action and follow the steps described before. We need 2 Views for this block. One contains the form presentation, and the other the “Thank you” message. Both will reside under \Views\TestForm. This is the main form view (Index.cshtml): <img src="/link/e88e173b2f194e89a286d6f869fab542.aspx" alt="Image CodeB6.png" /> As you can see, the ParentBlock is referenced to get the title field from the block. Field properties are accessed directly from the model. You can also see that the BeginForm method references to the “Submit” action. Our Success page will be a very simple “Thank you” static page (Success.cshtml): <img src="/link/a6e7144923ef419391a09f424de1b4ca.aspx" alt="Image thankyoucodeB.png" /> Before we deploy this to Episerver, make sure to include the following in your Global.asax code behind: <img src="/link/ec9284196af2440e96c70f84c861e55e.aspx" alt="Image CodeB7.png" />  This will register the submit route for your forms. In the Page Type, make sure you have a property to contain the Form block (FormArea in this example): <img src="/link/421f7ac2614a4974b9fbcef77f4c24af.aspx" alt="Image CodeB8.png" /> Also, in your Views, make sure to register in your layout the section for the block: <img src="/link/f1a9970467b34a1685ba61b20312e329.aspx" alt="Image CodeB9.png" /> And in the view that will contain the form: <img src="/link/c3430880d304474a919a7c4c6c8903a4.aspx" alt="Image CodeB10.png" /> Build and deploy your project. Register your new block, and use it in your page. To get updated about on more of my posts, follow us on Twitter @Oshyn_Inc, or register for our email list at <a href="http://oshyn.com/resources/blog.html">http://oshyn.com/resources/blog.html</a>  and check out our website as well!2016-03-04T21:26:47.4430000Z

Blog post

Developing with Episerver MVC<div class="post-teaser post-content "> Starting with version 7, Episerver fully supports the .NET MVC Framework and Razor syntax for presentation elements. Unlike other CMS products in the market, Episerver follows the MVC Framework patterns and standards as closely as possible. In this article I’m going to describe how the MVC Framework fits with Episerver’s data model and presentation elements. Episerver integrates tightly with Visual Studio, so everything you need to start developing Episerver sites is readily available at the Visual Studio Gallery. Just search for the Episerver CMS Visual Studio Extension, download it, and install it. When creating a new project, select the Episerver Web Site [MVC], and it will include all the required scaffolding for your project. It will automatically download the latest Episerver DLLs for you via NuGet. You can build and run your project directly using VS’s built-in IIS Express, or by deploying to a regular IIS web site. When deploying to a regular IIS web site, make sure you attach the included MDF database (under App_Data) to any SQL server instance (Express included), and changing the connection string in web.config. The fundamental building blocks in Episerver are Page Types. These define the content fields (Properties in Epi parlance) of the pages that will be created on the website. Additionally, by using a Template, they also define how the content is going to be displayed in the page. In MVC, we are going to separate these concepts in three parts: the Page Model, the Page Controller, and the Page View. The Page Model is the actual definition of the Page Type. It contains the fields and their content types. You create Page Model classes by using the VS template for “Page Type” included in the Episerver VS Extension. After creating a Page Model class, you can manually add more properties (fields) as needed. <img src="http://oshyn.com/code%20snippet%201.png" alt="" /> The Page Controller is the intermediary between the Page Model (Type) and the View. Episerver Controllers inherit from the generic PageController class. You can use the Episerver VS Extension’s “Page Controller [MVC]” template to create these controller classes. The Page Model class is used as the parameter of the generic PageController class. With this, Epi knows what Page Model has to use to render the content. You must implement the default Index method that returns a standard ActionResult object. As you can see in the code sample, Episerver will pass an object of the Page Model type you defined as the parameter of the PageController generic class. The return clause uses the standard MVC View method, using the Page Model object as a parameter. <img src="http://oshyn.com/code%20snippet%202.png" alt="" /> Finally, for the presentation of the data, we use the Page View. Following .NET MVC Framework’s conventions, the Page View must be stored under the Views folder, in a folder with the name of the controller (without the “Controller” part), and must be named Index.cshtml (since the action is called Index). You can use the Episerver VS Extension’s “Page Partial View [MVC Razor]” to create these views. <img src="http://oshyn.com/code%20snippet%203.png" alt="" /> After building and deploying your code to your Episerver instance, now you can create pages based on the Page Type you just created. There is no need to create custom MVC routes, Episerver will handle everything in a content-oriented way. Another important feature in Episerver is the capability to create modules that can be placed and reused anywhere in your site. These are called Blocks. They use a similar data model as for Pages. Instead of a Page Type, you create a Block Type. Episerver VS Extension includes a “Block Type” class template. <img src="http://oshyn.com/code%20snippet%204.png" alt="" /> Some Blocks may need additional data that can’t be included in the Block Type definition (e.g. child pages in a reusable navigation menu). For this, you can create a custom model with a reference to the Block Type. You will use this Model later in your Controller to populate the additional data, and View to display it. <img src="http://oshyn.com/code%20snippet%205.png" alt="" /> Similar to a Page Controller, you create a Block Controller to handle the interactions between the Type, Model and View. You can use the Episerver VS Extension’s “Block Controller [MVC]” template to create these classes. Same as Page Controllers, Block Controllers take as a parameter to the generic class the Block Type class. The Action method (Index) takes an object of Block Type class. But in your Action, you might want to create additional logic to populate the Custom Model, and pass that Model object to the View. <img src="http://oshyn.com/code%20snippet%206.png" alt="" /> Finally, to render Blocks you must create a Block View. Using the same conventions as for Pages, create a new View using the Episerver VS Extension’s “Block Partial View [MVC Razor]” template. Make sure you declare the right model in the View, especially when dealing with custom models. <img src="http://oshyn.com/code%20snippet%207.png" alt="" /> Make sure you put sections in your other Page Views to contain the blocks by using the @section directive. <img src="http://oshyn.com/code%20snippet%208.png" alt="" /> Now you can use the Block anywhere in your site where you have block sections by dragging it from the assets pane. In a next blog post, I’ll cover how to post a form in Episerver MVC. To get updated about this and other posts, follow us on Twitter @Oshyn_Inc, or register for our email list at <a href="http://oshyn.com/resources/blog.html">http://oshyn.com/resources/blog.html</a> and check out our website as well!   </div>2016-03-01T19:19:31.0200000Z

Blog post