We Keep Coding

ASP.NET Hide/disable entire dropdown menu based on user role

I have a drop-down list in an ASP.NET webform application generated in the sitemaster menu using the follow ing code:
<li class="dropdown" id="Admin" > <a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin<span class="caret" ></span></a>
<ul class="dropdown-menu" >
<li><a runat="server" href="~/Admin/Members">Members Management</a></li>
<li ><a runat="server" href="~/Admin/MembersRegistry">Members Registry</a></li>
</ul>
</li>
and the script to generate the drop down is
<script>
$(document).ready(function () {
$(".dropdown").hover(function () {
//toggle the open class (on/off)
$(this).toggleClass("open");
});
})
</script>
I want to be able to hide or show the entire dropdown menu based on user roles:
protected void Page_Load(object sender, EventArgs e)
{
Admin.Visible = false;
if (System.Web.HttpContext.Current.User.Identity.IsAuthenticated)
{
var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>();
var signinManager = Context.GetOwinContext().GetUserManager<ApplicationSignInManager>();
var user = HttpContext.Current.User.Identity.GetUserId();
if (manager.IsInRole(user, "Admin"))
{
Admin.Visible = true;
}
}
}
But this is not working and the Admin control is not accessible from the code behind, any thoughts or suggestions please?

If you add a runat="server" tag to that, then your code behind should see/have use of that controls, and you code looks like it should work ok.
eg:
<li class="dropdown" id="Admin" runat="server">
.etc. etc.
</li>

Inserting items into bootstrap-dropdown from SQL Table

I am working on asp.net project and my code behind language is c#. I have one bootstrap dropdown in which i want to get the items from SQL Table. is there anyone who will help me in this regard. thanks in advance.
<li class="nav-item dropdown">
<a class="btn btn-light dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
Action, Another Action and Something else items should come from database (Category) Table. Using c# language on server side is much appreciable.

There are some ways to do it in WebForms, but first you need to make the DIV element of the dropdown menu accessible from the Code Behind.
See this snippet?
<ul class="nav nav-tabs">
<li class="nav-item dropdown">
<a class="btn btn-light dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category
</a>
<div id="myDropdownMenu" runat="server" class="dropdown-menu" aria-labelledby="navbarDropdown">
</div>
</li>
</ul>
Note that I added 2 attributes : id="myDropdownMenu" and runat="server".
After this you can go to Code Behind to start populating the menu from a data source.
At least there are 2 ways to do this, as far as I know.
By manipulating the InnerHtml property, like this :
private void DisplayMenuByConstructingHtmlTags(List<string> menuList)
{
var menuHtml = "";
foreach (string menuText in menuList)
{
menuHtml += "<a class=\"dropdown-item\" href=\"#\">" + menuText + "</a>\n";
}
myDropdownMenu.InnerHtml = menuHtml;
}
Or, by adding the menu as the child controls, like this :
private void DisplayMenuByAddingChildControls(List<string> menuList)
{
foreach (string menuText in menuList)
{
var linkMenu = new HyperLink() { CssClass = "dropdown-item", NavigateUrl = "#", Text = menuText };
myDropdownMenu.Controls.Add(linkMenu);
}
}
It's your call, which one to choose.
Btw, just to complete this example, you may try to call one of those methods from the Page_Load event, like this :
EDIT :
By your request, I've modified the samples by adding a connection to a table in a database. So, this is the module to load the data :
private List<string> LoadMenuFromTable()
{
string connectionString = ConfigurationManager.ConnectionStrings["YourConnectionStringName"].ToString();
var retVal = new List<string>();
using (var connection = new SqlConnection(connectionString))
{
using (var cmd = new SqlCommand("SELECT menu_text FROM Table_1", connection))
{
connection.Open();
using (var reader = cmd.ExecuteReader())
{
while (reader.Read())
{
retVal.Add((string)reader["menu_text"]);
}
}
}
}
return retVal;
}
And here's how you should call the module :
protected void Page_Load(object sender, EventArgs e)
{
var menu = LoadMenuFromTable();
DisplayMenuByAddingChildControls(menu);
// or DisplayMenuByConstructingHtmlTags(menu);
}
Oh, and remember to import these two libraries to make this sample works :
using System.Configuration;
using System.Data.SqlClient;
Hope it helps.

Hide <li> element if a scope value is null

I want to hide certain items in my list depending on whether a scope value is null.
This is my controller:
angular.module("umbraco").controller("my.custom.grideditorcontroller", function ($scope) {
$scope.control.heading;
$scope.control.punkt1 = null;
$scope.control.punkt2 = null;
$scope.control.punkt3 = null;
$scope.control.punkt4 = null;
$scope.control.punkt5 = null;
});
I have 5 li elements as well, that I want to show/hide depending on whether each of these scope properties has
This is one of my li elements:
<li ng-hide="control.punkt5 == null">#Model.punkt5</li>
This doesn't work, as the element is still being shown.
My properties use 2-way binding with my input elements:
<input type="text" ng-model="control.punkt1" placeholder="Indtast første punkt...">
But the input and the li elements are located in 2 separate HTML documents, since I am creating a grid editor for Umbraco.
This is my folder structure: https://i.imgur.com/ZbejcOl.png
Where the infobox.cshtml file contains the li elements, and the infobox.html file contains the input elements.
I tried using razoe code in my ng-hide/show condition, but that didn't return any boolean values. What is the correct way to approach this without using razor?
My render view (infobox.cshtml) receives a dynamic model of type JObject, but I can't use any of its methods in my ng-hide condition as it is c#. I've tried everything as mentioned in my previous post.
Edit:
<div ng-controller="my.custom.grideditorcontroller">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">#Model.heading</h4>
<ul class="ul-with-bullets">
<li ng-show="IsProperty(#Model,'punkt1')">#Model.punkt1</li>
<li ng-show="#Model.GetType().GetProperty("punkt2") != null">#Model.punkt2</li>
<li ng-show="#Model.GetType().GetProperty("punkt3") != null">#Model.punkt3</li>
<li ng-show="#Model.GetType().GetProperty("punkt4") != null">#Model.punkt4</li>
<li ng-hide="control.punkt5">#Model.punkt5</li>
</ul>
</div>
</div>
</div>

use this code
$scope.control={
punkt1:null,
punkt2:null,
punkt3:null,
punkt4:null,
punkt5:null
};
and now in your view you can check your control properties

Select an ID if it's a number?

Is there a way to select a list item from an aspx file from a .cs file to make the <li> visible. The ID for the <li> are numbers.
The reason why they are numbers is because this page is a custom view editor for the website, it is updating a database and then loads the correct view for the user. I need to hide some items for certain users on this page.
Snippet from aspx page:
<div id="connectedSortableLists">
<ul id="unselected" class="connectedSortable">
<li class="ui-state-highlight" id="0">Log #</li>
<li class="ui-state-highlight" id="19">Log date</li>
</ul>
</div
I've tried adding in runat="server" to various places however had no luck.
Is there a way to select like for a grid-view like : grdv_dummy.Columns[29].Visible = false; ?
I want to select the li by an ID to set the visibility to false to do it server side based on user. When the new custom view is saved, database will be updated with the id number. When I try with id="item" the desired page tries to load I get the error Input string was not in a correct format; due to the database having an entry of 'item'.
I feel as though i'm overlooking something although more likely completely wrong.
Thank you for your time

You will definitely need runat=server on your li elements (or ul element). Then you need to add letters to your ids - you can't have just numbers as an id. So something like "item". Then in you .cs file use something like:
private HtmlElement FindListItem(int id)
{
HtmlElement listItem = this.FindControl("item" + id.ToString()) as HtmlElement;
if (listItem != null && listItem.TagName == "li")
{
return listItem;
}
return null;
}
Basically FindControl() is what you need. Then you can use it like:
var item = FindListItem(19);
if (item != null)
{
item.Visible = false;
}
Oh an depending on how you've setup your code, you'll use it either in Page_Load or onPreRender...

you cannot directly access it in server side.However, you can call javascript function from server side which can enable\disable it.
At server side
string jsFunc = "DisableHtmlLi(" + iterator + ")";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "DisableHtmlLi", jsFunc, true);
At Client side
<script type="text/javascript" language="javascript">
function DisableHtmlLi(index) {
var element = document.getElementById(index);
element.visible= false;
}
</script>

Managed to find a way round the problem. I know that li shouldn't be put in other li , but it worked for me.
ASPX Altered
<div id="connectedSortableLists">
<ul id="unselected" class="connectedSortable">
<li class="ui-state-highlight" id="0">Log # </li>
<li class="ui-state-highlight" id="19">Log date</li>
<li runat="server" id="full" visible="false">
<li class="ui-state-highlight" id="32">Days Country</li>
<li class="ui-state-highlight" id="33">Days total</li>
</li>
</ul>
</div
.CS Page
full.Visible = true;

comparing the page's url to a's href

i am trying to do that when the page's url equals the <a>'s href than it will change something's class.
it does changes the page on a click on the link, but it doesnt change the class of the <li>
here is what i have done:
html:
<div id='settingNev' >
<ul >
<li id="L1" runat="server"><a id="A1" href="../newsFeed/allEr.aspx" runat="server"><span>Er</span></a></li>
<li id="L2" runat="server"><a id="A2" href="../newsFeed/allEe.aspx" runat="server"><span>Ee</span></a></li>
</ul>
</div>
code behind:
if (A1.HRef.ToString() == Request.Url.ToString())
{
L1.Attributes.Add("class", "active");
}
if (A2.HRef.ToString() == Request.Url.ToString())
{
L2.Attributes.Add("class", "active");
}
the class active works, i have checked it.
by the way this code is on a master page connected to both pages in the <div id='settingNev' >.
Tnx for the help :D

The problme is A1.HRef returns relative url. On the other hands, Request.Url returns absolute url.
In order to fix it, you want to use server control for hyper link, and resolve it back to absolute path.
<ul>
<li id="L1" runat="server">
<asp:HyperLink runat="server" ID="A1HyperLink"
NavigateUrl="~/newsFeed/allEr.aspx">
<span>Er</span>
</asp:HyperLink>
</li>
</ul>
string url = Request.Url.PathAndQuery;
string a1 = ResolveUrl(A1HyperLink.NavigateUrl);
if (string.Equals(a1, url, StringComparison.InvariantCulture))
{
L1.Attributes.Add("class", "active");
}
Another method
Resolve A1's relative path to absolute path using ResolveUrl
<div id='settingNev' >
<ul >
<li id="L1" runat="server"><a id="A1"
href="../newsFeed/allEr.aspx"
runat="server"><span>Er</span></a></li>
</ul>
</div>
string url = Request.Url.PathAndQuery;
string a1 = ResolveUrl(A1.HRef);
if (string.Equals(a1, url, StringComparison.InvariantCulture))
{
L1.Attributes.Add("class", "active");
}

You need to convert the relative url to absolute in order to compare with the page url.
For some odd reason, I couldn't find any Url helper that supports parent paths in URL so the only workaround I can think of is using Server.MapPath() for this:
string pagePath = Server.MapPath(Request.FilePath);
Dictionary<HtmlAnchor, Label> anchorMapping = new Dictionary<HtmlAnchor, Label>();
anchorMapping.Add(A1, L1);
anchorMapping.Add(A2, L2);
foreach (HtmlAnchor currentAnchor in anchorMapping.Keys)
{
if (Server.MapPath(currentAnchor.HRef).Equals(pagePath))
{
anchorMapping[currentAnchor].Attributes.Add("class", "active");
break;
}
}