Заполнение списка из столбца базы данных - PullRequest
0 голосов
/ 09 июля 2019

В настоящее время я работаю над проектом asp.net mvc, который позволяет пользователям выбирать только доступные даты из календаря, чтобы забронировать конкретную услугу.В настоящее время у меня есть модель Datepicker.cs, которая содержит поле DateTime Date и поле int Id, и у меня есть класс DbContext, который я использую для сохранения и получения этих данных

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

Я использую jQuery UI Datepicker намоя страница Create.cshtml, чтобы показать доступные даты для пользователей.В настоящее время в календаре показаны 2 доступные даты в жестком коде.

a busy cat

Теперь мой вопрос: возможно ли в рамках asp.net mvc заполнить этот массив в жестком коде (или даже список и т. Д.)?.) со всеми датами в столбце Date в Datepickers Db?т.е. мне нужен календарь для отображения всех доступных дат в базе данных

Любая помощь будет принята с благодарностью!

Моя модель 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>

Ответы [ 2 ]

2 голосов
/ 09 июля 2019

Тип вашей модели - Список, из-за строки 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, что должно включать правильные дни в вашем указателе даты. Очевидно, вам придется иметь дело с крайними случаями, такими как отсутствие строк в вашей таблице или дата, равная нулю в одной из строк. Но это должно начать вас.

0 голосов
/ 09 июля 2019

Вот идея, как вы могли бы это сделать.

Сначала создайте метод, который возвращает 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.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...