Can we create a View with model in sitecore without creating a Controller?

Pranay
Jan 07, 2015  ·  5978 views

Problem: To create an MVC 'View' bound with a 'Model' but without creating any controller in Sitecore MVC 7.2.

###Solution:

We can create a view rendering passing a model to the view without any controller. Follow the below steps to create a sample view passing a custom model without using a controller.

Version used: Sitecore 7.2 with MVC 5.1

  1. Create Model class in C# .NET(LoginModel.cs). This is the model which we are going to pass it to a view.

    LoginModel.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace Sitecore.MyProjSolution.Website.Models.LoginModel
    {
        public class LoginModel
        {
            public string UserName { get; set; }
            public string Password { get; set; } 
        }
    }
    
  2. Create model in Sitecore.

    • Go to Layout->Models
    • Right click and create a model item with name 'MyModel'
    • In the Model type field enter the model class assembly path and namespace path separated by comma as shown below. Sitecore.MyProjSolution.Website.Models.LoginModel,Sitecore.MyProjSolution.Website
  3. Create view rendering in Sitecore

    • go to layout->Renderings

    • right click and create a View Rendering. Give some name to the view rendering

    • After creating the view rendering, under the Data section, assign values to its fields as shown below.

      • 'Path' -> (path to the view file i.e., the .cshtml file):say "Views/Account/Login.cshtml"

        Sample Login.cshtml:

          @model Sitecore.MyProjSolution.Website.Models.LoginModel
          <div class="dropdown-menu my-login-dropdown" style="padding:20px;">
              @using (Html.BeginForm("Login", "Account", FormMethod.Post))
              {
                  @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", 
                                       @Placeholder = "Username" })
                  @Html.PasswordFor(m => m.Password, new { @class = "form-control", 
                                       @Placeholder = "Password" })
                  <input type="submit" id="btnLogin" class="btn btn-default" 
                         value="Submit" />
              }
        
          </div>
        
      • 'Model' -> CLick on 'Insert link' and select the sitecore model which we have created in the step 2 i.e, MyModel.

      • PlaceHolder -> select the placeHolder in which you want to render this view(placeHolder as per the Layout). Say ‘phLogin’.

        Below is the a sample layout file(SampleLayout.cshtml).

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <title>Sample Page</title>
              </head>
              <body>
                  <div class="header">
                      @Html.Sitecore().Placeholder("phHeader")
                  </div>
        
                  <div class="Body">
                      @Html.Sitecore().Placeholder("phLogin")
        
                  </div>
        
                  <div class="footer">
                      @Html.Sitecore().Placeholder("phFooter")
                  </div>
              </body>
          </html>
        

In the above tutorial, just a blank Model class is passed without any data in it. This is normally useful to create Html submit Forms which are bound to Models using the @Html.BeginForm of MVC, but if you want to populate the model at Sitecore and pass that model data to the view go through the below tutorial.

How to pass a Sitecore populated Model from sitecore to a .NET MVC view

AUTHOR

Pranay

A Software Engineer by profession, a part time blogger and an enthusiast programmer. You can find more about me here.


Post a comment




Sign up for our newsletter

Subscribe to receive updates on our latest posts.

Thank you! You are now subscribed.