MVC& JQuery多视图多个JqueryUI元素

时间:2011-07-11 16:08:39

标签: model-view-controller jquery-ui-datepicker

关于mvc JqueryUI框架的一个简单问题,

我有一个_layout.cshtml页面,用于初始化一组标签

我的视图上有一个jqueryUI日期选择器。

将View动态加载到选项卡中并显示,但如果我在选项卡上加载View的后续实例,则datepicker将仅填充datepicker的第一个实例。

我的问题是这个 1. MVC使用独立的对象来创建具有与视图相同的ID的独立视图 2. JQueryUI使用具有唯一ID的XML Dom来创建其基础对象

那么这些应该如何协同工作呢? 我的观点如下

    <div class="PoCreate">
            <div id="pnlProject">
                <fieldset>
                    <legend>Project</legend>
                    <label for="ProjectNo">
                        Project #:
                    </label>
                    <input type="text" name="ProjectNo" id="ProjectNo" />
                    <input type="button" name="btnProjectNo" id="btnProjectNo" data-linked-search="@Url.Action("Project", "SearchObj")"
                        value=".." />
                </fieldset>
            </div>
        </div>
        @Url.Script("~/scripts/PageScripts/_PoIndex.js")

脚本文件包含

$('.PoCreate').PoCreate({});

并且PO函数包含

$.fn.extend({
    PoCreate: function (opt)
    {
        $(this).each(function ()
        {
            var _self = $(this.parentNode),
            _opts = {}, tabIdContext = $(this.parentNode).attr('id');
            $.extend(_opts, (opt || {}));

            $('.date', _self).each(function ()
            {
                $(this).attr('id', tabIdContext + '-' + $(this).attr('id'));
                $(this).datepicker(Globals.Dates).keypress(function (e) { return false; });
            })

            $(':button').button().filter('[data-linked-search]').click(function (e)
            {
                $.extendedAjax({ url: $(this).attr('data-linked-search'),
                    success: function (response)
                    {
                        $('#dialog-form').find('#dialog-search').html(response).dialog(Globals.Dialogs);
                    }
                });
            });
        });
    }
});

1 个答案:

答案 0 :(得分:0)

我找到了解决这个问题的方法,

在创建JQuery小部件时,我必须重命名DatePicker字段的ID,以使其对于创建的选项卡是唯一的。

所以我的TabId = ui-tab-01 和DatePickerId = DatePicker1

重命名DatePickerId,使其现在为ui-tab-01-DatePicker1