Automatic Model Binding in Razor Pages Using ASP.NET Core MVC

One of the powerful features of Razor Pages and the Model-View-Controller architectural pattern is automatic model binding. Model binding occurs automatically in Razor Pages when using Tag Helpers in conjunction with the properties in your models or classes.

Below is the Razor Page code for the LearnASPNET.com Contact page. You will notice that four input controls and one textarea control each use an asp-for input Tag Helper. Examine those 5 fields and notice the value of the fields for attribute. They are:

• Name
• Subject
• Email
• ConfirmEmail
• Boby

<form method="post" asp-controller="Home" asp-action="Contact" enctype="multipart/form-data">
    <table border="0" cellpadding="0" cellspacing="0">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group mb-3">
            <label asp-for="Name" class="control-label"></label>
            <input asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <div class="form-group mb-3">
            <label asp-for="Subject" class="control-label"></label>
            <input asp-for="Subject" class="form-control" />
            <span asp-validation-for="Subject" class="text-danger"></span>
        </div>
        <div class="form-group mb-3">
            <label asp-for="Email" class="control-label"></label>
            <input asp-for="Email" class="form-control" />
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
        <div class="form-group mb-3">
            <label asp-for="ConfirmEmail" class="control-label"></label>
            <input asp-for="ConfirmEmail" class="form-control" />
            <span asp-validation-for="ConfirmEmail" class="text-danger"></span>
        </div>
        <div class="form-group mb-3">
            <label asp-for="Body" class="control-label"></label>
            <textarea asp-for="Body" class="form-control" style="height:100px"></textarea>
            <span asp-validation-for="Body" class="text-danger"></span>
        </div>
        <div class="form-group mb-3">
            @Html.ReCaptcha()
        </div>
        <div class="form-group">
            <input type="submit" value="Send" class="btn btn-primary" />
        </div>
    </table>
    <br />
    <span style="color:green;font-size:xx-large">@ViewBag.Message</span>
</form>

Below is the Class file associated with the Contact page. In the Model-View-Controller architecture pattern, Razor Pages use a model or class representing the data the application manages. This model interacts with the Razor page to bind data through the use of Tag Helpers mentioned previously. You will notice that the properties of this EmailContact class match the value of the fields for attribute in the Razor Page code above.

• Name
• Subject
• Email
• ConfirmEmail
• Boby

namespace LearnASPNET.Models
{
    public class EmailContact
    {
        [Required]
        [DisplayName("Your Name:")]
        public string Name { get; set; }
        
        [Required]
        [DisplayName("Subject:")]
        public string Subject { get; set; }
        
        [Required]
        [DataType(DataType.EmailAddress)]
        [DisplayName("Your Email:")]
        public string Email { get; set; }

        [NotMapped]
        [Required]
        [DataType(DataType.EmailAddress)]
        [Compare("Email", ErrorMessage = "Email Addresses do not match.")]
        [DisplayName("Confirm Your Email:")]
        public string ConfirmEmail { get; set; }
        
        [Required]
        [DisplayName("Your Message:")]
        public string Body { get; set; }
        //public IFormFile Attachment { get; set; }
    }
}

When the value of fields for attribute matches the name of the property in the associated model, binding automatically occurs. 

As you can see, Razor Pages and Tag Helpers are very powerful.