Где я могу разместить этот код JavaScript?

Question

Я впервые использую пользовательский интерфейс jQuery и собираюсь создать элемент управления datetimepicker для поля DOB.

Вот как выглядит вид:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<StronglyTypedHelpers.Models.Person>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <script type="text/javascript">
        $('#date').datepicker();
    </script>    
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>

        <fieldset>
            <legend>Fields</legend>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Name) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Name) %>
                <%: Html.ValidationMessageFor(model => model.Name) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Age) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Age) %>
                <%: Html.ValidationMessageFor(model => model.Age) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.DOB) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.DOB, String.Format("{0:g}", Model.DOB)) %>
                <%: Html.ValidationMessageFor(model => model.DOB) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Married) %>
            </div>
            <div class="editor-field">
                <%: Html.CheckBoxFor(model => model.Married) %>
                <%: Html.ValidationMessageFor(model => model.Married) %>
            </div>

            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Теперь в документации пользовательского интерфейса написано, что нужно использовать этот код:

$('#date').datepicker();

Куда это поместить?

Вот ссылка на то, что я читаю:

http://learn.jquery.com/jquery-ui/getting-started/

Answer 1

Вы можете поместить его в конец документа, например так:

.
.
.
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#date').datepicker();
});
</script>
</body>
</html>

Или, если у вас есть jquery.js и jquery-ui.js, вызываемые в начале страницы, простодобавить

<script type="text/javascript">
$(document).ready(function() {
    $('#date').datepicker();
});
</script>

непосредственно перед тегом </body>

Answer 2

Вы не можете поместить Javascript в свой заголовок. Вы должны поместить это в свой контент

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    $(document).ready(function () {
       $('#date').datepicker();
    });
</script>

    <h2>Index</h2>
  ...

document.ready похож на старый javascript windows.onload, только document.ready запускается раньше и не ждет загрузки изображений:)

Answer 3

Это должно работать ... просто поместите это где угодно, у вас есть HTML

<script type="text/javascript">
$({
// put jquery code in here
});
</script>

да, проблема в том, что у вас нет декларации jquery ... вот почему вы делаете $({ })

Вы также можете сделать это, что является более универсальным способом:

<script type="text/javascript">
$(document).ready(
    function(){
        // jquery in here
});
</script>

это вы должны быть в состоянии поместить куда угодно, но это, вероятно, лучше всего в голове вашего HTML.