Getting started with sensenet ECM using MVC
When you build a site with sensenet ECM, you have many options when it comes to choosing a technology. This post walks you through a few easy steps to create your first Asp.Net MVC app with sensenet ECM 7.0. It is a part of a series about the different client and server-side technologies and architectures when designing your first app.
This post will help you create your first Asp.Net MVC app with sensenet ECM 7.0. For other possibilities please take a look at the following articles:
This post is based on a tutorial, you can find the latest version in this article.
What will we build?
This MVC sample application will be a very simple CRUD app: it will display a dashboard with tasks assigned to the current user and another list for other users’ tasks. It will also let users create and delete tasks.
This architecture means a web application with custom code added on the server side in C# and cshtml. For a Javascript single page application example please visit one of the links above.
When completing this short excercise, please try to focus on the sensenet-related parts — for example the way we search for content items and load them from the Content Repository, the way we create and modify content. We tried to keep everything else minimal so you can focus on the new stuff and not on the usual MVC-related parts.
Security out of the box
All the sensenet ECM Content-related operations (like content Save or Load) are performed using the permissions of the currently logged in user — except when switching to the administrator for technical purposes, as we explain below. This means that the user will not be able to create or delete anything that he or she does not have permissions for.
Prerequisites
You will need a basic MVC project to begin with and install one or more sensenet ECM components.
For the purpose of this guide you will need the basic sensenet Services package and also the WebPages component, because it will let you sign in easily and monitor the created content items.
There are two options here:
- Install sensenet ECM Services from NuGet and also the WebPages component: this way you will create a brand new MVC application, pull in the necessary packages from NuGet and make a few modifications manually.
- Or you can copy one of the prebuilt sensenet ECM project templates. Those templates contain the same NuGet packages, they just save you the time of manually installing them. Our suggestion is to start with the one that contains the Services and WebPages packages. The steps in this case:
- copy the template
- build the solution
- execute the same install commands as at the end of the install guides above. These commands will create a database for you and import the necessary content items (please take a look at the install guides above for more details). In case you chose the two main packages, this means the following commands:
snadmin install-services
snadmin install-webpagesAfter the steps above, you will have an MVC application with sensenet ECM 7.0 integrated. The remaining part of this article is about how to add a basic CRUD functionality for content items in Visual Studio.
It is important to make sure when working with a sensenet ECM web application that you shut down the application properly when you update the server code. This means stopping the IIS Express site so that sensenet ECM can release the index write lock correctly — otherwise you would have to delete that file manually when you start the app next time.
Authentication
To demonstrate a use case for different users, this sample is designed to display Tasks for the current user and (in a different list) tasks for others. Asp.Net MVC authentication however is not the scope of this guide, so we will use the old built-in WebForms-based UI for signing in and possibly create new users for testing purposes.
We will not make use of the Asp.Net Identity feature, because currently there is no Identity storage implemented for sensenet ECM (yet).
We need to change the default Login link in the header to redirect to the default sensenet ECM main page that contains a login control. To do that, please modify the _LoginPartial view (in the Shared folder in VS): replace the Login action link at the bottom of the view with the following html link:
<a id="loginLink" href="/Root/Sites/Default_Site">Login</a>Start the site and click on the login link to verify that it leads you to the sensenet ECM login page and you can log in with the default admin credentials (admin/admin).
For the Logout link to work and the signed-in user info to be correct, we have to modify the form submit link and the user link in the same _LoginPartial view in the case when the user is authenticated.
The final version of the view is the following:
Notice the BeginRouteForm method above that we use to generate a correct link that redirects to the Logoff action in the built-in Account controller.
Logging off
For the logoff mechanism to work correctly, please modify the LogOff method in the AccountController class (Controllers folder in VS) to execute the sensenet logout logic.
The AuthenticationHelper class above provides methods for logging in and out, you can use them in your custom code too.
Task view model
Our goal is to display tasks on the UI. For that we need a model for task items. Please create a new class named TaskViewModel in the Models folder in VS and fill it with the following class:
The model above takes a sensenet ECM Task instance in the constructor and exposes a few properties. There are several built-in strongly typed properties like DisplayName, and there is an extensive api for accessing dynamic properties — for example the GetReference method lets you load referenced content items, in this case the assignee user.
Note that there are several other ways to create a model on top of sensenet ECM content items — for example you can create a model that wraps a Content object instead of a strongly-typed business object like Task above (that will let you work with the field layer instead of strongly typed properties). Or you can even use these types (Task or Content) as your model, without creating a model class.
The SystemAccount.Execute call above is necessary for cases when the current user does not necessarily have permissions for a referenced content — in this case the assigned user. This is a trick for loading data from the repository as an administrator and displaying only the required info to the user.
Dashboard view model
To serve the task lists to the view, we create a view model for the dashboard. Please create a new class in the Models folder in VS and name it DashboardViewModel
Note that we expose two Task model lists here as properties. One of them (My tasks) is implemented using the LINQ to sensenet technique, the other one executes a simple Content Query for task content items. The result is very similar in the background, you may choose either of them when searching for content items.
Dashboard controller
The next step is to create a controller for serving the UI the necessary views. Create a new empty controller named DashboardController in Visual Studio (Controllers folder) and fill it with the following code:
The initial Index action simply returns a view. We will fill this class with additinal action methods later for POST requests.
Dashboard view
To create views for the dashboard, please create a new folder named Dashboard in the Views folder in VS.
Create an empty Index view in the Dashboard folder without a layout page, and fill it with this initial markup:
Dashboard link
To access the dashboard page, please insert a link to the header in the _Layout.cshtml file (around line 27)
<li>@Html.MvcActionLink("Dashboard", "Index", "Dashboard")</li>When you start the site, you should be able to log in and visit the dashboard page using the new link in the header. It will contain no tasks yet, so we need to add the possibility for the user to manage tasks.
Adding and Deleting a Task
Let’s add a few things to the task view model so that it becomes capable of handling task creation. Please modify the TaskViewModel class that we created above to its final form:
The new properties make it easier to build a UI for creating new tasks — for example selecting a person that the task is assigned to.
Adding the Create and Delete views
Add new empty view in the Views/Dashboard folder and name it Create.
This view shows a form with a few task fields to fill. For example there is a dropdown list containing the users coming from the task view model property.
Create another view named Delete in the Views/Dashboard folder with the following contents:
The Delete view above uses the BeginRouteForm extension method to build a form url that contains the id of the task to be deleted.
Add new methods to the controller
To display the Create and Delete views and to perform the actual operations, you will have to add a few methods to the DashboardController class. The final form of the controller is the following:
The Create action receives a task view model filled with the data from the client. It makes sure that the parent container (the Task List) exists before adding a new task.
The new task’s fields are filled from the model and the new content is saved into the Content Repository. All database operations, indexing and security checks will happen under the hood, you do not have to do anything else, just fill the fields and call the Save method.
The DeletePost method (note that we had to name it differently to avoid a name collision) is simple: it deletes the content with the provided id — it does not even have to load it from the db.
Extend the Dashboard Index view
To display links for the new Create and Delete actions above, please modify the Index.cshtml file in the Views/Dashboard folder to its final form:
We added a Create link at the top and Delete links to the tables on both sides.
If you successfully completed the steps above, you will be able to manage Tasks on the Dashboard of your first sensenet ECM MVC site!
What’s next?
The example above is very simple and limited. In the future we would like to add more helpers to simplify the creation of route links in cshtml files and new components for aiding authentication.
Please experiment with the code, try to use your own MVC techniques and contact us if you stuck at some point or need a new feature!
Originally published at community.sensenet.com on January 31, 2018.
