如何在asp.netmvc中用日期填充html欄位？-有解無憂

我正在構建一個待辦事項串列應用程式

模型類 Todo.cs 如下

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);
            }
        }
    }
}

我有一個帶有索引的家庭控制器，添加和編輯如下操作。

 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(t);
                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(t);
        }
        [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);
        }
    }

還有如下視圖：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>

和 Edit.cshtml 如下

@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>
  }

索引視圖只顯示所有專案。編輯視圖用于更新專案詳細資訊。當我點擊編輯鏈接時，我需要編輯視圖，但不會填充日期欄位。它填充描述欄位。如何填充日期欄位？

更新：在家庭控制器中，我定義了一個具有 Todo 型別值的串列。startdate 將是今天的日期和時間。當我在索引頁面上顯示時，我只想顯示可以使用 ToShortDateString() 執行的日期。現在，當我單擊編輯時，只應填充日期而不是時間。最初我使用了一個文本框，所以它用來顯示日期和時間。后來，我添加了 datepicker 類，現在什么都沒有填充，而是顯示格式 dd/mm/yyyy。

uj5u.com熱心網友回復：

如果要顯示默認日期時間，同時可以選擇日期時間，razor 不支持。如果你想date 在這種情況下加載編輯頁面時顯示它應該是 string在這種情況下它的型別，它將類似于文本框。如果你想要那樣， date picker我認為在這種情況下，我們應該text將date picker. 這是您可能想要實施的作業演示。

模型：

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 = "Text To Date Picker")]
        public Nullable<DateTime> TestDate { get; set; }
        
    }

看法：

 @model DotNet6MVCWebApp.Models.Todo

@{
    ViewBag.Title = "Edit";
}

<h2>Edit Item</h2>

@using (Html.BeginForm("Edit", "Todo", 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.TestDate)
            @Html.TextBoxFor(model => model.TestDate, "{0:d/M/yyyy}",new { id="textTodate", @class = "form-control", type = "text" })
        </div>
        <input type="submit" value="Update" class="btn btn-primary" />
    </div>
}

腳本：

@section scripts {
<script>
        $(document).ready(function () {

            $("#textTodate").click(function (e) {
               $("#textTodate").prop('type','date');
            });
        
    });

</script>
    }

注意：這是使用現有的date. 當用戶單擊它進行修改時，我通過單擊將其更改textbox為date pickerevent

輸出：

如何在 asp.net mvc 中用日期填充 html 欄位？

希望上述步驟能相應地指導您。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/490232.html

標籤：C＃网 asp.net 核心 asp.net-mvc-4

上一篇：Azure-應用程式因堆疊緩沖區溢位例外 HTTP502錯誤而崩潰

下一篇：不能有一個帶有尖角的div而是把它變成圓角