從數據庫列填充列表

Question

我目前正在研究一個asp.net mvc項目，該項目允許用戶從日歷中僅選擇可用日期以預訂特定服務。 我目前有一個Datepicker.cs模型，該模型包含一個DateTime日期字段和一個int Id字段，並且我有一個DbContext類，用於持久化和檢索此數據

namespace Calendar.Models
{
  public class CalendarDb : DbContext
  {
    public DbSet<Datepicker> Dates { get; set; }
  }
}

我在Create.cshtml頁面上使用jQuery UI Datepicker向用戶顯示可用日期。 當前，日歷顯示2個硬編碼的可用日期。

現在我的問題是，是否有可能在asp.net mvc框架中用Datepickers Db的Date列中的所有日期填充此硬編碼數組（甚至列表等）？ 即我需要日歷以顯示數據庫中所有可用的日期

任何幫助將不勝感激！

我的Datepicker模型：

namespace Calendar.Models
{
  public class Datepicker
  {
    public DateTime DtmDate { get; set; }
    public int Id { get; set; }
    public int UserId { get; set; }
  }
}

視圖的控制器：

    [HttpGet]
    public ActionResult Create()
    {
       var model = _db.Dates.ToList();
       return View(model);
    }

我的Create.cshtml視圖如下：

@model Calendar.Models.Datepicker

@{
ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
    <h4>Datepicker</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.DtmDate, htmlAttributes: new { @class 
= "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DtmDate, new { htmlAttributes = 
new { @class = "form-control1" } })
            @Html.ValidationMessageFor(model => model.DtmDate, "", new { 
@class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.UserId, htmlAttributes: new { @class = 
"control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.UserId, new { htmlAttributes = 
new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.UserId, "", new { 
@class = "text-danger" })
         </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />

@section scripts {
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script>
    jQuery(function(){
        var enableDays = ["11-07-2019", "12-07-2019"];

        function enableAllTheseDays(date) {
            var sdate = $.datepicker.formatDate('dd-mm-yy', date)
            console.log(sdate)
            if ($.inArray(sdate, enableDays) != -1) {
                return [true];
            }
            return [false];
        }

        $(".form-control1").datepicker({
            dateFormat: "dd/MM/yy",
            beforeShowDay: enableAllTheseDays

        });
    });

</script>

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

<style>
.my-class a {
     background-color: #07ea69 !important;
     background-image :none !important;
     color: #ffffff !important;
}
</style>

Answer 1

由於行var model = _db.Dates.ToList();因此您的模型類型為List var model = _db.Dates.ToList(); 在您的控制器中。 您需要調整視圖的Model聲明以使其匹配。

更改

@model Calendar.Models.Datepicker

至

@model List<Calendar.Models.Datepicker>

現在您的模型類型正確，您可以將日期嵌入到JavaScript中。 我們需要使用Linq選擇日期，並將其轉換為JS期望的正確字符串格式，然后使用一些字符串方法將它們連接在一起。 更改此：

var enableDays = ["11-07-2019", "12-07-2019"];

至

var enableDays = [' @Html.Raw(string.Join("','", Model.Select(d => d.DtmDate.ToString("MM-dd-yyyy"))) '];

然后全部運行。 在呈現的HTML中，您應該看到很好地嵌入到JavaScript中的數據庫中的日期，這應該在datepicker中啟用正確的日期。 顯然，您需要處理一些極端情況，例如表中沒有行，或者其中一行中的日期為null。 但這應該可以幫助您入門。

Answer 2

這是您如何做的一個想法。

首先創建一個返回List<DateTime>示例的方法

 [HttpPost]
    public ActionResult GetDates()
    {

        return Json(CalendarDb.Dates.Select(x=> x.DtmDate.ToString("dd-MM-yyyy")));
    }

現在，當您創建日期選擇器時，您將需要此列表，例如enableDays

var enableDays = [];
 $.ajax({
  url: "/GetDates",
  method: "POST" ,// post or get
  async: false,
  success:function(dates){ enableDays =dates; }
});

// now create your DatePicker.

現在，如果您要使用mvc modol解決方案，可以這樣做。

創建一個包含日期的modol，然后簡單地將其轉換為json

enableDays  =@Html.Raw(Json.Encode(modol.Dates.ToString("dd-MM-yyyy")))
// now create your DatePicker.