无法在mvc razor 5中添加jquery时间选择器

我试图在mvc5 razor视图中的文本框控件TimeFrom和Timeto模型属性中添加一个时间选择器，为其提供一个选择器类。我使用jquery时间选择器并为它们添加了引用

//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js //cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css 但它没有显示任何东西

我的代码如下：

    @model MLMS.Library.Models.SaveLibraryUnit

    @{
      Layout = null;
    var dropDownListHelper = new MLMS.Services.Common.DropDownListHelper();
}

<fieldset>
    <legend>Unit Information</legend>

    <div class="row input-gap">
        <div class="five columns">
            @Html.LabelFor(model => model.UNIT_NAME, new { @class = "" })
            @Html.TextBoxFor(model => model.UNIT_NAME, new { @class = "u-full-width" })
            @Html.ValidationMessageFor(model => model.UNIT_NAME)
        </div>
    </div>
    <div class="row input-gap">
        <div class="three columns">
            @Html.LabelFor(model => model.VEHICLEID, new { @class = "" })
            @Html.DropDownListFor(model => model.VEHICLEID, dropDownListHelper.GetUnassignedVehicle((Model == null ? 0 : Model.VEHICLEID ?? 0)), "select", new { @class = "u-full-width" })
            @Html.ValidationMessageFor(model => model.VEHICLEID)
        </div>
        <div class="two columns">
            @Html.LabelFor(model => model.DATE_DEPLOYED, new { @class = "" })
            @Html.TextBoxFor(model => model.DATE_DEPLOYED, "{0:MM/dd/yyyy}", new { @class = "u-full-width datepicker" })
            @Html.ValidationMessageFor(model => model.DATE_DEPLOYED)
        </div>
    </div>
    @if (Model != null && Model.UNITID != 0)
    {
        <div class="row">
            <div class="three columns">
                @Html.LabelFor(model => model.STATUS, new { @class = "" })
                @Html.DropDownListFor(model => model.STATUS, MLMS.Common.UtilityHelper.ActiveInactiveStatus(@Model.StatusEnum), new { @class = "u-full-width" })
                @Html.ValidationMessageFor(model => model.STATUS)
            </div>
        </div>
    }
</fieldset>

<fieldset>
    <legend>Unit Details</legend>
    <a href="javascript:;" id="add-spot" class="button button-primary">Add Spot</a>

    <div id="spot-details">
        <table class="table">
            <thead class="hide">
                <tr>
                    <th>SL</th>
                    <th>Spot Name </th>
                    <th>Schedule Day </th>
                    <th>Schedule Time From</th>
                    <th>Schedule Time To </th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                @if (Model != null && Model.Spots.Any())
                {
                    for (int i = 0; i < Model.Spots.Count(); i++)
                    {
                        <tr data-id="@i">
                            <td> @(i + 1) </td>
                            <td>
                                @Model.Spots[i].SpotName
                                @Html.HiddenFor(model => model.Spots[i].SpotId, new { @class = "unit-spot-id" })
                            </td>
                            <td>
                                @Html.DropDownListFor(model => model.Spots[i].Day,
                         MLMS.Common.UtilityHelper.EnumSelectListTextFieldSelected(MLMS.Common.UtilityHelper.ParseEnum<DayOfWeek>(String.IsNullOrEmpty(Model.Spots[i].Day) ? "Friday" : Model.Spots[i].Day)),
                                                       "select", new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.Spots[i].Day)

                            </td>
                            <td>

                                @Html.TextBoxFor(model => model.Spots[i].TimeFrom, new { @class = @"timepicker" })
                                @Html.ValidationMessageFor(model => model.Spots[i].TimeFrom)
                            </td>
                            <td class="timepicker">
                                @Html.TextBoxFor(model => model.Spots[i].TimeTo, new { @class = @"timepicker" })
                                @Html.ValidationMessageFor(model => model.Spots[i].TimeTo)
                            </td>
                            <td>
                                <a class="button small button-danger" title="Remove" href="#" onclick="RemoveSpot(this); return false;">
                                    <i class="fa fa-close"></i>
                                </a>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>

</fieldset>

<script type="text/javascript">

    $(function () {
        $('.timepicker').timepicker({
            timeFormat: 'h:mm p',
            interval: 60,
            minTime: '10',
            maxTime: '6:00pm',
            defaultTime: '11',
            startTime: '10:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });
    });


</script>

---

使用此插件，它看起来更好：

---

您是否处于调试模式？您还没有在上面的代码中包括必需的和依赖的JavaScript和css。您还包括jquery吗？如果浏览器控制台中出现任何错误怎么办？我添加了jquery和依赖js@阿米特，是的，我处于调试模式。控制台中没有错误。@star101-您已经添加了，但它没有显示上面代码中添加或引用的内容。您还包括了js和css的最小版本。在项目构建过程中是否包含相同的内容或进行缩小和捆绑？如果是这样，那么您需要调试js文件和css版本？所有的参考都在_layout.cshtml中。这不是答案。我想解决这个问题，为什么你为时间控制和td提供了相同的类，基本上是尝试改变td上的类