w3resource

Views


In the previous tutorial we learnt about ASP.NET Models, which houses the data and business logic of our application. In this tutorial we will take another dive and explore the concept of views in ASP.NET MVC.

Views are simply the user interfaces that displays the model data and enables the users to interact with the system.

In ASP.NET MVC, views are stored in the Views folder. In the Views folder, there exist subfolders which by default represents controllers. Different action methods from different controller classes can render different views. ASP.NET MVC views are organized in a way that views to be rendered by the HomeController are kept in the Home folder inside the Views folder, same with the ActivitiesController rendering views in the Activities folder of the parent Views folder.

asp.net view folders for controllers

View folders for Controllers

The shared folder contains views, layouts and partial views which can be shared among multiple views.

Razor View Engine

The razor view engine was introduced by Microsoft in MVC 3. This makes writing of C# or visual basic codes easier with a mix of HTML. Razor uses the @ character instead of the <%%> character used in the traditional ASP.NET web pages. Razor syntax makes application development a lot faster.

ASP.NET MVC supports following types of view files:

View file extension Description
.cshtml C# Razor view. Supports C# with html tags.
.vbhtml Visual Basic Razor view. Supports Visual Basic with html tags.
.aspx ASP.Net web form
.ascx ASP.NET web control

We will learn about more about Razor syntax in details in the upcoming tutorials.

Creating a View in ASP.NET MVC

In the previous sessions, we have already created the ActivitiesController and Activities model. Now, let's create an activity view to enable us to understand how to use model in views.

To create a view, right click on the views folder and click on add, from the dropdown menu, select views and then, type the name your desired view name in the pop-up box provided. As illustrated in the following snapshot.

asp.net creating a view in asp.net mvc

Always keep the view name as simple as possible, and always ensure it?s the same with the action methods of the controller.

asp.net add view

From the list of template dropdown, select your preferred template form the available scaffold options. Choose the Create template in this case as shown below:

Now, select ActivitesTab from the Model class dropdown. Model class dropdown automatically displays the name of all the classes in the Model folder. We have already created Activites Model class in the previous tutorial, so it would be included in the dropdown.

Check "Use a layout page" checkbox and select _Layout.cshtml page for this view and then click the Add button.

These actions will create the Create View in the Views->Activities folder. You can also repeat the above procedure to create other view while selecting your desired scaffold template.

@model ActivityTab.Models.Activity
@{
    ViewBag.Title = "Create";
}
<h2>Create an Activity</h2>
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Activity</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.ActivityName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ActivityName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ActivityName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Status, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

From the above scaffolded create view, you will discover that there is a mix of HTML and C#/Razor codes. Inline razor expressions start with the @ symbol. The @Html in the code snippets are helper classes which generates html controls.

In the upcoming tutorials we will move further into making our ActiviesTab application more functional. See you in the very next tutorial.



Inviting useful, relevant, well-written and unique guest posts