Getting Started With ASP.NET MVC - Part Four

Introduction

 

This article explains the basics of ASP.NET MVC and explains about the below topics -

1. Different types of parameters
2. Integrated View and Controller
3. Integrated View and Controller using Model

Read the previous parts of the article before reading this one.

• Getting Started With ASP.NET MVC - Part One
• Getting Started With ASP.NET MVC - Part Two
• Getting Started With ASP.NET MVC - Part Three

Different types of parameters

 

We can pass the different types of values through URL request using parameter variables in MVC.

 

Type 1

 

We do not pass any values with a URL request very often. For example, our URL is http://localhost:56302/Home/Index so our action method does not contain any parameter, it looks like below. 

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

Type 2

 

Action method usually has parameters. Sometimes, if it has any parameter, we should pass the value through URL request based on a number of parameters. For example, here, only one parameter is in action method so our URL is “localhost:56302/Home/Index?a=10”. It looks like below. 

public ActionResult Index(int a)
      {
          return View();
      }

If the parameter is not nullable, we should pass the values to the parameter, otherwise, we might be getting an error. We can find the screenshot like below.

 

 

 

Note
We should declare the parameter as nullable to avoid the error if we have not passed the value in the request URL. Normally, we mention the parameter as nullable by “?”. 

public ActionResult Index(int? a)
        {
            return View();
        }

Type 3

 

If we declare the string as a parameter, we do not need to pass the value as mandatory. Sting is a nullable value so it does not pass the value. On the other hand, it will take null values so we do not get an error. The functionality looks like below screenshot.

 

 

 

Parameter value will pass to the action method if the values in URL looks like “localhost:56302/Home/Index?name="Vignesh".

 

 

 

Integrated View and Controller

 

The view is a user interface to the user. The view should integrate with the corresponding controller to process the data. We are adding a new controller as “Demo” and adding an action method as “Customer”.

 

Example 

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

namespace MVC_Part4.Controllers
{
    public class DemoController : Controller
    {
        // GET: Demo
        public ActionResult Customer()
        {
            return View();
        }
    }
}

Add the view from “Customer” action method in the “Demo” controller, we can find the “Customer.cshtml” view page inside the view folder under “Demo” folder in MVC structure, looks like below screenshot.

 

 

 

We are going to design as per our requirement, for example here we need to get the customer details, so we need to do a design that looks like the below user interface design.

 

Code for Design 

@{
    ViewBag.Title = "Customer";
}

<h2>Customer</h2>
@using (Html.BeginForm("SaveCustomer", "Demo", FormMethod.Post))
{
    <table>
        <tr><td>Name</td><td>@Html.TextBox("Name")</td></tr>
        <tr><td>Address</td><td>@Html.TextBox("Address")</td></tr>
        <tr><td>City</td><td>@Html.TextBox("City")</td></tr>
        <tr><td>Mobile</td><td>@Html.TextBox("Mobile")</td></tr>
        <tr><td colspan="2"><input type="submit" value="Submit" /></td></tr>
    </table>
}

Output

 

Once we run the application after designing,  using the URL http://localhost:50385/Demo/Customer, we get the output that looks like below.

 

 

When we click submit, all the form values need to pass the controller but we need to integrate the specific View and controller action method.

 

We can integrate using “Html.BeginForm”, see the code below for map or integrated View and Controller action method. 

@using (Html.BeginForm("SaveCustomer", "Demo", FormMethod.Post))
{
}

Above code integrates “Customer” view and “SaveCustomer” action method in Demo controller. This is the way of the integrated view and controller action methods. Now enter the values and click the submit button.

 

 

 

After clicking submit, values pass to the controller but all field names and action method parameter names should be the same as below.

 

 

 

Integrated View and Controller using Model

 

We can integrate view and controller using model. First create model as “Customer” inside the model folder, which looks like below.

 

  

namespace MVC_Part4.Models
{
    public class Customer
    {
        public string Name { set; get; }
        public string Address { set; get; }
        public string City { set; get; }
        public string Mobile { set; get; }
    }
}

Add action method in “Demo” controller. 

namespace MVC_Part4.Controllers
{
    public class DemoController : Controller
    {
        // GET: Demo
        public ActionResult Customer()
        {
            return View();
        }
    }
}

Right click on the action method name and click “Add View”. Select “Create” in Template and select Model class “Customer (MVC_Part4.Models)” which creates a class inside the model folder.

 

 

 

Now click the add button, this integration is with a model to view. After adding “Customer” view we can see the auto-generated code in the below. We changed only “@using (Html.BeginForm("SaveCustomer", "Demo",FormMethod.Post))” In the code. 

@model MVC_Part4.Models.Customer
@{
    ViewBag.Title = "Customer";
}
<h2>Customer</h2>
@using (Html.BeginForm("SaveCustomer", "Demo",FormMethod.Post))
{
    @Html.AntiForgeryToken()

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

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

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

        <div class="form-group">
            @Html.LabelFor(model => model.Mobile, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Mobile, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Mobile, "", 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>

Now build and run our application and go to the http://localhost:50385/Demo/Customer URL and enter the values and click Create button,

 

 

 

Once you click create button the controller goes to the corresponding controller's action method, and here there is no need to mention a separate variable for each field. Here we are using the model in the view and strongly typed HTML helper controller so in the action method only create an object for “Customer” class like below.

 

 

 

All the values passed through an object because in the view all the values are integrated into the model properties. We pass Customer class object to the “SaveCustomer” view page. We can find the below code for the view details. Using “@model” we can integrate the model in the view page. 

@model MVC_Part4.Models.Customer
@{
    ViewBag.Title = "SaveCustomer";
}
<h2>SaveCustomer</h2>
<div>
    <h4>Customer</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Address)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Address)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.City)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.City)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Mobile)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Mobile)
        </dd>

    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
    @Html.ActionLink("Back to List", "Index")
</p>

Build the code and run the application. Enter the value in demo page and submit; then view the submitted details.

 

Output

 

 

 

Conclusion

 

This article explained different types of parameters, Integrated View and Controller, and Integrated View and Controller using Model. I hope this is very helpful for new learners. The next article explains about getting started with ASP.NET MVC part 5.