从数据库列填充列表

Question

我目前正在开发一个 asp.net mvc 项目，该项目允许用户从日历中仅选择可用日期来预订特定服务。我目前有一个 Datepicker.cs 模型，它包含一个 DateTime Date 字段和一个 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(); 行。您需要调整视图的模型声明以匹配。

改变

@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 中，这应该会在您的日期选择器中启用正确的日期。显然，您需要处理边缘情况，例如表中没有行，或者其中一行中的日期为空。但这应该可以帮助您入门。

Answer 2

这里有一个关于如何做到这一点的想法。

首先创建一个返回List<DateTime>的方法 例子

 [HttpPost]
    public ActionResult GetDates()
    {

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

现在，当您创建 datepickider 时，您将需要此列表，例如 enableDays

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

// now create your DatePicker.

现在如果你想要一个 mvc modol 解决方案，你可以这样做。

创建一个包含日期的模型，并将其简单地转换为 json

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