下拉日历不工作 MVC答案

【问题标题】：Drop Down Calendar not working MVC下拉日历不工作 MVC
【发布时间】：2018-01-20 00:51:37
【问题描述】：

当单击输入文本框时，我正在创建一个下拉日历。我一直在尝试以此为模型（https://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm）。我已经使用 NuGet 包管理器安装了 jQuery UI。虽然除了<script> src=... 之外，您会看到没有其他导入到 jquery 的过程。有人可以帮我解决这个问题吗？

整个 Test.cshtml 文件

@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>
<div>
<!-- Javascript -->
<script>
     $(function() {
        $( "#datepicker-1" ).datepicker();
     });
</script>

  <!-- HTML -->
  <p>Enter Date: <input type="text" id="datepicker-1"></p>
</div>

编辑 1： 该网站正在 Intranet 网络上部署。

这是 Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    @using System.Security.Principal
    @using CalcPayment_WebApp.Models.ViewModels
    @using CalcPayment_WebApp.Models.DataBase
    @using System.Linq

    <meta charset="UTF-8">
    <meta name="google" content="notranslate">
    <meta http-equiv="Content-Language" content="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - Some Company</title>
    <link rel="stylesheet" type="text/css" href="~/Content/StyleSheet.css">


    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @{
                WindowsIdentity identity = HttpContext.Current.Request.LogonUserIdentity;
                CheckIdentity(identity);
                if (Session["isSysAdmin"] == null || (bool)Session["isSysAdmin"] != true)
                {
                    //show stuff
                }
            }

            @Html.ActionLink("Some Company", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                @{

                    if (Session["isSysAdmin"] != null && (bool) Session["isSysAdmin"] == true)
                    {
                        <li>@Html.ActionLink("Customers", "Index", "Customers")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    }
                    else
                    {
                        <li>@Html.ActionLink("Some Company", "Details", "Customers", new { id = Session["UserCID"] }, null)</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    }
                }


            </ul>
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - Some Company</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)


<!--Found at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table Used for sorting tables-->
<script>
function sortTable(column,targetTable) {
    var table, rows, switching, i, x, y, shouldSwitch;
    table = document.getElementById(targetTable);
    switching = true;
    /*Make a loop that will continue until
    no switching has been done:*/
    while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = table.getElementsByTagName("TR");
        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 1; i < (rows.length - 1); i++) {
            //start by saying there should be no switching:
            shouldSwitch = false;
            /*Get the two elements you want to compare,
            one from current row and one from the next:*/
            x = rows[i].getElementsByTagName("TD")[column];
            y = rows[i + 1].getElementsByTagName("TD")[column];
            //check if the two rows should switch place:
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                //if so, mark as a switch and break the loop:
                shouldSwitch = true;
                break;
            }
        }
        if (shouldSwitch) {
            /*If a switch has been marked, make the switch
            and mark that a switch has been done:*/
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }
}
</script>
@functions {
    public void CheckIdentity(WindowsIdentity identity)
    {
        //Check user identity
    }
}

</body>
</html>

【问题讨论】：

这段代码运行良好。你在使用布局页面吗？你能在控制台中看到任何错误吗？
如果您无法发布重现错误的代码，那么我们将无能为力。上面的代码确实有效。我的猜测是您的布局视图中有更多可能会造成麻烦的东西。在您的 _ViewStart.cshtml 中尝试 @{ Layout = null; }
我看到 jQuery 被添加了两次，一次是在布局中，一次是在视图中。
看起来您可能添加了两次 jquery（一次在您的视图中，一次通过 jquery MVC 包）。也可能是 jqueryUI，具体取决于您的捆绑包包含的内容。重复的 jQuery 实例总是导致问题的根源，而且完全是多余的。
@Scripts.Render("~/bundles/jquery")。检查您的 bundleconfig.cs 文件以确切了解该捆绑包中包含的内容。

标签： jquery model-view-controller jquery-ui-datepicker

【解决方案1】：

因此，在查看 (How to add jQueryUI library in MVC 5 project?) 之后，我能够将 jquery ui 添加到正确的位置并使其正常工作。感谢大家的帮助！

【讨论】：