导入具有两个HTML的相同html.Partial具有相同的ID

Question

我要在另一个cshtml中两次导入一个.cshtml文件。我为每个导入的局部视图设置了不同的ID，但是当我尝试单击ID元素时，它返回了相同的ID。

这是根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>
}

这是ColorAreas部分视图中具有onclick事件的众多元素之一：

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

这是我调用parentElement的javascript：

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>
}