Use AdditionalMetadata attribute in MVC to pass additional metadata

How to use AdditionalMetadata attribute in MVC to pass additional model metadata

AdditionalMetadata attribute is very useful to pass additional data to the view from model without using additional properties. Below example we can see how to use AdditionalMetadata attribute to pass additional data to view.

1. First create an MVC application

   In this default application we already have some features like login and register functions by default. So Im going to modify the registration page using AdditionalMetadata attribute.

2. Go to Models -> AccountViewModels.cs file and find the RegisterViewModel class.

   Here we are going to add some additional data. So Im going to add few AdditionalMetadata attributes for Model and properties.

3. Add a new property called “Department”

   So when registering, user has to enter the department also.

   [Display(Name = "Department")]
   public string Department { get; set; }
   

4. Add some AdditionalMetadata attributes to model and properties.

   [AdditionalMetadata("Header","Register with us")]
   public class RegisterViewModel
   {
   [Required]
   [EmailAddress]
   [Display(Name = "Email")]
   public string Email { get; set; }
   
   [Required]
   [AdditionalMetadata("Tooltip", "Please enter the department")]
   [AdditionalMetadata("PlaceHolder", "Your depertment")]
   [Display(Name = "Department")]
   public string Department { get; set; }
   
   [Required]
   [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
   [DataType(DataType.Password)]
   [Display(Name = "Password")]
   public string Password { get; set; }
   
   [DataType(DataType.Password)]
   [Display(Name = "Confirm password")]
   [System.ComponentModel.DataAnnotations.Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
   public string ConfirmPassword { get; set; }
   }
   

   Here I have added one AdditionalMetadata for the model and another two for Department property. “Header” for the page header text and other two are for department property.

5. Now modify the View to include changes.

   Go to Views -> Account -> Register view and do the changes.

We added a page header, tool tip and a watermark for Department field. For the tool tip we use “title” html attribute and for water mark we use “placeholder” html attribute.

@model AdditionalMetadata.Models.RegisterViewModel
@{
ViewBag.Title = "Register";
object header;
ViewData.ModelMetadata.AdditionalValues.TryGetValue("Header", out header);
var department = ViewData.ModelMetadata.Properties.FirstOrDefault(x => x.PropertyName == "Department");

string toolTip = department.AdditionalValues["Tooltip"].ToString();
string placeHolder = department.AdditionalValues["PlaceHolder"].ToString();
}

<h2>@header.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>Create a new account.</h4>
<hr />
@Html.ValidationSummary("", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Department, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Department, new { @class = "form-control", @placeholder = @placeHolder, @title = @toolTip })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Register" />
</div>
</div>
}

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

6. Now run the project and go to the Account/Register page

Set a debug point in the view and see the values. In the view we can see the values which we passed from the model applied in the page.