Asp.Net Core 8: Calander in TextBoxFor Using C#.Net, MVC

Today I will show you how you can display a Calander control in TextBoxFor control in asp.net core 8 MVC application using C#.Net and how we can retrieve selected from view to controller.

Now fort this article we will first create a new asp.net core mvc application and a model class file. In this class file add the below code.

namespace Project.Models
{
    public class UserModel
    {
        public DateTime DateOfBirth { get; set; }
    }
}

In this we will define a property which we bind with TextBoxFor control. The property names as DateOfBirth will use to bind the TextBoxFor xontrol and on button submit we will get the selected or added value at controller end.

What Is Strongly Type in Asp.net Core MVC?Strongly type is a model object to which we used to bind the control in view. and on form summation of form the model object will help to get the selected value at controller end. Here if we take an example the @Html.TextBox is not a strongly type and on other hand @Html.TextBoxfor is a strongly type as this we use to bind with the ViewModel property.

Now we will add controller and add the below code in it.

  [HttpGet]
  public IActionResult Index()
  {
      return View();
  }
  [HttpPost]
  public IActionResult Index(UserModel userModel)
  {
      ViewBag.SelectedDate = userModel.DateOfBirth;
      return View();
  }

In above code I have added two IActionResult methods of Type HttpGet and HttpPost. Here method with HttpGet attribute will act as page load and method with HttpPost will execute on form post. In HttpPost method i have assigned the model class as parameter. and on Submit of the button control we will receive the selected value. Now we will create a view and add the below code in it.

@model UserModel
@{
    ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "formdata", @enctype = "multipart/form-data" }))
{
    <div class="text-center">
        <b>Select Date Time:</b>
        @Html.TextBoxFor(m => m.DateOfBirth, new { @class = "form-control", @type = "date" })
        <br />
        <input type="submit" value="Submit" />
        <br />   <br />
        <b>Your Selected Date: </b>@ViewBag.SelectedDate
    </div>
}

The above code I has added a model class named as UserModel. This model class is having a property as "DateOfBitrht". This property we will user to bind the viewmodel to the TextBoxFor control. To display the Calander control in TextBoxFor control i have passed an attribute @type="date". This will help to make a TextBoxFor control to Calander control without using jQuery in Asp.Net Core MVC. Now we have a Submit Button and a ViewBag to display the selected date. Now lets run the check the output.