c# – How do i fill the html field with date in asp.net mvc?

I am building a Todo list application

Model class Todo.cs is as below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace Todo_Application.Models
{
    public class Todo
    {
        [Display(Name ="Item Id")]
        [Required]
        public int ItemId { get; set; }
        [Display(Name ="Description")]
        [Required(ErrorMessage ="Description is required")]
        [StringLength(100,MinimumLength =10)]
        public string Description { get; set; }
        [Display(Name = "Start Date")]
        [Required(ErrorMessage ="Start date is required")]
        public DateTime StartDate { get; set; }
        [Display(Name = "End Date")]
        [Required(ErrorMessage ="End date is required")]
        public DateTime EndDate { get; set; }
        [Display(Name = "Status of completion")]
        public  Status StatusOfCompletion { get; set; }
       
        public class SortByStartDate : IComparer<Todo>
        {
            public int Compare(Todo x, Todo y)
            {
                return x.StartDate.CompareTo(y.StartDate);
            }
        }

        public class SortByEndDate:IComparer<Todo>
        {
            public int Compare(Todo x,Todo y)
            {
                return x.EndDate.CompareTo(y.EndDate);
            }
        }
    }
}

I have a home controller with index, add and edit as actions as below.

 public class HomeController : Controller
    {
        public static List<Todo> ListOfTodos = new List<Todo>()
        {
            new Todo()
            {
                ItemId=101,
                Description="Plan the module",
                StartDate=DateTime.Now,
                EndDate=DateTime.Now.AddDays(4),
                StatusOfCompletion=Status.YetToStart},
            new Todo()
            {
                ItemId=102,
                Description="Dry run the plan",
                StartDate=DateTime.Now.AddDays(3),
                EndDate=DateTime.Now.AddDays(5),
                StatusOfCompletion=Status.YetToStart
            }
        };
        public ActionResult Index()
        {
            return View(ListOfTodos);
        }
        static int max = 0;
        void maxid()
        {
            foreach (var v in ListOfTodos)
                max = Math.Max(max, v.ItemId);
        } 
        public ActionResult Add()
        {
            maxid();
            Session["id"]= max;
            return View();
        }
        [HttpPost]
        public ActionResult Add(Todo t)
        {
            //if(!ModelState.IsValidField("ItemId"))
            //{
            //    ModelState.AddModelError("ItemId", "invalid id");
            //}
            //if(string.IsNullOrEmpty(t.Description))
            //{
            //    ModelState.AddModelError("Description", "Description field is empty");
            //}
            //if (!ModelState.IsValidField("StartDate"))
            //    ModelState.AddModelError("StartDate", "invalid start date");
            //if (!ModelState.IsValidField("EndDate"))
            //    ModelState.AddModelError("EndDate", "invalid end date");
            //if (!ModelState.IsValidField("StatusOfCompletion"))
            //    ModelState.AddModelError("StatusOfCompletion", "invalid status");
            if(ModelState.IsValid)
            {
                ListOfTodos.Add
                return View("Index", ListOfTodos);
            }
            //ModelState.AddModelError("", "Invalid data");
            return View();

        }
        public ActionResult Delete(int id)
        {
            ListOfTodos.Remove(ListOfTodos.Find(m => m.ItemId == id));
            return View("Index",ListOfTodos);
        }
        public ActionResult Edit(int id)
        {
            Todo t = ListOfTodos.Find(m => m.ItemId == id);
            return View
        }
        [HttpPost]
        public ActionResult Edit(Todo t1)
        {
            if (ModelState.IsValid)
            {
                Todo t = ListOfTodos.Find(m => m.ItemId == t1.ItemId);
                t.ItemId = t1.ItemId;
                t.Description = t1.Description;
                t.StartDate = t1.StartDate;
                t.EndDate = t1.EndDate;
                t.StatusOfCompletion = t1.StatusOfCompletion;
                return View("Index", ListOfTodos);
            }
            return View();
            
        }
        [HttpPost]
        public ActionResult SortBy(string Sortby)
        {
            Todo t = new Todo();

            if (Sortby.Equals("Start Date"))
                ListOfTodos.Sort(new Todo.SortByStartDate());
            else if (Sortby.Equals("End Date"))
                ListOfTodos.Sort(new Todo.SortByEndDate());
            return View("Index", ListOfTodos);
        }
    }

And also the views as below: Index.cshtml

 @model IEnumerable<Todo_Application.Models.Todo>

@{
    ViewBag.Title = "Index";
    int count = 0;
}

<h2>List of todo items</h2>
<a href="/home/add" class="btn btn-primary">Add New Item</a>
<form method="post" action="/Home/SortBy">
    Sort By @Html.DropDownList("Sortby", new SelectList(new List<string>() { "Start Date", "End Date" }),
          new { htmlAttributes = new {@class = "form-control"}})
    <input type="submit" value="Go" class="btn btn-primary" />
</form>
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Serial No</th>
            <th>Item Id</th>
            <th>Description</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Completion Status</th>
        </tr>
    </thead>
    <tbody>
        @{ 
            foreach(var v in Model)
            {
                <tr>
                    <td>
                        @(count=count+1)
                    </td>
                    <td>
                        @v.ItemId
                    </td>
                    <td>
                        @v.Description
                    </td>
                    <td>
                        @v.StartDate.ToShortDateString()
                    </td>
                    <td>
                        @v.EndDate.ToShortDateString()
                    </td>
                    <td>
                        @v.StatusOfCompletion
                    </td>
                    <td>
                        @Html.ActionLink("edit", "Edit", new { id = v.ItemId })
                    </td>
                    <td>
                        @Html.ActionLink("delete", "Delete", new { id = v.ItemId })
                    </td>
                </tr>
            }
        }
    </tbody>
</table>

and Edit.cshtml as below

@model Todo_Application.Models.Todo

@{
    ViewBag.Title = "Edit";
}

<h2>Edit Item</h2>

@using (Html.BeginForm("Edit", "Home", FormMethod.Post))
{
    <div class="col-sm-3">
        <div class="form-group">
            @Html.EditorFor(m => m.ItemId,
           new { htmlAttributes = new {@class = "form-control",type="hidden"} })
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Description)
            @Html.EditorFor(m => m.Description,
           new { htmlAttributes = new { @class = "form-control"} })
            @Html.ValidationMessageFor(m=>m.Description)
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.StartDate)
            @Html.EditorFor(m => m.StartDate,
            new { htmlattributes = new { @class = "form-control datepicker",
                type="date" } })
            @Html.ValidationMessageFor(m=>m.StartDate)
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.EndDate)
            @Html.EditorFor(m => m.EndDate,
            new { htmlattributes = new { @class = "form-control datepicker", 
                type="date"} })
            @Html.ValidationMessageFor(m=>m.EndDate)
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.StatusOfCompletion)
            @Html.EnumDropDownListFor(m => m.StatusOfCompletion,
           new { htmlattributes = new { @class = "form-control" } })
        </div>
        <input type="submit" value="Update" class="btn btn-primary" />
    </div>
  }

index view just displays all the items. edit view is used to update the item details. The moment I click on the edit link, it takes me to edit view but does not populate the date fields. It populates description field. How to populate the date fields?

Updated: In the home controller, I defined the a list that has values ​​of type Todo. The startdate will be today’s date and time. When I displayed on the index page, I just wanna display date which I am able to do by using ToShortDateString(). Now when i click on edit, only the date should be populated and not time. Initially i used a textbox so it used to display both date and time. Later, I added datepicker class , now nothing gets populated instead the format dd/mm/yyyy is shown.

Leave a Comment