Question

我第一次使用jQuery UI，我将为DOB字段创建一个datetimepicker控件。

以下是视图的外观：

    <%@ 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>

现在UI文档说要使用此代码：

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

我把它放在哪里？

以下是我正在阅读的内容的链接：

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

Answer 1

这应该可行...只需将它放在任何有HTML的地方

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

是的，问题是你没有jquery声明......那就是你做$({ })的原因

你也可以这样做，这是更普遍的方式：

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

这个你应该可以放在任何地方，但它可能是最好的html。

Answer 2

您可以将它放在文档的末尾，如下所示：

.
.
.
<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 3

你不能把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更早启动，并且不等待图片加载：）

我在哪里放这个javascript代码？

3 个答案: