Setting up a basic Visual Studio ASP.NET MVC project to work with your Sitecore Instance

I know this is a bit out-dated. Here is the context: Sometimes I have had scenarios wherein I want to develop/test something simple and I always use an existing project. Instead of this, if I could quickly setup everything starting with a new empty ASP.NET MVC project, felt would do a lot of good in isolating the actual issue. I have also seen scenarios where developers lack understanding and still struggle to setup a basic Sitecore MVC project. Note that I purposefully haven't used any Helix sample project or any other bells and whistles here in this blog article. 

These are the steps at high-level:

1. Use empty asp.net mvc project with web.config files' properties set as follows: build action - none and do not copy to local directory

2. Downgrade/upgrade Microsoft.AspNet.Mvc nuget package in your VS project to match version of your deployed System.Web.MVC.dll

3. Remove routing in routeconfig.cs

4. Install Sitecore.mvc nuget package with version matching your instance's Sitecore version

5. Publish VS project and make some noise!

Steps in detail:

1. Create an ASP.NET MVC Empty project Solution

2. Ensure your web.config in the root folder and views folder are set to:

Build Action: None

Copy to local Directory: Do not copy

3. Check the version of your deployed System.Web.MVC in the website root folder. In my case, it is 5.2.4:


4. Go to your VS project and ensure your Microsoft.AspNet.Mvc matches this version of 5.2.4, in my case, I downgraded from 5.2.7 to 5.2.4:


5. Then, I removed the following lines from my RouteConfig.cs:

routes.MapRoute(

    name: "Default",

    url: "{controller}/{action}/{id}",

    defaults: new { controller = "home", action = "index", id = UrlParameter.Optional }

);


Now, when I published my VS project to the Sitecore instance, my instance loads just fine with the newly deployed project dll intact!


6. Add  a sample controller and corresponding Index view and deployed successfully:


7. Next, create a controller rendering in Sitecore, map to the controller and action method created above. Then, publish the item:


8. Create a template inherited from Standard template and publish the item:


9. Create content using this new template:


10. Fill with content and publish item:


Ideally this will fall in a separate location in the content tree but for now, I added it as part of the presentation item.

11. 

a. In the presentation details of the content item, select a layout, I decided to choose an existing MVC layout instead of creating a new one:


b. Add the controller rendering and match one of the placeholder names in the Sitecore tree or create one as per your need and ensure the same is reflected here:



12. Then, setup the placeholder settings too for the rendering:


13. Rendering Final layout looks like this:


Publish the item.

14. When you check the page in experience editor, you must be able to see the view from cshtml although the content from the datasource / template is not picked since there is no code written in the cshtml to bind to the model -


Do a site publish and view the page using the site url, all good!


15. To confirm everything is working as per plan, just change the static heading in Index.cshtml and publish from VS, refresh the browser session to see the change reflected:



16. Next, since we want to use a model for the view, let us first add reference to Sitecore.MVC nuget package and I chose 10.0.0 version since my instance runs on the same. Once I add the nuget package, I publish the project to check everything is fine.


Note that there are other packages automatically installed although I just installed Sitecore.MVC 10.0.0.

17. Since I'm not using any ORM tools, I use the renderingcontext to fetch the data at runtime:

// GET: Sample

        public ActionResult Index()

        {

            var dataSourceItem = RenderingContext.Current.Rendering.Item;

            var sampleModel = new MySampleModel();


            sampleModel.Heading = dataSourceItem["Header"];

            sampleModel.Description = dataSourceItem["Description"];


            return View(sampleModel);

        }


18. My view with model binding:


19. Publish the VS project and reload the browser:


Ensure that the strings above in the code match the field names in the template else, data won't be displayed - one of the negatives of not using a ORM. 


Comments