Sitecore MVC Editable Fields

Introduction:

In this post we will be focusing on how we can make fields Editable in Experience Editor. We all know that if our view is been created using "@Html.Sitecore().Field", the fields are editable in experience editor. but the whole point comes out here is how to make this happen?. 

Explanation:

Let us continue on the Same example we have been working on Let us try to directly convert the Fields we have using "@Html.Sitecore().Field".

Let us see if this is editable or not.

fig-1

Let us publish this and go to Experience editor to find out if we can Edit the same (we all know it wont be editable but for confirmation let us do it and see.)

fig-2

All we observe here is when we hover over the Fields both in Mumbai and Hamirpur. we get no option to edit.

Let us go back to our Show.cshtml and try converting the Html field into Sitecore editable fields.

fig-3

You will see that we have a error. Just to confirm that error is not directly related to the statement mentioned, I have included the reference of System.Web. 

In order to understand the issue, we will have to look into the "@Html.Sitecore.Field" how it works.

fig-4

if we only provide the fieldName, the Sitecore will try to look for that field in the current context Item. (in our case it is Home item). Object parameters are used to pass on additional attributes like Class. If we pass Field name along with Sitecore item, the sitecore helper will try to find the field in Item specified.

Thus, If we want to make the Field Editable in Experience editor, we will have to give the field name and the Item where it resides.

This is what I meant in the beginning. In other words, if we want to make editable Experience, we will have to think from Architecture perspective.

to make things work in our project, we will have to change the way we are fetching data.

let us try to fix this.

1- Controller:

We need list of Sitecore Items as output  so that we can pass the same to View and can create Editable fields.

fig-5

2- Business Logic Layer:

In the above Screen short we have change the List type. It was  INewsModel before now it is Item (Sitecore Item) . Since we have change the return type, INews Will show error line lets fix that

fig-6

3- Data Manipulation Layer:

In News class as well we have change the Return type from "INewsModel" to "Item". Now dataManipulation class will give error on its output that need to be changed as well. but before that we will have to change the interface "INews". (Not showing the screen short for Interface here)

fig-7

Similar to above classes we will update the return  type here as well. we will have to check "IListOfNewsModel" to send Sitecore Item.  Similar to other Interface updated need to be done here as well.

fig-8

we have replaced INewsModel with Item.  Due to this Further refracturing is done by Removing StateNewsModel and interface INewsModel 

Now we go to our View Show.cshtml.

fig-9

Line 4 to 22 is the updated lines. Rest is just for reference just to show the editable and non-editable behaviour. Publish the Site.

fig-10

once you click on Experience Editor, Please wait for it to load. you will see below Output.

fig-11

the below once are not editable (cannot show in Pic).  Let us see the sitecore Details for the same and then Update the most complex part in this View. We will be Changing the text content of Genre, it is droplink in our News and another Item in tree. le us see the values before editing.

fig-12

As we will try to change the Genre name in  Hamirpur news to Comedy1.

fig-13

We changed and saved it on Experience Editor and it got changed in Sitecore as well.

fig-14

Summary:

Thus, we can conclude that if we are thinking to have Editable Component, we will have to think from Architecture Perspective, or else we will have to update a lot of Logic to make things happen.