Импортируйте один и тот же HTML с двумя Html.Partial с одинаковым идентификатором

Question

Я импортирую один файл .cshtml дважды в другой файл cshtml.Я настраивал разные идентификаторы для каждого импортированного частичного представления, но когда я пытался получить элемент, кликнувший по идентификатору, он возвращал тот же идентификатор.

Это часть корневого cshtml, где я вызываю частичное представление:

<div class="row g-mt-20">
    <div class="col-lg-5 text-lg-center">
        <div class="form-group">
            @Html.Partial("ColorPicker", "bgColorPicker")
        </div>
    </div>
    <div class="col-lg-2">
        <div id="colorPreview" class="g-px-5 g-py-5" style="background-color:@Model.ApplicationUser.EventBackgroundColorHex;color:@Model.ApplicationUser.EventForegroundColorHex">
            Lorem Ipsum is simply dummy text of the printing and type setting industry.
        </div>
    </div>
    <div class="col-lg-5 text-lg-center">
        <div class="form-group">
            @Html.Partial("ColorPicker", "frColorPicker")
        </div>
    </div>
</div>

Вот это частичное представление:

@model string

<img style='margin-right:2px;' src='~/images/img_colormap.gif' usemap='#colormap' alt='colormap' /> 

@if(Model == "bgColorPicker") {
    <map id='bgColorPicker' name='colormap'>
    @await Html.PartialAsync("ColorAreas")
    </map>
} else if (Model == "frColorPicker") {
    <map id='frColorPicker' name='colormap'>
    @await Html.PartialAsync("ColorAreas")
    </map>
} else {
    <map id='colormap' name='colormap'>
    @await Html.PartialAsync("ColorAreas")
    </map>
}

Вот один из многих элементов с событием onclick из частичного представления ColorAreas:

<area style='cursor:pointer' shape='poly' coords='180,15,189,19,189,30,180,34,171,30,171,19' onclick='clickColor("#333399", event)' alt='#333399' />

Вот JavaScript, где я вызываю parentElement:

function clickColor(hex, e) {
    var colorPreview = document.getElementById("colorPreview");
    var colorPicker = e.target.parentElement.id;
    console.log(colorPicker);
}

console.log (colorPicker) каждый раз возвращает «bgColorPicker».

А здесь генерируется HTML из браузера

...
<map id="bgColorPicker" name="colormap">...</map>
...
<map id="frColorPicker" name="colormap">...</map>
...

Экран из браузера Chrome:

Answer 1

Я сделал демо, чтобы воспроизвести проблему. После непрерывного тестирования я наконец обнаружил, что проблема существует на карте между изображением и областью. Поскольку значения map-name между bgColorPicker и frColorPicker равны colormap, щелчком по умолчанию является область в разделе bgColorPicker, если щелкнуть область в другом разделе.

Таким образом, вы можете изменить частичное представление ColorPicker, как показано ниже: Различные разделы имеют разные названия карт изображения

@model string
@if (Model == "bgColorPicker")
{
  <img style='margin-right:2px;' src='~/images/img_colormap.gif' usemap='#bgcolormap' alt='colormap' />

   <map id='bgColorPicker' name='bgcolormap'>
      @await Html.PartialAsync("ColorAreas")
   </map>
}

else if (Model == "frColorPicker")
{
   <img style='margin-right:2px;' src='~/images/img_colormap.gif' usemap='#frcolormap' alt='colormap' />

   <map id='frColorPicker' name='frcolormap'>
      @await Html.PartialAsync("ColorAreas")
   </map>
}

else
{
   <img style='margin-right:2px;' src='~/images/img_colormap.gif' usemap='#colormap' alt='colormap' />

   <map id='colormap' name='colormap'>
      @await Html.PartialAsync("ColorAreas")
   </map>
}