MVC 3, повторное использование частичного представления и jquery, без конфликта с DOM

Поскольку я все еще новичок в MVC 3 и jquery, я хотел бы узнать лучшее практическое решение, как решить следующую проблему:

У меня есть представление, где я используйте jquery ajax для получения и отображения частичного представления с некоторыми деталями продукта для продукта A. Загруженное частичное представление состоит из набора кода html и jquery, который привязан к определенным идентификаторам в частичном представлении.

Таким образом, i хотел бы повторно использовать одно и то же частичное представление, чтобы отображать сведения о других продуктах в том же представлении (например, отображать сведения о продукте B во всплывающем диалоговом окне). Всякий раз, когда отображается всплывающее окно, только что полученное частичное представление будет конфликтовать с частичным представлением для продукта A, так как те же идентификаторы используются в HTML.

Есть ли способ инкапсулировать html и javascript в частичном представлении и повторно использовать его на нескольких страницах, не беспокоясь о конфликтах с идентификаторами и прочим?

Надеюсь, мой вопрос имеет смысл. Спасибо,

/ Нима

ОБНОВЛЕНО

Вот некоторый псевдокод, описывающий мою проблему:

ПРОСМОТР

<script type="text/javascript">
$(document).ready(function () {

    $('.productItems').click(function () {
        var input = { productId: $(this).attr('data-productID') };
        var url = url = '<%: Url.Content("~/ProductDetails/ShowProductDetails") %>';


        // Show the modal box with product details
        $('#dialogBox').dialog({
            title: $(this).attr('data-productTitle')
        });


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


<div id="detailsArea">
    <% Html.RenderPartial("ProductDetails", Model.Product); %>
</div>

<div id="productLinks">
  <span class="productItems" data-productID="123">Product B</a>
</div>

<div id="dialogBox" style="display: none;"></div>

Контроллер -> Действие (ShowProductDetails)

public ActionResult ShowProductDetails(int productId)
{
  // Get product from db. and return the partial view

  return PartialView("ProductDetails", p);
}

Частичное представление (ProductDetails)

<script type="text/javascript">

   function SetProductTabContent(selectedTab) {
        $("#productDescriptionContent > div").css('display', 'none');

        switch (selectedTab) {

            case '#tab-1':
                $('#productDescriptionText').css('display', 'block');
                break;

            case '#tab-2':
                $('#productSpecificationText').css('display', 'block');
                break;   
        }


$(document).ready(function () {
    // Get all the menu items
    var menuItems = $("#productMenu a");

    // 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'));

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


<div id="productMenu" style="">
    <a href="#tab-1">
        <div class="menuItemHeader">Menu1</div>
    </a>
    <a href="#tab-2">
        <div class="menuItemHeader">Menu2 </div>
    </a>
</div>


<div id="productDescriptionContent">

        <div id="productDescriptionText" style="display: none;">
            <%: Model.Product.Description %>
        </div>
        <div id="productSpecificationText" style="display: none;">
            <%: Model.Product.Description2%>
        </div>
</div>

ПРОБЛЕМА Когда частичное представление дважды загружается в DOM, блоки div конфликтуют.