MVC4 Eonasdan Bootstrap 3 Date Time picker doesn´t

2019-03-01 12:59发布

站内问答 / JavaScript
1351 2 5

I´m using a Bootstrap 3 date AND time picker linked here:

DateTime Picker for Bootstrap 3

I can´t make the picking window open. When you click on the textbox, nothing happens and no messages are shown on browser Console (Chrome). So, in truth, the control is working as a simple textbox, not as a DateTime picker.

Here is my code:

_Layout file included in all views:

    <!DOCTYPE html>
<html lang="pt">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />

    <title>TestApp</title>

    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="~/favicon.ico" type="image/ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="screen">
    <link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
    <link href="@Url.Content("~/Content/CustomNavBar.css")" rel="stylesheet" media="screen">
</head>

<body>

    <script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>

    <.... some other stuff here...>

Index.cshtml used on that page:

<link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">

<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>


<div class="container">
    <div class="col-md-10">
        <div class='well'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

I appreciate any help to make this work...

Thanks for any help...

2条回答
We Are One
2楼-- · 2019-03-01 13:17

Your layout can be cleaned up a bit, since MVC4 no longer requires @Url.Content() for virtual paths. You probably also want to look into how the bundling system works. For certain, what you're trying to do will probably work better with sections:

_Layout.cshtml:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TestApp</title>
        <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
        <link rel="icon" href="~/favicon.ico" type="image/ico" />

        <link href="~/Content/bootstrap.css" rel="stylesheet" media="screen" />
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
        <link href="~/Content/CustomNavBar.css" rel="stylesheet" media="screen" />

        @RenderSection("head", required: false)
    </head>

    <body>

        @RenderBody()

        <script src="~/Scripts/jquery-2.0.3.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>

        @RenderSection("scripts", required: false)
    </body>
</html>

Index.cshtml:

@section head
{
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" type="text" />
}

@section scripts
{
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
    <script>
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
}

<div class="container">
    <div class="col-md-10">
        <div class='well'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Using sections lets the view engine inject things like <script> or <link /> tags into the correct parts of the layout. Anything not in a section is injected wherever @RenderBody() occurs in the layout.

If you want a more concrete example, go straight to the source: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2019-03-01 13:21

In this two scripts of your Index.cshtml.

<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

You didn't use @UrlContent(). Run your project, and look in the generated html source code, if the browser can find this js files. Or look any error in the Network tab of your browser developer tools.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)