C# Corner
ASP.NET MVC 6 and Tag Helpers, Part 2
The next step is to update the User View Model class to include a string property for the user's type drop-down control:
[Display(Name="Type")]
public string UserType { get; set; }
Your completed User class should now look like Listing 7.
Listing 7: User.cs Updated To Include UserType Property
using System.ComponentModel.DataAnnotations;
namespace MvcSample.Web.Models
{
public class User
{
[Required]
[MinLength(4)]
public string Name { get; set; }
public string Address { get; set; }
public int Age { get; set; }
[Display(Name="Type")]
public string UserType { get; set; }
}
}
Lastly I update the Home Controller class to return a list of user types in a action method named UserType:
public IActionResult UserType()
{
var list = new List<string> { "Employee", "Employer", "Customer" };
return Json(list);
}
See Listing 8 for the updated Home Controller class.
Listing 8: HomeController.cs Updated To Include UserType Action Method
using Microsoft.AspNet.Mvc;
using MvcSample.Web.Models;
using System.Collections.Generic;
namespace MvcSample.Web
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View(CreateUser());
}
public User CreateUser()
{
User user = new User()
{
Name = "My name",
Address = "My address"
};
return user;
}
public IActionResult UserType()
{
var list = new List<string> { "Employee", "Employer", "Customer" };
return Json(list);
}
}
}
You should now be able to run the application via the "dnx web" command and see the custom bootstrap-select Tag Helper in action as seen in Figure 1.
[Click on image for larger view.]
Figure 1: Finished Application
You can also run the application directly in Visual Studio by updating the project settings. First update the Application Solution DNX SDK Version to be 1.0.0-rc1-15838 as seen in Figure 2.
[Click on image for larger view.]
Figure 2: Application Solution DNX SDK Version Update to RC1
Next update the Debug Use Specific Runtime value to as be 1.0.0-rc1-15838 as seen in Figure 3.
[Click on image for larger view.]
Figure 3: Debug Use Specific Runtime Version Update to RC1
Creating a custom tag helper in ASP.NET MVC 6 in fairly easy to do. I recommend creating a custom tag helper in situations where you would have created a custom HTML helper in prior versions of ASP.NET MVC, as they are more easily readable by both designers and developers.
Next time, I'll show how to implement a custom view component, which allows for the separation of the markup and code for a reusable partial view.
About the Author
Eric Vogel is President and Lead Software Architect at Avant-Garde Labs, LLC. In DeWitt, Michigan. He is the president of the Greater Lansing User Group for .NET. Eric enjoys learning about software architecture and craftsmanship, and is always looking for ways to create more robust and testable applications. Contact him at [email protected].