Classes residing in App_Code is not accessible

namespace CLIck10.App_Code
{
    public static class Glob
    {
        ...
    }
}

Right click on the .cs file in the App_Code folder and check its properties.

Make sure the "Build Action" is set to "Compile".

User friendly CAPTCHA for Asp.Net MVC

In this post I will show you how to add CAPTCHA functionality to a html form in an Asp.Net MVC 4 project. My goal is to make the CAPTCHA problem easy enough for all to solve, like a simple sum operation, and easier to read then the standard CAPTCHA text. An easy to read image is more vulnerable to smart bots that have an ORC system but I prefer to scare less clients then to provide the strongest anti-bot protection. And one more feature, when clicked the image should, change giving the users a new chance to respond correctly.


Implementing CAPTCHA in C# and MVC 4 takes these steps:

• Create an Action that returns a CAPTCHA image and stores in the user session the right answer
• Add to your Model a string property named Captcha
• Add to your View the textbox for Captcha and the image placeholder
• Validate answer inside your own Action

Render CAPTCHA image

CaptchaController.cs

        public ActionResult CaptchaImage(string prefix, bool noisy = true)
        {
            var rand = new Random((int)DateTime.Now.Ticks);             //generate new question
            int a = rand.Next(10, 99);
            int b = rand.Next(0, 9);
            var captcha = string.Format("{0} + {1} = ?", a, b);
            //store answer
            Session["Captcha" + prefix] = a + b;
            //image stream
            FileContentResult img = null;
            using (var mem = new MemoryStream())
            using (var bmp = new Bitmap(130, 30))
            using (var gfx = Graphics.FromImage((Image)bmp))
            {
                gfx.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
                gfx.SmoothingMode = SmoothingMode.AntiAlias;
                gfx.FillRectangle(Brushes.White, new Rectangle(0, 0, bmp.Width, bmp.Height));
                //add noise
                if (noisy)
                {
                    int i, r, x, y;
                    var pen = new Pen(Color.Yellow);
                    for (i = 1; i < 10; i++)
                    {
                        pen.Color = Color.FromArgb(
                        (rand.Next(0, 255)),
                        (rand.Next(0, 255)),
                        (rand.Next(0, 255)));
                        r = rand.Next(0, (130 / 3));
                        x = rand.Next(0, 130);
                        y = rand.Next(0, 30);
                        gfx.DrawEllipse(pen, x – r, y – r, r, r);
                    }
                }
                //add question
                gfx.DrawString(captcha, new Font("Tahoma", 15), Brushes.Gray, 2, 3);
                //render as Jpeg
                bmp.Save(mem, System.Drawing.Imaging.ImageFormat.Jpeg);
                img = this.File(mem.GetBuffer(), "image/Jpeg");
            }
            return img;
        }

If you want to use multiple  CAPTCHAs you can use the prefix to store the answer for each form. Much can be improved regarding the rendered image, for example I could use different font and size for each number in the equation, replace the noise with text distortion.

Include  CAPTCHA validator in Model and View

Models.cs

    public class SubscribeModel
    {
        //model specific fields         [Required]
        [Display(Name = "How much is")]
        public string Captcha { get; set; }
    }

In the View, beside a label, textbox and validator span you’ll need to add an image placeholder for the CAPTCHA.

Index.cshtml

@*form specific fields*@ <div class="editor-label">
    @Html.LabelFor(model => model.Captcha)
    <a href="@Url.Action("Index")">
        <img alt="Captcha" src="@Url.Action("CaptchaImage")" style="" />
    </a> </div> <div class="editor-field">
    @Html.EditorFor(model => model.Captcha)
    @Html.ValidationMessageFor(model => model.Captcha) </div>

Validate CAPTCHA on the server side

Inside your post action where the form submits you can validate the answer by comparing with the session value.

CaptchaController.cs

[HttpPost] public ActionResult Index(SubscribeModel model)
{
    //validate captcha
    if (Session["Captcha"] == null || Session["Captcha"].ToString() != model.Captcha)
    {
        ModelState.AddModelError("Captcha", "Wrong value of sum, please try again.");
        //dispay error and generate a new captcha
        return View(model);
    }     return RedirectToAction("ThankYouPage");
}

Getting Data From View to Controller in MVC

Introduction

This article explains how to access data from a view to the controller's action method. The action method is a simple C# method that can be parameterized or without a parameter in the controller.
We use two types of methods to handle our browser request; one is HTTP GET and another is HTTP POST. When we call an action method by a request's URL by the browser then the HTTP GET method will be called but when a request is from a button click event then the HTTP POST method will be called. So in this article I am going to explaining how to access view input field data in the controller's action method when a HTTP POST request is called.

Example for GET and POST Request Type

To understand how to access view input field data in the controller's action method (POST), we create a "Calculate Simple Interest" application. This application gets Principle, Rate and Time as user input and generates simple interest. So let's proceed with the application.
Create an action method in the CalculateSimpleInterest controller (CalculateSimpleInterestController.cs) that renders the view on the UI.

Collapse | Copy Code

public ActionResult SimpleInterest()
{
    return View();
}

Create a view to get user input from the UI, so the code is:

Calculate Simple Interest

Collapse | Copy Code

<fieldset>
        <legend>Calculate Simple Interest</legend>
    @using (Ajax.BeginForm("CalculateSimpleInterestResult","CalculateSimpleInterest",
                            new AjaxOptions { UpdateTargetId = "divInterestDeatils" }))
    {
        <div id="divInterestDeatils"></div>
        <ol>
            <li>
                @Html.Label("Amount")
                @Html.TextBox("txtAmount")
            </li>
            <li>
                @Html.Label("Rate")
                @Html.TextBox("txtRate")
            </li>
            <li>
                @Html.Label("Year")
                @Html.TextBox("txtYear")
            </li>
        </ol>
    <button>Calculate</button>
    }   
</fieldset>

So now the screen is ready to get input and it shows it as:

Figure 1.1 Input screens to calculate simple interest

Get the view's data in the Action Method

I will now explain the four ways to get the view's data in the controller action. These are:

• Using Traditional approach
• Using the FormCollection Object
• Using the Parameters
• Strongly type model binding to view

Using Traditional Approach

In the traditional approach we use the request object of the HttpRequestBase class. The request object has view input field values in name/value pairs. When we create a submit button then the request type POST is created and calls the POST method.

Figure 1.2 Requested Data

We have four data, those are in Name-Value pairs. So we can access these data in a POST method by passing the Name as an indexer in the Request and get values. Our POST method means the controller action that handles the POST request type is:

Collapse | Copy Code

[HttpPost]
public ActionResult CalculateSimpleInterestResult()
{
    decimal principle = Convert.ToDecimal(Request["txtAmount"].ToString());
    decimal rate = Convert.ToDecimal(Request["txtRate"].ToString());
    int time = Convert.ToInt32(Request["txtYear"].ToString());

    decimal simpleInteresrt = (principle*time*rate)/100;

    StringBuilder sbInterest = new StringBuilder();
    sbInterest.Append("<b>Amount :</b> " + principle+"<br/>");
    sbInterest.Append("<b>Rate :</b> " + rate + "<br/>");
    sbInterest.Append("<b>Time(year) :</b> " + time + "<br/>");
    sbInterest.Append("<b>Interest :</b> " + simpleInteresrt);
    return Content(sbInterest.ToString());
}

When it executes, we get simple interest as the result as in the following:

Figure 1.3 Output screen after getting response

Using the FormCollection Object
We can also get post requested data by the FormCollection object. The FormCollection object also has requested data in the name/value collection as the Request object. To get data from the FormCollection object we need to pass it is as a parameter and it has all the input field data submitted on the form.

Collapse | Copy Code

[HttpPost]
public ActionResult CalculateSimpleInterestResult(FormCollection form)
{
    decimal principle = Convert.ToDecimal(form["txtAmount"].ToString());
    decimal rate = Convert.ToDecimal(form["txtRate"].ToString());
    int time = Convert.ToInt32(form["txtYear"].ToString());

    decimal simpleInteresrt = (principle*time*rate)/100;

    StringBuilder sbInterest = new StringBuilder();
    sbInterest.Append("<b>Amount :</b> " + principle+"<br/>");
    sbInterest.Append("<b>Rate :</b> " + rate + "<br/>");
    sbInterest.Append("<b>Time(year) :</b> " + time + "<br/>");
    sbInterest.Append("<b>Interest :</b> " + simpleInteresrt);
    return Content(sbInterest.ToString());
}

It also gives the same output as Figure 1.3 shows.
Using the Parameters
We can pass all input field names as a parameter to the post action method. The input field name and parameter name should be the same. These parameters have input field values that were entered by the user. So we can access view input field values from these parameters. The input field takes a string value from the user so the parameter should be a string type. There is no need to define a parameter in any specific sequence.

Collapse | Copy Code

[HttpPost]
public ActionResult CalculateSimpleInterestResult(string txtAmount, string txtRate, string txtYear)
{
    decimal principle = Convert.ToDecimal(txtAmount);
    decimal rate = Convert.ToDecimal(txtRate);
    int time = Convert.ToInt32(txtYear);

    decimal simpleInteresrt = (principle*time*rate)/100;

    StringBuilder sbInterest = new StringBuilder();
    sbInterest.Append("<b>Amount :</b> " + principle+"<br/>");
    sbInterest.Append("<b>Rate :</b> " + rate + "<br/>");
    sbInterest.Append("<b>Time(year) :</b> " + time + "<br/>");
    sbInterest.Append("<b>Interest :</b> " + simpleInteresrt);
    return Content(sbInterest.ToString());
}

It also gives the same output as Figure 1.3 shows.
In all three approaches above we are parsing the string to a non-string type. If any of the parsing attempts fail then the entire action will fail. We are converting each value to avoid an exception but it also increases the amount of code. So we look at the fourth approach that would reduce the amount of code.

Strongly type model binding to view

We bind a model to the view; that is called strongly type model binding.
Step 1: Create a Model for Simple Interest.

Collapse | Copy Code

namespace CalculateSimpleInterest.Models
{
    public class SimpleInterestModel
    {
        public decimal Amount { get; set; }
        public decimal Rate { get; set; }
        public int Year { get; set; }
    }
}

Step 2: Create an action method that render a view on the UI.
We are passing an empty model to be bound to the view.

Collapse | Copy Code

public ActionResult SimpleInterest()
{
    SimpleInterestModel model = new SimpleInterestModel();
    return View(model);
}

Step 3: Create a strongly typed view that has the same screen as in Figure 1.1.

Collapse | Copy Code

@model CalculateSimpleInterest.Models.SimpleInterestModel

@{
    ViewBag.Title = "SimpleInterest";
}
<h2>Calulate Simple Interest</h2>@using (Ajax.BeginForm("CalculateSimpleInterestResult","CalculateSimpleInterest",
                            new AjaxOptions { UpdateTargetId = "divInterestDeatils" }))
    {
       
    <fieldset>
        <legend>Calulate Simple Interest</legend><div id="div1"></div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Amount)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Amount)          
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Rate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Rate)          
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Year)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Year)           
        </div>
        <p>
            <input type="submit" value="Calculate" />
        </p>
    </fieldset>
 }
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Step 4: Create an action method that handles the POST request and processes the data.
In the action method we pass a model as the parameter. That model has UI input field data. Here we do not need to parse and do not need to write extra code.

Collapse | Copy Code

[HttpPost]
public ActionResult CalculateSimpleInterestResult(SimpleInterestModel model)
{
    decimal simpleInteresrt = (model.Amount*model.Year*model.Rate)/100;
    StringBuilder sbInterest = new StringBuilder();
    sbInterest.Append("<b>Amount :</b> " + model.Amount+"<br/>");
    sbInterest.Append("<b>Rate :</b> " + model.Rate + "<br/>");
    sbInterest.Append("<b>Time(year) :</b> " + model.Year + "<br/>");
    sbInterest.Append("<b>Interest :</b> " + simpleInteresrt);
    return Content(sbInterest.ToString());
}

It also gives the same output as Figure 1.3 shows.

Learn MVC (Model View Controller) step by step in 7 days – Day 1

Day 1: -Controllers, strong typed views and helper classes

So why MVC when ASP.NET code-behind is so good?

I am sure all ASP.NET developers love the code-behind concept. Accepting something new like MVC will not be easy for them. So let’s analyze the problems with the current code-behind concept.
When we generally talk about ASP.NET applications built on a tiered architecture they are divided in four parts: UI (ASPX pages), code-behind (ASPX.CS pages), middle tier (.NET classes), and finally the Data layer.
If you look from the aspect of code distribution, the major code which has logic is in the middle tier or in the code-behind (ASPX.CS files). The UI or ASPX files are HTML files which are more about UI design, and data access logic is pretty much standard components like enterprise data blocks, entity data contexts, etc.

Let’s try to analyze the problems.

Problem number 1: Unit Testing

From the aspect of unit testing we can exclude the data logic and the UI HTML. The data logic classes are already time tested components like enterprise data block, entity data context, or LINQ data context. So we really do not have to put a lot of effort on testing the DAL separately. In case you have a custom data access layer it will still be easy to test them as they are simple .NET classes.
There is no logic in testing an ASPX HTML as it’s more about look and feel.
The middle tier is again a simple .NET class like data logic so you can easily do unit testing using VSTS or NUNIT.
Now comes the most important one: the code-behind. The code-behind has a lot of action, and testing it is one of the most important things. The only way to invoke these codes is by doing a manual test. From a time perspective this would not be a great choice.
Even though Microsoft has always boasted about how the ASP.NET code-behind is separate from the UI, in practical sense, it’s very difficult to decouple ASP.NET code-behind and do unit testing on it.
The ASP.NET code-behind is completely tied up with the ASP.NET HttpContext object which makes unit testing very difficult. Just think os how to unit test the below ASP.NET code-behind. How do I create an HttpCcontext object, how do I simulate the sender and EventArgs objects of the button clicks, etc.
FYI: Many developers talk about mock tests, rhino mocks, etc., but still it is cryptic and the complication increases with session variables, view data objects, and ASP.NET UI controls creating further confusion.

Problem 2: The reality of separation of code and UI

As said previously, the ASPX and the ASPX.CS cannot be decoupled in reality, thus reducing reusability. Yes, Microsoft did say first that the code-behind is different from the UI, but then they are probably separate physical files only and one cannot just exist without the other.
For instance let’s say the same button click code when called via HTTP POST should display using displayinvoice.aspx and when called via HTTP GET should display in a tree view. In other words we would like to reuse the code-behind. Just think of how can we do this using the current code-behind.

Our HERO MVC (Model, View, and Controller)

That’s where MVC comes to rescue. The code-behind is moved to a simple .NET class called Controller. Any user request first comes to the Controller class, the Controller class then invokes the model, and attaches the model to the view for display to the end user.

As this controller class is a simple .NET class we can reuse and also do unit testing easily. So let’s see how we can create MVC application using MVC template provided by visual studio.

Pre-requisite for MVC

Before we start the day let's ensure that you have all the ingredients to create an MVC application.

• Visual Studio 2010 or the free Visual Web Developer 2010 Express. These include the ASP.NET MVC 2 template by default.
• Visual Studio 2008 SP1 (any edition) or the free Visual Web Developer 2008 Express with SP1. These do not include ASP.NET MVC 2 by default; you must also download and install ASP.NET MVC 2 from http://www.asp.net/mvc/.

So once you have all your pre-requisites it is time to start the first lab.

Lab 1: Creating a simple Hello World ASP.NET MVC application

In this lab we will create a simple Hello World program using an MVC template. We will create a simple controller, attach the controller to a simple index.aspx page, and view the display on the browser.

Video demonstration for lab 1

In case you want to spend more time with your family rather than reading the complete article you can watch the following 5 minute YouTube video: http://youtu.be/KAKxm4eQP24?hd=1.

Step 1: Create project

Create a new project by selecting the MVC 2 empty web application template as shown in the below figure.

Once you click OK, you have a readymade structure with the appropriate folders where you can add controllers, models, and views.

Step 2: Add controller

So let’s go and add a new controller as shown in the below figure.

Once you add the new controller, you should see some kind of code snippet as shown below:

Collapse | Copy Code

public class Default1Controller : Controller
{
    //
    // GET: /Default1/
    public ActionResult Index()
    {
        return View();
    }
}

Step 3: Add view

Now that we have the controller we need to go and add the view. So click on the Index function which is present in the control and click on the Add View menu as shown in the below figure.

The add view pops up a modal box to enter the view name which will be invoked when this controller is called as shown in the figure below. For now, keep the view name same as the controller name and also uncheck the master page check box.

Once you click on the OK button of the view, you should see a simple ASPX page with the below HTML code snippet. In the below code snippet I have added “This is my first MVC application”.

Collapse | Copy Code

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index</title>
</head>
<body>
<div>
This is my first MVC application
</div>
</body>
</html>

Step 4: Run the application

If you do a CTRL + F5 you should see an error as shown in the below figure. This error is obvious because we have not invoked the appropriate controller / action.

If you append the proper controller on the URL you should be able to see the proper view.

In case you are getting the below famous error you need do some more hard work.

So first let’s try to understand what the error says. The error says that the view i.e. the ASPX file should either be in a shared folder or in the controller name folder. For instance in our case the controller name is “Default1” so either you move your view in to “Default1” folder or you move it to the “shared” folder.
In the below image you can see my view i.e. “Index.aspx” is in the “Default1” folder.

So what’s in the next lab?

Now that we have created a simple MVC Hello World, it’s time to see how we can pass data from the controllers to the views. The first hit comes to the controller which will load your business objects or model and you would like to transfer these objects to the view to display them.

Lab 2: Passing data between controllers and views

The controller gets the first hit and loads the model. Most of the time we would like to pass the model to the view for display purposes. As an ASP.NET developer your choice would be to use session variables, view state, or some other ASP.NET session management object.
The problem with using the ASP.NET session or view state object is the scope. ASP.NET session objects have session scope and view state has page scope. For MVC we would like to see the scope limited to the controller and the view. In other words we would like to maintain data when the hit comes to the controller and reaches the view and after that the scope of the data should expire.
That’s where the new session management technique has been introduced in the ASP.NET MVC framework, i.e., ViewData.

Video demonstration for lab 2

Below is a simple YouTube video which demonstrates the lab for the view data. In this video we will see how we can share data between the controller and the view using view data. So we will create a simple controller, record the current data in a view data variable, and then display the same in the view using the percentage tag: http://youtu.be/Fu9v2MIDlTA?hd=1.

Step 1: Create project and set view data

So the first step is to create a project and a controller. In the controller, set the viewdata variable as shown in the below code snippet and kick off the view.

Collapse | Copy Code

public class DisplayTimeController : Controller
{
    //
    // GET: /DisplayTime/

    public ActionResult Index()
    {
        ViewData["CurrentTime"] = DateTime.Now.ToString();
        return View();
    }
}

Step 2: Display view data in the view

The next thing is to display data in the view by using the percentage tag. One important point to note is, the view does not have a code-behind. So to display the view we need to use the <%: tag in the ASPX page as shown in the below code snippet.

Collapse | Copy Code

<body>
<div>
<%: ViewData["CurrentTime"] %>
</div>
</body>

So what’s in the next lab?

So now that we know how to pass data using view data, the next lab is to create a simple model and see all the three MVC entities (i.e., model, view, and controller) in action.

Lab 3: Creating a simple model using MVC

In this lab we will create a simple customer model, flourish it with some data, and display it in a view.

Video demonstration for Lab 3

Below is a video demonstration: http://youtu.be/0-UdqWy9lVc?hd=1.

Step 1: Create a simple class file

The first step is to create a simple customer model which is nothing but a class with three properties: code, name, and amount. Create a simple MVC project, right click on the model folder, and click on Add New Item, as shown in the below figure.

From the templates, select a simple class and name it as Customer.

Create the class with three properties as shown in the below code snippet.

Collapse | Copy Code

public class Customer
{
    private string _Code;
    private string _Name;
    private double _Amount;

    public string Code
    {
        set
        {
            _Code = value;
        }
        get
        {
            return _Code;
        }
    }

    public string Name
    {
        get
        {
            return _Name;
        }
        set
        {
            _Name = value;
        }
    }

    public double Amount
    {
        set
        {
            _Amount = value;
        }
        get 
        {
            return _Amount;
        }
    }
}

Step 2: Define the controller with action

The next step is to add the controller and create a simple action display customer as shown in the below code snippet. Import the model namespace in the controller class. In the action, we create an object of the customer class, flourish with some data, and pass it to a view named “DisplayCustomer”.

Collapse | Copy Code

public class CustomerController : Controller
{
    …..
    ….
    public ViewResult DisplayCustomer()
    {
        Customer objCustomer = new Customer();
        objCustomer.Id = 12;
        objCustomer.CustomerCode = "1001";
        objCustomer.Amount = 90.34;

        return View("DisplayCustomer",objCustomer);
    }
}

Step 3: Create strongly typed view using the class

We need to now join the points of MVC by creating views. So right click on the view folder and click Add View. You should see a dropdown as shown in the below figure. Give a view name, check Create a strongly typed view, and bind this view to the customer class using the dropdown as shown in the below figure.


Note :- In case you are not able to see the model in the drop down , please compile your project once.

The advantage of creating a strong typed view is you can now get the properties of the class in the view by typing the model and “.” as shown in the below figure.

Below is the view code which displays the customer property value. We have also put an if condition which displays the customer as a privileged customer if above 100 and a normal customer if below 100.

Collapse | Copy Code

<body>
<div>
The customer id is <%= Model.Id %> <br />

The customer Code is <%= Model.CustomerCode %> <br />

<% if (Model.Amount > 100) {%>
This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>

</div>
</body>

Step 4: Run your application

Now the “D” thing, hit Ctrl + F5 and pat yourself for one more lab success.

So what’s in the next lab?

In this sample we flourished the customer object from within the controller. In the next lab we will take data from an input view and display it. In other words we will see how to create data entry screens for accepting data from views.

Lab 4: Creating a simple MVC data entry screen

Every project small or big needs data entry screens. In this lab we will create a simple customer data entry screen as shown in the below figure using an MVC template.

As soon as the end user enters details and submits data it redirects to a screen as shown below. If the entered amount is less than 100 it displays normal customer, else it displays privileged customer.

Video demonstration for lab 4

Here is a simple video demonstration for this lab: http://youtu.be/1dlxtHuRw34?hd=1.

Step 1: Creating your data entry ASPX page

The first step is to create the data entry page using the simple HTML form action tag as shown in the below code snippet. The most important point to note in the below code snippet is that the action is pointing to the controller action, i.e., ‘DisplayCustomer’.

Collapse | Copy Code

<form action="DisplayCustomer" method="post">
Enter customer id :- <input type="text" name="Id" /> <br />
Enter customer code :- <input type="text" name="CustomerCode" /><br />
Enter customer Amount :-<input type="text" name="Amount" /><br />
<input type="submit" value="Submit customer data" />
</form>

Step 2: Creating the controller

The above defined form action will post to the controller class and on the function “DisplayCustomer”. So we need to get the data from the HTML controls, flourish the object, and send the object to the view.
Below is the code snippet of DisplayCustomer which flourishes the customer object by collecting data from Request.Form and sends the object to the view DisplayCustomer.

Collapse | Copy Code

public class CustomerController : Controller
{
    …..
    ….
    [HttpPost]
    public ViewResult DisplayCustomer()
    {
        Customer objCustomer = new Customer();
        objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
        objCustomer.CustomerCode = Request.Form["Id"].ToString();
        objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
        return View("DisplayCustomer", objCustomer);
    }
}

Step 3: Create the view to display the customer object

The next step is to create the “DisplayCustomer” view. So right click on the view folder and click Add view. You should see a dropdown as shown in the below figure. Give a view name, check Create a strongly typed view, and bind this view to the customer class using the dropdown, as shown in the below figure.

The advantage of creating a strong typed view is you can now get the properties of the class in the view by typing the model and “.” as shown in the below figure.

Below is the view code which displays the customer property value. We have also put an if condition which displays the customer as a privileged customer if above 100 and normal customer if below 100.

Collapse | Copy Code

<body>
<div>
The customer id is <%= Model.Id %> <br />

The customer Code is <%= Model.CustomerCode %> <br />

<% if (Model.Amount > 100) {%>
This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>

</div>
</body>

Step 4: Finally run the project

The final step is to run the project and see the output.

You should also be able to test above 100 and below 100 scenarios.

So what’s in the next lab?

In this lab we created a simple data entry screen which helped us flourish the customer object. This customer object was then passed to the view for display. If you closely watch the current lab we have done a lot of coding, i.e., creating the HTML screens, flourishing the object, etc. It would be great if there was some kind of automation. In the next lab we see how HTML helper classes help to minimize many of these manual coding and thus increase productivity.

Lab 5: Using HTMLHelper to create views faster

In our previous lab we created a simple customer data entry screen. We completed the lab successfully but with two big problems:

Collapse | Copy Code

<form action="DisplayCustomer" method="post">
Enter customer id :- <input type="text" name="Id" /> <br />
Enter customer code :- <input type="text" name="CustomerCode" /><br />
Enter customer Amount :-<input type="text" name="Amount" /><br />
<input type="submit" value="Submit customer data" />
</form>

public class CustomerController : Controller
{
    &hellip;..
    &hellip;.
    [HttpPost]
    public ViewResult DisplayCustomer()
    {
        Customer objCustomer = new Customer();
        objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
        objCustomer.CustomerCode = Request.Form["Id"].ToString();
        objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
        return View("DisplayCustomer", objCustomer);
    }
}

• The complete HTML code was written manually. In other words, it was less productive. It’s like going back to the dark ages where developers used to write HTML tags in Notepad.
• Added to that, a lot of manual code was also written in the controller to flourish the object and send data to the MVC view.

In this lab we will see how to use MVC HTMLHelper classes to minimize manual coding and increase productivity.

Step 1: Create the Customer class

Create a simple customer class, please refer to Lab 5 for details.

Step 2: Creating the input HTML form using helper classes

HTML helper classes have readymade functions by which you can create HTML controls with ease. Go to any MVC view and see the intellisense for the HTMLHelper class, and you should see something as shown in the below figure.

By using the HTMLHelper class you can create any HTML control like TextBox, Label, ListBox, etc., just by invoking the appropriate function.
In order to create the form tag for HTML we need to use “Html.BeginForm”. Shown below is the code snippet for that:

Collapse | Copy Code

<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post)) 
{%>
-- HTML input fields will go here 
<%} %>

The above code will generate the below HTML:

Collapse | Copy Code

<form action="DisplayCustomer" method="post">
&hellip;..
&hellip;..
</form>

The HTML helper “beginform” takes three input parameters: action name (method inside the controller), controller name (actual controller name), and HTTP posting methodology (POST or GET).

If you want to create a text box, simply use the “TextBox” function of the HTMLHelper class as shown in the below code. This way you can create HTML controls using the HTMLHelper class functions.

Collapse | Copy Code

Enter customer id :- <%= Html.TextBox("Id",Model)%> <br />

The above code snippet will generate the below HTML code:

Collapse | Copy Code

Enter customer id :- <input type="text" name="Id" /> <br />

To create a data entry screen like the one shown below, we need to the use the below code snippet.

Collapse | Copy Code

<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))
{ %>
Enter customer id :- <%= Html.TextBox("Id",Model)%> <br />
Enter customer code :- <%= Html.TextBox("CustomerCode",Model) %><br />
Enter customer Amount :- <%= Html.TextBox("Amount",Model) %><br />
<input type="submit" value="Submit customer data" />
<%} %>

Step 3: Create a strong typed view by using the customer class

So once you have created the view using the HTMLHelper classes it’s time to attach the customer class with the view; please refer to lab 5 for details.

Step 4: Creating the controller class

The final thing is the controller code. The controller code now becomes very simple. The customer object will be auto flourished as we have used the HTML Helper classes. You will create the controller class as we did in Lab 4 but we do not need to write any kind of code for connecting the HTML screens with the controller, it’s all hidden and automated.

Collapse | Copy Code

[HttpPost]
public ActionResult DisplayCustomer(Customer obj)
{
    return View(obj);
}

Enjoy your output for different conditions of customer amounts entered.