Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Part 81 - Range attribute in asp.net mvc

Suggested Videos 
Part 78 - Different types of ActionResult in asp.net mvc
Part 79 - Areas in asp.net mvc
Part 80 - StringLength attribute



RangeAttribute checks if the value of a data field is within a specified range of values. We will be working with the example, that we started in Part 80. Please watch Part 80, before proceeding.



When you navigate to /Home/Edit/1, notice that we don't have validation on Age field. If you enter 5000 as the age and click Save, the date gets saved. Obviously an employee having 5000 years as the age is not practical. So, let's validate Age field, and enforce users to enter a value between 1 and 100. To achieve this RangeAttribute can be used.

Make the following change to the Employee class in Employee.cs file in Models folder. Notice that, we are using RangeAttribute, and have set minimum and maximum as 1 and 100 respectively.
public class EmployeeMetaData
{
    [StringLength(10, MinimumLength = 5)]
    [Required]
    public string Name { get; set; }

    [Range(1, 100)]
    public int Age { getset; }
}

At this point, we should not be able to enter any values outside the range of 1 and 100 for Age field.

Range attribute can also be used to validate DateTime fields. Let's now discuss using Range attribute with DateTime fields.

At the moment our Employee class does not have any DateTime field. Let's add HireDate column to table tblEmployee. Use the sql script below to alter the table.
Alter table tblEmployee
Add HireDate Date

SQL script to update the existing employee records:
Update tblEmployee Set HireDate='2009-08-20' where ID=1
Update tblEmployee Set HireDate='2008-07-13' where ID=2
Update tblEmployee Set HireDate='2005-11-11' where ID=3
Update tblEmployee Set HireDate='2007-10-23' where ID=4

Update the ADO.NET data model.
1. In the Solution Explorer, double click on SampleDataModel.edmx file in Models folder.
2. Right click on "Employee" model and select "Update Model from database" option
3. Click on "Refresh" tab on "Update Wizard"
4. Expand "Tables" and select "tblEmployee" table and click "Finish.
5. These steps should add HireDate property to the autogenerated Employee entity class

Build the solution to compile Employee entity class.

Copy and paste the following 2 DIV tags in Edit.cshtml view, just above the "Save" button.
<div class="editor-label">
    @Html.LabelFor(model => model.HireDate)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.HireDate)
    @Html.ValidationMessageFor(model => model.HireDate)
</div>

Make the following change to the Employee class in Employee.cs file in Models folder. Notice that, we are passing DateTime as the type and specifying the minimum and maximum values for HireDate. We are also using DisplayFormat attribute, so that only date part of DateTime is displayed in the Edit view.
public class EmployeeMetaData
{
    [StringLength(10, MinimumLength = 5)]
    [Required]
    public string Name { get; set; }

    [Range(1, 100)]
    public int Age { get; set; }

    [Range(typeof(DateTime), "01/01/2000", "01/01/2010")]
    [DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
    public DateTime HireDate { get; set; }
}

At this point, we should not be able to enter any values outside the range of "01/01/2000" and "01/01/2010" for HireDate field.

However, when the Range attribute is used with DateTime fields, the client side validation does not work as expected. We will discuss this in a later video session.

3 comments:

  1. It is not working with date range. I am getting range date but it is showing me error message

    The field HireDate must be between 1/1/2000 12:00:00 AM and 1/1/2010 12:00:00 AM.

    I have given min value= 1/1/2000 and max value 1/1/2010

    ReplyDelete
  2. Hi Vinod,

    Make sure you are removing the below piece of code from your edit template(Edit.cshtml in above scenario)

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

    * No reference to JQuery or Javascript for above example to work properly

    ReplyDelete
  3. HI Vinod,

    Kindly try removing below piece of code from you edit template(edit.cshtml in above example)

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

    ReplyDelete

It would be great if you can help share these free resources