如何在 ascx 文件中的不同 div 中显示相同的用户控件以实现响应?

How to show the same user control in different divs in a ascx file for responsiveness?

我有一个库中的控件在我的其他用户控件 .ascx 文件中注册,我想在代码的不同位置根据屏幕大小动态显示它。

RadMenu1 是有问题的控件,我没有该控件的原始代码,我无法找到一种方法来根据屏幕大小使用 JavaScript 来显示和隐藏它为了使其响应。我可以创建控件的副本,但我不想为此创建一个新控件。

这是来自 Telerik.Web.UI 库的控件。

谢谢。

<%@ Control Language="vb" AutoEventWireup="false" Inherits="Aptify.Framework.Web.eBusiness.NavBar"
    CodeFile="navbarNew.ascx.vb" %>
<%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="cc1" Namespace="Aptify.Framework.Web.eBusiness" Assembly="AptifyEBusinessUser" %>

<nav class="navbar navbar-light p-0 d-md-none">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="flex-md-column flex-lg-row collapse navbar-collapse text-md-center" id="navbarTogglerDemo03" style="min-width: 200px;">
        <rad:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu1_click" RenderMode="Lightweight" Flow="Vertical"></rad:RadMenu>
    </div>
</nav>

<rad:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu1_click" RenderMode="Lightweight"></rad:RadMenu>
<cc1:User ID="User1" runat="server" />

我知道两个控件不能有相同的ID,因此上面的代码给出了一个错误,指出已经有另一个控件与RadMenu1具有相同的ID。

只需像这样更改每个控件的 ID

<rad:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu1_click" RenderMode="Lightweight"></rad:RadMenu>

<rad:RadMenu ID="RadMenu2" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu2_click" RenderMode="Lightweight"></rad:RadMenu>

<rad:RadMenu ID="RadMenu3" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu3_click" RenderMode="Lightweight"></rad:RadMenu>