Site Loader
Get a Quote

TreeView using CSS in ASP.NET MVC:

TreeView using CSS in ASP.NET MVC: In this tutorial, I am going to explain you about how to create a TreeView using  Jquery in ASP.NET MVC.

TreeView

Let’s Create an example:

TreeView

Treeview CSS:

Right click on the Content folder and Create a CSS file and write the following code.

.css-treeview ul,
.css-treeview li
{
 padding: 0;
 margin: 0;
 list-style: none;
}
 
.css-treeview input
{
 position: absolute;
 opacity: 0;
}
 
.css-treeview
{
 font: normal 11px "Segoe UI", Arial, Sans-serif;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
}
 
.css-treeview a
{
 color: #00f;
 text-decoration: none;
}
 
.css-treeview a:hover
{
 text-decoration: underline;
}
 
.css-treeview input + label + ul
{
 margin: 0 0 0 22px;
}
 
.css-treeview input ~ ul
{
 display: none;
}
 
.css-treeview label,
.css-treeview label::before
{
 cursor: pointer;
}
 
.css-treeview input:disabled + label
{
 cursor: default;
 opacity: .6;
}
 
.css-treeview input:checked:not(:disabled) ~ ul
{
 display: block;
}
 
.css-treeview label,
.css-treeview label::before
{
 background: url("https://www.cssreflex.com/demos/icons.png") no-repeat;
}
 
.css-treeview label,
.css-treeview a,
.css-treeview label::before
{
 display: inline-block;
 height: 16px;
 line-height: 16px;
 vertical-align: middle;
}
 
.css-treeview label
{
 background-position: 18px 0;
}
 
.css-treeview label::before
{
 content: "";
 width: 16px;
 margin: 0 22px 0 0;
 vertical-align: middle;
 background-position: 0 -32px;
}
 
.css-treeview input:checked + label::before
{
 background-position: 0 -16px;
}
 
/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
 .css-treeview 
 {
 -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
 }
 
 @-webkit-keyframes webkit-adjacent-element-selector-bugfix 
 {
 from 
 { 
 padding: 0;
 } 
 to 
 { 
 padding: 0;
 }
 }
}

Navigate to Folder Views>Home and open Index.cshtml file and write the following the code:

@{
 ViewBag.Title = "Home Page";
 Layout = null;
}
<link href="~/Content/TreeView.css" rel="stylesheet" />
<div class="css-treeview">
 <ul>
 <li>
 <input type="checkbox" id="item-0" /><label for="item-0">Parent</label>
 <ul>
 <li>
 <input type="checkbox" id="item-0-0" /><label for="item-0-0">Child1</label>
 
 </li>
 <li>
 <input type="checkbox" id="item-0-1" /><label for="item-0-1">Child2</label>
 <ul>
 <li><a href="./">item1</a></li>
 
 </ul>
 </li>
 
 
 </ul>
 </li>
 <li>
 <input type="checkbox" id="item-1" checked="checked" /><label for="item-1">Parent3</label>
 <ul>
 <li>
 <input type="checkbox" id="item-1-0" /><label for="item-1-0">Child1</label>
 <ul>
 <li><a href="./">Item1</a></li>
 <li><a href="./">Item2</a></li>
 </ul>
 </li>
 
 </ul>
 </li>
 
 </ul>
</div>






You will get the output like this:

TreeView

Hope you enjoyed this session about TreeView using CSS in ASP.NET MVC.

Post Author: TechieFlair

Leave a Reply

Your email address will not be published.