MVC 3, повторное использование частичных представлений и jquery, не противоречив DOM

Ответ 1

Да. Как вы указали, не используйте идентификаторы и идентификаторы в вашем JavaScript. Вместо этого используйте селектор классов:

Например, на ваш взгляд разметка:

<div class="container">Partial View content</div>

JS:

var $div = $('div.container');
// do something

Чтобы исключить возможность выбора других тегов с тем же именем класса, назначьте программное имя элементам в частичном представлении, которое используется только как дескриптор селектора, а не как класс CSS.

В то время как поиск по ID основан на лучшей производительности, в этом случае имеет смысл искать поиск по методу [tag + class], чтобы избежать конфликтов идентификаторов. Поиск по методу [tag + class] довольно близок к селекторам id с точки зрения производительности.

Кроме того, вы можете добиться дальнейшего улучшения, ограничив область поиска:

<div class="container">Partial View content <span class="child">Child content </span></div>

var $span = $(span.child')  // scope of lookup here is entire document

Однако, если вы знаете, что child находится внутри контейнера div, вы можете ограничить область, говоря:

var $div = $('div.container').children('span.child'); // or just '.child'

Другим советом является однократное выполнение поиска и его повторное использование:

// less performant
function doSomething() {

    // do something here
    $('div.container').css('color', 'red');

    // do other things
    $('div.container').find('.child');

   // do more things
    $('div.container').click(function() {...});
}


// better
function doSomething() {
    var $div = $('div.container');

    // do something here
    $div.css('color', 'red');

    // do other things
    $div.find('.child');

   // do more things
    $div.click(function() {...});

   // or chaining them when appropriate
   $('div.container').css('color', 'red').click(function() { ... });


}

Обновление: Рефакторинг сообщения OP для демонстрации концепции:

<script type="text/javascript">

       function SetProductTabContent(selectedTab, ctx) {
            var $container = $("div.pv_productDescriptionContent", ctx);

            // this will find only the immediate child (as you had shown with '>' selector)
            $container.children('div').css('display', 'none');  

            switch (selectedTab) {

                case '#tab-1':
                    $('div.pv_productDescriptionText', $container).css('display', 'block');
                    // or $container.children('div.pv_productDescriptionText').css('display', 'block');
                    break;

                case '#tab-2':
                    $('div.pv_productSpecificationText', $container).css('display', 'block');
                    // or $container.children('div.pv_productSpecificationText').css('display', 'block');
                    break;   
            }


    function SetUpMenuItems(ctx) {
        // Get all the menu items within the passed in context (parent element)
        var menuItems = $("div.pv_productMenu a", ctx);

        // Select the first tab as default
        menuItems.first().addClass("menuItemActive");

        // Handle the look of the tabs, when user selects one. 
        menuItems.click(function () {

            var item = $(this);

            // Get content for the selected tab
            SetProductTabContent(item.attr('href'), ctx);

            menuItems.removeClass("menuItemActive");
            item.addClass("menuItemActive");
            return false;
        });
    }
    </script>


<div style="" class="pv_productMenu">
    <a href="#tab-1">
        <div class="menuItemHeader">
            Menu1</div>
    </a><a href="#tab-2">
        <div class="menuItemHeader">
            Menu2
        </div>
    </a>
</div>
<div class="pv_productDescriptionContent">
    <div class="pv_productDescriptionText" style="display: none;">
        <%: Model.Product.Description %>
    </div>
    <div class="pv_productSpecificationText" style="display: none;">
        <%: Model.Product.Description2%>
    </div>
</div>

Примечание. Я удалил оболочку document.ready, так как это не будет срабатывать при загрузке частичного представления. Вместо этого я реорганизовал ваш View JS, чтобы вызвать функцию настройки, а также передать в область действия (что позволит избежать выбора других div с тем же классом):

// Fetch content in the background
$.get(url, input, function (result, response) {
       $('#dialogBox').html(result);
       SetUpMenuItems($('#dialogBox'));   
});

Очевидно, что вы можете изменить это дальше, как вы сочтете подходящим в своем приложении, то, что я показал, является идеей, а не окончательным решением.

• Если вы снова загрузите #dialog, они перезапишут существующую разметку, поэтому не будет дубликатов.
• Если вы снова загрузите частичный вид в другом контейнере, вы можете передать это как контекст и который не позволит вам получить доступ к children #dialog
• Я применил этот произвольный префикс pv_ для программных дескрипторов классов. Таким образом, вы можете сказать, глядя на имя класса, если оно предназначено для CSS или для использования в вашем script.

Ответ 2

Простейший способ сделать это, сделать идентификаторы продуктов как часть тегов html ids

что-то вроде этого

<input type="text" id="txt_<%=Model.ID%>"> 

если вы используете Razor

<input type="text" id="[email protected]"> 

Ответ 3

Я удивлен, что это не возникало чаще. Я думаю, что большинство разработчиков не создают свои собственные элементы управления с частичными. Вот что я пришел с этим, работает очень хорошо и не так сложно реализовать в MVC4.

Сначала я попытался передать динамическую модель частичной, и это не сработало. (грустное лицо) Затем я пошел на типизированный маршрут частичного просмотра. Я создал коллекцию объектов, называемых шагами (потому что создайте мастер управления).

public class WizardStep
{
    public string Id { get; set; }
    public string Class { get; set; }
}

public class WizardSteps
{

    public WizardSteps()
    {
        Steps = new List<WizardStep>();
        Steps.Add(new WizardStep() {Id = "Step1"});
        Steps.Add(new WizardStep() { Id = "Step2" });
        Steps.Add(new WizardStep() { Id = "Step3" });
        Steps.Add(new WizardStep() { Id = "Step4" });
        Steps.Add(new WizardStep() { Id = "Step5" });

    }
    public List<WizardStep> Steps { get; set; }

}

Код бритвы выглядит следующим образом:

@Html.Partial("_WizardButtonPanel", @Model.WizardSteps.Steps.First())

или

@Html.Partial("_WizardButtonPanel", @Model.WizardSteps.Steps.Skip(1).First() )

или

@Html.Partial("_WizardButtonPanel", @Model.WizardSteps.Steps.Skip(2).First())

и более

@Html.Partial("_WizardButtonPanel",@Model.WizardSteps.Steps.Skip(3).First())

Частичный вид выглядит примерно так:

@model SomeProject.Models.WizardStep
<div id="[email protected]" >
<a id="[email protected]" >Somelinke</a>
</div>

Счастливое кодирование...