{"id":872,"date":"2015-09-06T02:01:40","date_gmt":"2015-09-05T20:31:40","guid":{"rendered":"http:\/\/www.harshbaid.in\/?p=872"},"modified":"2021-02-26T03:15:36","modified_gmt":"2021-02-25T21:45:36","slug":"umbraco-cms-asp-net-mvc-part-4-mvc-recipe","status":"publish","type":"post","link":"https:\/\/www.harshbaid.in\/2015\/09\/06\/umbraco-cms-asp-net-mvc-part-4-mvc-recipe\/","title":{"rendered":"Umbraco CMS with ASP.NET MVC \u2013 Part 4 The MVC Recipe"},"content":{"rendered":"

Dear readers,<\/p>\n

Its been very long time that\u00a0I have written\u00a0any blog posts and in meantime there has\u00a0been significant\u00a0changes in\u00a0Umbraco<\/a> and its documentation<\/a> on ASP.NET MVC.<\/p>\n

Few updates on this topic before I start,<\/p>\n

    \n
  1. ASP.NET\u00a0MVC is now enabled out of the box rather than WebForms in Umbraco.<\/li>\n
  2. This blog series was first started\u00a0with\u00a0Umbraco version 7.1.1<\/a>\u00a0but\u00a0concept is\u00a0same in latest\u00a0version 7.2.8<\/a>\u00a0also.<\/li>\n
  3. Documentation on ASP.NET MVC support for Umbraco has improved a lot.<\/li>\n<\/ol>\n
    \n

    In this post we will see\u00a0how to\u00a0develop website\u00a0using\u00a0Umbraco CMS and\u00a0ASP.NET MVC.<\/p>\n

    In the\u00a0Introduction<\/a>\u00a0post\u00a0you can read the\u00a0brief on this blog\u00a0series.<\/p>\n

    Before starting\u00a0please note\u00a0that this may take a while\u00a0to understand the concept wholly\u00a0but let us try & understand,\u00a0also you\u00a0can refer Umbraco documentation such\u00a0as Implementing\u00a0Custom controller<\/a>.<\/p>\n

    There are two parts of this story ASP.NET MVC side and Umbraco side.<\/p>\n

    First Part of this story – ASP.NET MVC<\/h2>\n

    First let us see\u00a0what we have in\u00a0ASP.NET MVC part of\u00a0the story. So we\u00a0have three basic things to know. It is possible that you\u00a0know these things already so you may skip to next section\u00a0–<\/p>\n

      \n
    1. Model<\/li>\n
    2. View<\/li>\n
    3. Controller<\/li>\n<\/ol>\n

      \"Concept<\/a>Brief for each of these is –<\/p>\n

      Model<\/h3>\n

      Model is POCO<\/a>\u00a0which contains getter and setter properties and sometimes we have ViewModel<\/a> for certain complex scenarios.<\/p>\n

      View<\/h3>\n

      View\u00a0is just outputting html. View is written in Razor sharp syntax\u00a0in .cshml or ASP.NET syntax\u00a0in .aspx<\/p>\n

      Controller<\/h3>\n

      Controller is C# class. It is the main class\u00a0which controls\u00a0how the request would be served. It knows what Model and View will go together, How to validate incoming request and application\u00a0data whereabouts.\u00a0As you might\u00a0know that there are many ways controller works; it all depends on requirements and skill-set of the developers working on the solution.<\/p>\n

      Second\u00a0PART OF THIS STORY – Umbraco\u00a0Page<\/h2>\n

      Now second\u00a0part of the story –\u00a0Creating\u00a0a page in Umbraco.\u00a0So we\u00a0have three basic things here to know,<\/p>\n

        \n
      1. Document Type<\/li>\n
      2. Template<\/li>\n
      3. Content Item<\/li>\n<\/ol>\n

        \"Building<\/a>Brief for each of these is –<\/p>\n

        Document Type<\/h3>\n

        Document Type is the definition content item.\u00a0Like we define database table and\u00a0columns in SQL, here we define the properties\u00a0that we require\u00a0in a Page. Each Document Type has Standard Values\u00a0associated with it. Standard Values are\u00a0to\u00a0define\u00a0default property values that gets initialized as\u00a0a new Content is created. We can image this like constructor of a Class. For sake of simplicity Standard Values\u00a0are\u00a0not depicted in the diagram.<\/p>\n

        Now to\u00a0we will\u00a0see\u00a0how Document Type looks like as\u00a0we talk about this.<\/p>\n

        \"Document<\/a>
        Document Type ‘HelloWorld’ that has\u00a0Template\u00a0with same name.<\/figcaption><\/figure>\n
        \"Properties<\/a>
        Properties tab of Document Type<\/figcaption><\/figure>\n

        Above image shows the properties of Document Type. For example purpose here Document Type ‘HelloWorld’\u00a0has\u00a0one property defined as ‘Page Title’. To use this property in code we refer this using Alias\u00a0i.e. ‘pageTitle’, which is also shown in the image above.<\/p>\n

        Template<\/h3>\n

        Template is the Layout definition content item. Template\u00a0file extension can be\u00a0.aspx and .cshml depending on configuration. We can imagine\u00a0‘Template’\u00a0as two-dimensional thing,\u00a0one is Logical i.e.\u00a0Content Item\u00a0and\u00a0other\u00a0is\u00a0Physical\u00a0i.e. html\u00a0file (.chtml or .aspx). As shown in\u00a0diagram each Template has association with Content Item and\u00a0both exists independently.<\/p>\n

        Here is how Template looks like.<\/p>\n

        \"Template<\/a>
        Template along with View in Visual Studio<\/figcaption><\/figure>\n

        In the image above we can see how\u00a0Template in Umbraco is directly related to View in Visual Studio. To make a clear understanding here,\u00a0two different screens\u00a0are stitched together in the\u00a0image.<\/p>\n

        Content Item<\/h3>\n

        To create\u00a0new Page we\u00a0need to create Content Item. Content Item is the central\u00a0part of all three, sometimes also referred as\u00a0Web Page<\/a>.\u00a0Content Item is\u00a0based on Document Type and presentation is controlled\u00a0by Template. Also I have noticed practices to\u00a0define Content Items which does not have any functional presentation, it means\u00a0they are nothing but\u00a0just\u00a0Data Repository which can be reused anywhere in the Website such as Navigation, Contact Information, Office Address, etc.<\/p>\n

        So here is how Content Item looks like.<\/p>\n

        \"Content<\/a>
        Content Item<\/figcaption><\/figure>\n

        Reference Book<\/h3>\n

        Read Information Architecture<\/a> for more regarding how to structure and re-purpose data in Content Management System.<\/p>\n