我的JavaScript無法在我的視圖asp.net中使用

Question

我在剃刀視圖中的JavaScript遇到一些小問題。 我希望用戶報告缺席，但是當他選擇時間時，我希望顯示日期時間糾察器，因此用戶不必手動輸入日期。

我也希望它是兩個不同的選項卡，第一個選項卡是用戶將報告其假期的地方，另一個選項卡是他將看到較早假期的報告。 但是現在一切都出現了。 我想要類似以下內容：

但是現在“Begärdsemstrar”正坐在“Begärsemester”之下

這是我對JavaScript的看法

@using Salesweb.Common.Utilities
@model List<Salesweb.Common.Vacation>
@{
    ViewBag.Title = "Semester";
}

<script type="text/javascript" language="javascript">
    $(function () {
        $(function () {
            $('#fromDate').datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-mm-dd",
                firstDay: 1,
                onSelect: function (dateText) {
                    $('#EndDate').datepicker('option', 'minDate', new Date(dateText));
                }
            });

            $('#toDate').datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-mm-dd",
                firstDay: 1,
                onSelect: function (dateText) {
                    $('#EndDate').datepicker('option', 'minDate', new Date(dateText));
                }
            });

        });
    });

    $(function () {
        $("#tabs").tabs();
    });
</script>
<div class="page-container">
    <div class="page-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="tabs">
                        <div class="portlet light">
                            <ul>
                                <li><a href="#tabs-new">Begär semester</a></li>
                                <li><a href="#tabs-list">Begärda semestrar</a></li>
                            </ul>

                            <div id="tabs-new">
                                @if (ViewData["posted"] == null)
                                {
                                    using (Html.BeginForm("Index", "Vacation", FormMethod.Post, new { enctype = "multipart/form-data" }))
                                    {
                                        <div class="portlet light">
                                            <div class="portlet-title">
                                                <div class="caption">
                                                    <span class="caption-subject font-green-sharp bold uppercase">Semester</span>
                                                </div>
                                            </div>
                                            <div class="portlet-body">
                                                <table class="table table-striped table-bordered table-hover">
                                                    <tr>
                                                        <td>Från:</td>
                                                        <td><input type="text" id="fromDate" name="fromDate" style="width: 70px" /></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Till:</td>
                                                        <td><input type="text" id="toDate" name="toDate" style="width: 70px" /></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Kommentar:</td>
                                                        <td><textarea id="comment" name="comment" style="width: 300px; height: 70px;" rows="5" cols="5"></textarea></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td><input type="submit" value="Begär semester" id="submit" name="submit" /></td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    }

                                }
                                else
                                {
                                    <h2 style="color: Green"> Semestern begärd.</h2>
                                    @Html.ActionLink("Begär ny semester", "Index")
                                }
                            </div>

                            <div id="tabs-list">
                                <div class="portlet light">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-green-sharp bold uppercase">Semester</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <table class="table table-striped table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Från</th>
                                                    <th>Till</th>
                                                    <th>Rapportera tid</th>
                                                    <th>Status</th>
                                                    <th>Kommentar</th>
                                                </tr>
                                            </thead>
                                            @foreach (var vacation in Model)
                                            {
                                                <tr>
                                                    <td>@(vacation.StartDate.ToShortDateString())</td>
                                                    <td>@(vacation.EndDate.ToShortDateString())</td>
                                                    <td>
                                                        @if (vacation.TimeReported)
                                                        {
                                                            <a>Tid har rapporterats</a>
                                                        }
                                                        else if (vacation.Status == (int)VacationStatus.Godkänd && !vacation.TimeReported)
                                                        {
                                                            <a href="@(Url.Action("Absent", "Reports", new { vacationId = vacation.VacationID }))">Rapportera tid</a>
                                                        }
                                                        else
                                                        {
                                                            <a>-</a>
                                                        }
                                                    </td>
                                                    <td>@(((VacationStatus)vacation.Status).ToString()) </td>
                                                    <td>@vacation.Comment</td>
                                                </tr>
                                            }
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我將腳本打包裝入

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-2.8.3",
                    "~/content/global/plugins/jquery.min.js",
                    "~/content/global/plugins/jquery-ui/jquery-ui.min.js",
                    "~/content/global/plugins/bootstrap/js/bootstrap.min.js",
                    "~/content/global/plugins/datatables/media/js/jquery.dataTables.min.js",
                    "~/content/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.js",
                    "~/content/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js",
                    "~/content/global/scripts/metronic.js",
                    "~/content/admin/layout3/scripts/layout.js",
                    "~/content/admin/layout3/scripts/demo.js",
                    "~/content/admin/pages/scripts/table-advanced.js"
                    ));

而且比從我的_Layout.cshtml中加載這樣的腳本更重要。

 @Scripts.Render("~/bundles/modernizr")

Answer 1

您的jQuery文檔就緒函數有點凌亂/嵌套

$(function () {
    $('#fromDate').datepicker({
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy-mm-dd",
        firstDay: 1,
        onSelect: function (dateText) {
            $('#EndDate').datepicker('option', 'minDate', new Date(dateText));
        }
    });

    $('#toDate').datepicker({
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy-mm-dd",
        firstDay: 1,
        onSelect: function (dateText) {
            $('#EndDate').datepicker('option', 'minDate', new Date(dateText));
        }
    });
    $("#tabs").tabs();
});

我已刪除重復的文檔准備檢查。 嘗試上面提供的代碼。