C# .net 核心 - 嵌套 Div，在按钮按下加载时带有 ID，但在正常加载时工作。视图组件

Question

我的视图中有一个视图组件，加载一次后它可以正常工作。此视图是幻灯片的一部分，因此上面有按钮。当用户单击下一个按钮时，它会创建一个重复的外部 div 标记。

现在这两个 div 具有相同的 ID，我的 css 无法正常工作。

我一直在试图弄清楚为什么会发生这种情况并进行了很多更改，但我还没有运气修复它。

如有任何帮助，我们将不胜感激。

    Fileview.cshtml
@model MesserUI.ViewModels.LNPartVM
@await Component.InvokeAsync("DataPage")

DataPage.cshtml
@model MesserUI.ViewModels.LNPartVM
<div class="mx-auto contentblock">
    <a class="carousel-control-prev"  role="button" data-slide="prev" id="btnPrev">
        <span class="bg-secondary "><i class="fas fa-arrow-left carousel-icon"></i></span>
    </a>
  <div id="part" class="text-center mx-auto row justify-content-center"  >
      <img class="img-fluid mt-2" src='@ViewData["imagePath"]' />
    </div>

</div

DataPageViewComponent.cs
public class DataPageViewComponent : ViewComponent
    {
        private readonly ILogger<DataPageViewComponent> _logger;

        public DataPageViewComponent(ILogger<DataPageViewComponent> logger)
        {
            _logger = logger;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            if (TempData != null)
            {
                TempData.Keep();
            }

            List<LNPartVM> lstData = null;
        }
   }

单击下一个或上一个按钮后，这就是我得到的。但是在第一次加载时，我只得到一个 div id=part 和我的 img inside.

Answer 1

所以我明白了，我不得不重新格式化我的页面。

fileview.cshtml

<div class="mx-auto contentblock">
        <a class="carousel-control-prev"  role="button" data-slide="prev" id="btnPrev">
            <span class="bg-secondary "><i class="fas fa-arrow-left carousel-icon"></i></span>
        </a>
        <a class="carousel-control-next"  role="button" data-slide="next" id="btnNext">
            <span class="bg-secondary "><i class="fas fa-arrow-right carousel-icon"></i></span>
        </a>
        <div id="contentData" style="height:100%; width:100%;">
            @await Component.InvokeAsync("DataPage")    
        </div>    
    </div>

DataPage.cshtml

<div id="part" class="text-center mx-auto row justify-content-center"  >
  <img class="img-fluid mt-2" src='@ViewData["imagePath"]' />
</div>

DataPageViewComponent.cs

public async Task<IViewComponentResult> InvokeAsync()
        {
            if (TempData != null)
            {
                TempData.Keep();
            }

            List<LNPartVM> lstData = null;
                if (lstData?.Count > 0)
                {
                    TempData["SlideTotal"] = lstData.Count;
                    LNPartVM partVM = lstData[partIndex];
                    return View("DataPage", partVM);
                }
            return View("DataPage");
        }

C# .net 核心 - 嵌套 Div，在按钮按下加载时带有 ID，但在正常加载时工作。视图组件

C# .net core - Nested Div with ID on button press load, but works on normal load. ViewComponent

c#

asp.net-core

asp.net-core-viewcomponent