How to use Property of my model inside javascript in a cshtml file

I have a .NET Framework 4.8 App and i have to build a datepicker in javascript using a List which is my model in my cshtml file.

@{
    ViewBag.Title = "Index";
}

@model WebParetoMVCNEW.Models.Data.Csv.CsvData

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container mt-5">
    <div class="row">
        <form method="post" enctype="multipart/form-data" 
            action="@Url.Action("UploadFile", "LieferPerformance")">
            <div class="mb-3">
                <label for="csvFile" class="form-label">CSV Datei auswählen</label>
                <input type="file" class="form-control" id="csvFile" name="csvFile">
            </div>
            <button type="submit" class="btn btn-primary">Hochladen und 
                Auslesen</button>
        </form>
    </div>
</div>

<div class="container mt-3">
    <div class="row">
        <div class="col-md-6">
            <input type="text" id="my_date_picker1">
            <button id="datepicker-button">Open Datepicker</button>
        </div>
    </div>
</div>


<script>
    $(document).ready(function () {
        // Serialize the list from the model as JSON within the script block
        var headerListData = @Html.Raw(Json.Serialize(Model.YourListPropertyName));


        // Get the current date
        var currentDate = new Date();

        // Configure the Datepicker using jQuery UI and set the default date to today
        $("#my_date_picker1").datepicker({
            dateFormat: 'yy-mm-dd',
            defaultDate: currentDate,  // Set the default date to today
            beforeShowDay: function (date) {
            var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
            if (headerList && headerList.indexOf(formattedDate) >= 0) {
                return [true, "av", 'Available'];
            } else {
                return [false, "notav", "Not Available"];
            }
        }
    });

    $("#datepicker-button").on("click", function () {
        $("#my_date_picker1").datepicker("show");
    });
});

This seems not to work inside javascript:

var headerListData = @Html.Raw(Json.Serialize(Model.Header));

Errormessage: The name ‘Html’ does not exist in the current context

Like described in Accessing MVC’s model property from Javascript
it doesnt work

anyone an idea?

Leave a Comment