我的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();
});

我已删除重复的文档准备检查。 尝试上面提供的代码。