0

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

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

如果我在我的 CheckOut 视图上注释掉内联 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>

结帐查看 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>
4

1 回答 1

0

我自己想通了。

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

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

这个文件已经在我的 Razor Shared/_Layout.cshtml 'master page' 中被引用。

我不知道为什么这种双重参考会导致日期时间选择器不起作用，但我很想听听任何人对此的想法。

于 2012-05-01T01:53:06.097 回答