Question

我在Views / Shared / EditorTemplates中有一个DateTime.cshtml模板，它使用TimePicker Addon来实现一个jQuery DateTime选择器。这一直很好......直到......

我最近在我的CheckOut页面添加了一些内联jQuery来处理从购物车中删除项目，这导致在编辑日期/时间时不再出现jQuery DateTime选择器。模板的MVC日期格式化部分（见下文）仍在应用，但是关于内联jQuery的一些东西与模板jQuery的搭配并不好。

如果我在CheckOut View上注释掉内联jQuery，那么当我点击编辑日期/时间字段时，DateTime选择器就会出现。

任何人都可以看到我的内联jQuery的哪一部分与模板jQuery冲突？

DateTime.cshtml模板

    @model Nullable<System.DateTime> 

@if ( Model.HasValue ) { 
   @Html.TextBox( "" , String.Format( "{0:dd/MM/yy HH:mm tt}" , Model.Value ) , new { @class = "textbox" , @style = "width:200px;" } ) 
} 
else { 
   @Html.TextBox("", String.Format("{0:dd/MM/yy HH:mm tt}", DateTime.Now), new { @class = "textbox", @style = "width:200px;" }) 
} 

@{ 
string name = ViewData.TemplateInfo.HtmlFieldPrefix; 
string id = name.Replace( ".", "_" ); 
} 
<script type="text/javascript">
    $(document).ready(function () {
        $("#@id").datetimepicker
            ({
                dateFormat: 'dd/mm/yy',
                showStatus: true,
                showWeeks: true,
                highlightWeek: true,
                numberOfMonths: 1,
                showAnim: "scale",
                ampm: true,
                hour: 12,
                minute: 0,
                stepMinute: 5,
                hourMin: 6,
                hourMax: 16,
                showOptions: {
                    origin: ["top", "left"]
                }
            });
    }); 
</script>

CheckOut查看jQuery

    <script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");
            if (recordToDelete != '') {
                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteID).fadeOut('slow');
                        } else {
                            $('#item-count-' + data.DeleteID).text(data.ItemCount);
                        }
                        //Hide the 'Checkout' button if there is no items in the cart.
                        if (data.CartTotal == 0) {
                            $('#checkout-button').fadeOut('slow');
                        }
                        $('#cart-total').text(data.CartTotal);
                        $('#update-message').text(data.Message);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');
                    });
            }
        });
    });
</script>

相关生成的HTML

    <div class="editor-label">
        <label for="Order_PickUpDateTime">Pick up Date and Time</label>
    </div>
    <div class="editor-field">

<input class="textbox" data-val="true" data-val-required="Pick up date and time is required" id="Order_PickUpDateTime" name="Order.PickUpDateTime" style="width:200px;" type="text" value="30/04/12 16:38 PM" /> 
<script type="text/javascript">
$(document).ready(function () {
    $("#Order_PickUpDateTime").datetimepicker
        ({
            dateFormat: 'dd/mm/yy',
            showStatus: true,
            showWeeks: true,
            highlightWeek: true,
            numberOfMonths: 1,
            showAnim: "scale",
            ampm: true,
            hour: 12,
            minute: 0,
            stepMinute: 5,
            hourMin: 6,
            hourMax: 16,
            showOptions: {
                origin: ["top", "left"]
            }
        });
}); 
</script>

        <span class="field-validation-valid" data-valmsg-for="Order.PickUpDateTime" data-valmsg-replace="true"></span>
    </div>

Answer 1

自己想出来。

我从页面顶部删除了以下jQuery引用，并且我的日期/时间选择器再次开始工作：

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

此文件已在我的Razor Shared / _Layout.cshtml'母版页'中被引用。

我不知道为什么这个双重引用会导致日期时间选择器不起作用，但我很乐意听到任何人的想法。

为什么我的jQuery内联代码阻止了MVC3 DateTime Editor Template中的jQuery代码

1 个答案: