Model view controller MVC&；JQuery多视图多个JqueryUI元素

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

我有一个_layout.cshtml页面，它初始化了一组选项卡

我有一个视图，上面有一个jqueryUI日期选择器

视图将动态加载到选项卡中并显示，但如果我在选项卡上加载视图的后续实例，则日期选择器将仅填充日期选择器的第一个实例

我的问题是
1.MVC使用独立对象创建独立视图，其ID与视图上的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")

而PO函数包含

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

$.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);
                    }
                });
            });
        });
    }
});

---

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

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

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

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