使用现有的HTML CSS在ASP.NET中创建菜单 [英] Use existing HTML CSS fro creating menus in ASP.NET
本文介绍了使用现有的HTML CSS在ASP.NET中创建菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
目前我的应用程序正在使用** ASP.net WebForms **和** Telerik **运行。现在，我正在管理仪表板。在仪表板内部有一个左侧菜单，可以展开或折叠。让我告诉你它的代码，
< div id =main-menuclass =main-menu collapse navbar-collapse>
< ul class =nav navbar-nav>
< li>
< a href =index.html> 信息中心< / a>
< / li>
< h3 class =menu-title> UI元素< / h3>
<！ - /.menu-title - >
< li class =menu-item-has-children dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown
aria-haspopup =truearia-expanded =false>
组件
< / a>
< ul class =子菜单儿童下拉菜单>
< li>
< a href =ui-buttons.html> Buttons< / a>
< / li>
< li>
< a href =ui-badges.html>徽章< / a>
< / li>
< li>
< a href =ui-tabs.html> Tabs< / a>
< / li>
< li>
< a href =ui-social-buttons.html>社交按钮< / a>
< / li>
< li>
< a href =ui-cards.html> Cards< / a>
< / li>
< li>
< a href =ui-alerts.html>提醒< / a>
< / li>
< li>
< a href =ui-progressbar.html>进度条< / a>
< / li>
< li>
< a href =ui-modals.html> Modals< / a>
< / li>
< li> < a href =ui-switches.html>切换< / a>< / li>
< li> < a href =ui-grids.html>网格< / a>< / li>
< li>
< a href =ui-typgraphy.html>排版< / a>
< / li>
< / ul>
< / li>
< li class =menu-item-has-children active dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false>
表
< / a>
< ul class =子菜单儿童下拉菜单>
< li> < a href =tables-basic.html>基本表< / a>< / li>
< li> < a href =tables-data.html>数据表< / a>< / li>
< / ul>
< / li>
< li class =menu-item-has-children dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false>
表格
< / a>
< ul class =子菜单儿童下拉菜单>
< li> < a href =forms-basic.html>基本表格< / a>< / li> ;
< li> < a href =forms-advanced.html>高级表单< / a>< / li> ;
< / ul>
< / li>
< h3 class =menu-title>图标< / h3>
<！ - /.menu-title - >
< li class =menu-item-has-children dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false> 图标< / a>
< ul class =子菜单儿童下拉菜单>
< li> < a href =font-fontawesome.html> Font Awesome< / a>< /立GT;
< li> < a href =font-themify.html> Themefy Icons< / a>< /李>
< / ul>
< / li>
< li>
< a href =widgets.html> 小部件< / a>
< / li>
< li class =menu-item-has-children dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false> 图表< / a>
< ul class =子菜单儿童下拉菜单>
< li> < a href =charts-chartjs.html> Chart JS< / a>< /立GT;
< li> < a href =charts-flot.html> Flot Chart< / a>< /立GT;
< li> < a href =charts-peity.html> Peity Chart< / a>< /立GT;
< / ul>
< / li>
< li class =menu-item-has-children dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false> 地图< / a>
< ul class =子菜单儿童下拉菜单>
< li> < a href =maps-gmap.html> Google Maps< / a>< /立GT;
< li> < a href =maps-vector.html>矢量地图< / a>< /立GT;
< / ul>
< / li>
< h3 class =menu-title> Extras< / h3>
<！ - /.menu-title - >
< li class =menu-item-has-children dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false> 页面< / a>
< ul class =子菜单儿童下拉菜单>
< li> < a href =page-login.html>登录< / a>< /李>
< li> < a href =page-register.html>注册< / a>< /李>
< li> < a href =pages-forget.html>忘记传递< / a>< /立GT;
< / ul>
< / li>
< / ul>
<％ - < telerik：RadPanelBar ID =rpb_menurunat =serverDataValueField =view_indexDataTextField =descriptionExpandMode =MultipleExpandedItemsDataFieldID =activity_id
DataFieldParentID =parent_idAllowCollapseAllItems =falseHeight =100％Width =100％EnableEmbeddedSkins =trueSkin =GlowBorderStyle =NoneBackColor =＃272C33OnItemDataBound =rpb_menu_ItemDataBound >
< / telerik：RadPanelBar> - ％>
< / div>
所以你可以看到有一些硬编码
< ul>
和
< li>
在那里，我需要替换它的内容，这些内容将从数据库中填充。
< table class =table table-bordered table-hover table-condensed>
< thead>
< tr>
< th title =Field＃1> activity_id< / th>
< th title =Field＃2> parent_id< / th>
< th title =Field＃3> description< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td> 29< / td>
< td> 34< / td>
< td>主题管理< / td>
< / tr>
< tr>
< td> 30< / td>
< td> 34< / td>
< td>主题管理< / td>
< / tr>
< tr>
< td> 31< / td>
< td> 34< / td>
< td>教学大纲管理< / td>
< / tr>
< tr>
< td> 34< / td>
< td> NULL< / td>
< td> LMS< / td>
< / tr>
< tr>
< td> 35< / td>
< td> 34< / td>
< td>问题管理< / td>
< / tr>
< tr>
< td> 36< / td>
< td> 34< / td>
< td>在线测试管理< / td>
< / tr>
< tr>
< td> 37< / td>
< td> 34< / td>
< td>给予在线测试< / td>
< / tr>
< / tbody>
< / table>
请运行代码段以查看将代替硬编码内容显示的内容，如下所示下面，
< li class =menu-item-has-children dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false> LMS（来自数据库）< / a>
< ul class =子菜单儿童下拉菜单>
< li> < a href =ui-buttons.html>主题管理（来自数据库）< / a> < /锂>
< li> < a href =ui-badges.html>主题管理（来自数据库）< / a> < /锂>
< / ul>
< / li>
这是我的要求。
a。我想使用exitsing html作为模板，并且该模板内的硬编码内容将从数据库中替换。我想知道如果有一个合适的控件可以满足我的要求吗？
如果没有那么我可以得到相同的使用循环吗？（如果没有什么适合那么这个唯一的选择）
我有什么尝试过：
我需要知道任何合适的控件
解决方案
ListView控制可能是最佳选择：
ListView类（System.Web.UI.WebControls）| Microsoft Docs [ ^ ]
Currently my application is running using **ASP.net WebForms** and **Telerik**. Right now, I am working in administration dashboard. Inside dashboard there is a left side menu which can be expanded or can be collapsed.Let me show you its code,
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Dashboard </a>
</li>
<h3 class="menu-title">UI elements</h3>
<!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Components
</a>
<ul class="sub-menu children dropdown-menu">
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-badges.html">Badges</a>
</li>
<li>
<a href="ui-tabs.html">Tabs</a>
</li>
<li>
<a href="ui-social-buttons.html">Social Buttons</a>
</li>
<li>
<a href="ui-cards.html">Cards</a>
</li>
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-progressbar.html">Progress Bars</a>
</li>
<li>
<a href="ui-modals.html">Modals</a>
</li>
<li><a href="ui-switches.html">Switches</a></li>
<li><a href="ui-grids.html">Grids</a></li>
<li>
<a href="ui-typgraphy.html">Typography</a>
</li>
</ul>
</li>
<li class="menu-item-has-children active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tables
</a>
<ul class="sub-menu children dropdown-menu">
<li><a href="tables-basic.html">Basic Table</a></li>
<li><a href="tables-data.html">Data Table</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Forms
</a>
<ul class="sub-menu children dropdown-menu">
<li><a href="forms-basic.html">Basic Form</a></li>
<li><a href="forms-advanced.html">Advanced Form</a></li>
</ul>
</li>
<h3 class="menu-title">Icons</h3>
<!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Icons</a>
<ul class="sub-menu children dropdown-menu">
<li><a href="font-fontawesome.html">Font Awesome</a></li>
<li><a href="font-themify.html">Themefy Icons</a></li>
</ul>
</li>
<li>
<a href="widgets.html">Widgets </a>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Charts</a>
<ul class="sub-menu children dropdown-menu">
<li><a href="charts-chartjs.html">Chart JS</a></li>
<li><a href="charts-flot.html">Flot Chart</a></li>
<li><a href="charts-peity.html">Peity Chart</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Maps</a>
<ul class="sub-menu children dropdown-menu">
<li><a href="maps-gmap.html">Google Maps</a></li>
<li><a href="maps-vector.html">Vector Maps</a></li>
</ul>
</li>
<h3 class="menu-title">Extras</h3>
<!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<ul class="sub-menu children dropdown-menu">
<li><a href="page-login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a href="pages-forget.html">Forget Pass</a></li>
</ul>
</li>
</ul>
<%--<telerik:RadPanelBar ID="rpb_menu" runat="server" DataValueField="view_index" DataTextField="description" ExpandMode="MultipleExpandedItems" DataFieldID="activity_id"
DataFieldParentID="parent_id" AllowCollapseAllItems="false" Height="100%" Width="100%" EnableEmbeddedSkins="true" Skin="Glow" BorderStyle="None" BackColor="#272C33" OnItemDataBound="rpb_menu_ItemDataBound">
</telerik:RadPanelBar>--%>
</div>
So as you could see there is some hard coded
<ul>
and
<li>
s out there and I need to replace it's content and those content will be populated from database.
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th title="Field #1">activity_id</th>
<th title="Field #2">parent_id</th>
<th title="Field #3">description</th>
</tr>
</thead>
<tbody>
<tr>
<td>29</td>
<td>34</td>
<td>Topic Management</td>
</tr>
<tr>
<td>30</td>
<td>34</td>
<td>Subject Management</td>
</tr>
<tr>
<td>31</td>
<td>34</td>
<td>Syllabus Management</td>
</tr>
<tr>
<td>34</td>
<td>NULL</td>
<td>LMS</td>
</tr>
<tr>
<td>35</td>
<td>34</td>
<td>Question Management</td>
</tr>
<tr>
<td>36</td>
<td>34</td>
<td>Online Test Management</td>
</tr>
<tr>
<td>37</td>
<td>34</td>
<td>Give Online Test</td>
</tr>
</tbody>
</table>
Please run snippet to view content which will be shown in place of hard coded content as shown below,
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">LMS(From database)</a>
<ul class="sub-menu children dropdown-menu">
<li><a href="ui-buttons.html">Topic Management (from database)</a></li>
<li><a href="ui-badges.html">Subject Management(From database)</a></li>
</ul>
</li>
here comes my requirement.
a. I want to use exitsing html as template and hard-coded content which are inside that template will get replaced from database.I wanna know If there is a suitable control which will fulfill my requirement?
If not then can I get the same using loop?(If nothing fits then this only option)
What I have tried:
I need to know any suitable control for this
解决方案
TheListViewcontrol is probably the best option:
ListView Class (System.Web.UI.WebControls) | Microsoft Docs[^]
这篇关于使用现有的HTML CSS在ASP.NET中创建菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
