In ASP.NET web forms the request to an URL goes to a physical file on the web server. In ASP.NET MVC application the request to an URL does not represent a physical file, rather it invokes a method in a class (controller action). A controller action in an ASP.NET MVC application typically returns a View most of the times, however it can also perform other actions like returning a file or re-directing to another controller action.

A sample Controller action looks like below

http://serverurl/ControllerName/ActionName

http://serverurl/Home/Index

Home is the default controller that we will get when we create an ASP.NET MVC application in Visual Studio. Index is the default controller action that comes default in Visual Studio.

ASP.NET MVC framework works based on certain conventions. For every controller a sub-folder gets created under Views. For every controller action, a .cshtml file gets created under the respective sub-folder inside Views folder.

Now let’s move to understand HTMLHelpers. ASP.NET web forms have server controls which is used for data entry and UI form processing. In ASP.NET MVC we don’t have server controls, we need to rely on HTML Controls for data entry and UI form processing.

1. BeginForm

The BeginForm helper method denotes the start of an HTML form and it renders an HTML form element. The BeginForm method has 13 overrides and the i’m using the following  version of override in this post

   @using (Html.BeginForm("Index", "Home", FormMethod.Post))
        { 
        
        }

2.RadioButton helper

The Radio button helper helps us to render a RadioButton control. It can be bounded to a model property, which also can be set with values and group for the RadioButton.

 Male @Html.RadioButtonFor(model => model.Sex,"Male")
                Female @Html.RadioButtonFor(model => model.Sex, "Female")

3.Textbox helper

The @Html.EditorFor helper supports us to render a TextBox control for data capture. It can be bound to a model property.

        @Html.EditorFor(model => model.Age)

4.DropDownListControl

The @Html.DropDownListfor helper control supports us to render a dropdownlist control. It can be databound to a IEnumerable>T> which needs to be type casted as SelectList, while performing data binding.

 @Html.DropDownListFor(model => model.PolicyType, ViewData["PolicyType"] as SelectList)

5.CheckBox Control

The @Html.CheckBox control support us to to render a CheckBox control. It can be data bound to a boolean property in the Model.

@Html.CheckBoxFor(model=>model.ReceiveMails)

6.Label Control

The @Html.Label control supports us to render a Label control, whose literal value is bound from a string property in the Model.

 @Html.LabelFor(model => model.Age, new { @class = "control-label col-md-2" })

 

7. ActionLink Control

The @Html.ActionLink control supports us to link to an action method in a controller when the link is clicked.

  @Html.ActionLink("Back to List", "Index")

With the above briefing, i will be creating a View to capture the details for generating an InsuranceQuotation. The Model object definition looks like below :-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCDemo2.Models
{
    public class InsurancePolicy

    {

        public string FirstName { get; set; }
        public string LastNane { get; set; }
        public int Age { get; set; }
        public string Sex { get; set; }
        
        public string PolicyType { get; set; }

        public int PolicyTerm { get; set; }
        public int SumAssured { get; set; }

        public bool ReceiveMails { get; set; }


    }
}

My end goal is to create a View (shown below) to capture the details for generating Quotation.

The definition of my View ‘GenerateQuote.cshmtl’ looks like below :-

@model MVCDemo2.Models.InsurancePolicy

@{
    ViewBag.Title = "GenerateQuote";
}

<h2>GenerateQuote</h2>



@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>InsurancePolicy</h4>
        <hr />
        @Html.ValidationSummary(true)

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

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

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

        <div class="form-group">
            @Html.LabelFor(model => model.Sex, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                Male @Html.RadioButtonFor(model => model.Sex,"Male")
                Female @Html.RadioButtonFor(model => model.Sex, "Female")
                @Html.ValidationMessageFor(model => model.Sex)
            </div>
        </div>

        

        <div class="form-group">
            @Html.LabelFor(model => model.PolicyType, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.PolicyType, ViewData["PolicyType"] as SelectList)
                @Html.ValidationMessageFor(model => model.PolicyType)
            </div>
        </div>

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

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

        <div class="form-group">

            @Html.LabelFor(model=>model.ReceiveMails)
            @Html.CheckBoxFor(model=>model.ReceiveMails)
           
        </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")
}

This completes this article. My next post on ASP.NET MVC is here.

 Subscribe to my blog