I have the css layout: One column fixed width layout, from maxdesign.com
I have two menu items defined like the following:
<div id="navigation">
<ul>
<li>Data Entry</li>
<li>Reports</li>
</ul>
</div>
Now, let's say that I have two roles: guest and operator, and I want that for example if a user with role guest is logged in, then just the Report item from the menu appear, and in case of a user operator is logged in, then both options appear.
How can I accomplish that?
EDIT:
Based on your responses, I'll go with the server side logic to deal with this:
<div id="navigation">
<ul>
<li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
<li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>
</ul>
</div>
Thanks!
You can put this in the Page_Load..
Dim cs As ClientScriptManager = Page.ClientScript
If Not cs.IsClientScriptBlockRegistered(Me.GetType(), "RoleVariable") Then
Dim js As New String
js = "var _role = " & role & ";"
cs.RegisterStartupScript(Me.GetType(), "RoleVariable", js, True)
End If
And from there, you will have the role in the Javascript realm, where you can manipulate the visibility of the items you want.
So...
<script type="text/javascript">
function hideStuff() {
if (_role === "operator") {
// hide/show your elements here
}
else if (_role === "guest") {
// hide/show your elements here
}
}
</script>
Keep in mind that this approach is all client-side and is therefore easy for another developer to manipulate if they really wanted to. But on the other hand, it's the simplest. Don't use this approach for high-security situations.
You could give your menu elements an ID attribute and then in your codebehind either use RegisterClientSideScriptBlock or use Response.Write to send JavaScript to the client to hide (or show) elements based on some condition.
how about something simple like?
<% if(Page.User.IsInRole("operator") || Page.User.IsInRole("guest")) { %>
<div id="navigation">
<ul>
<% if(Page.User.IsInRole("operator")) { %>
<li>Data Entry</li>
<% } %>
<li>Reports</li>
</ul>
</div>
<% } %>
I don't 100% think you can (or should) be doing logic operations with stylesheets. You may need to have some javascript and then decide based on guest or operator which style to display
Related
I moved my site to another hosting, but the language menu <a> tags between the content of the database does not print between the label. But inside the href parameter it draws the same query.
When I examined the output of the code:
Output code picture
Below is my code in that line:
<ul class="headerLanguage"><li><%=Session("lang")%><img alt="" title="" src="/images/icon/08.png" /><ul><%
Set a = SQL.Execute("SELECT kisa FROM diller WHERE kisa<>'"& Session("lang") &"'")
Do while not a.Eof %><li><%=a("kisa")%></li><% a.MoveNext:Loop
a.Close
Set a = Nothing %></ul></li></ul>
When I delete the query inside the href parameter, the other query runs and the content is appearing.
My application is Classic ASP, but I did not have a problem with my old site, why was this so? How can I solve?
I'm grateful for your help.
I've encountered this problem before. I'm not sure exactly why it happens (hopefully someone else can explain), but sometimes if you reference data directly from a recordset multiple times it can return an empty value. The solution that worked for me was to assign the data to a variable first and reference the variable instead. Try this:
<ul class="headerLanguage">
<li>
<a href="/?lang=<%=Session("lang")%>"><%=Session("lang")%>
<img alt="" title="" src="/images/icon/08.png" />
</a>
<ul><%
Dim a, kisa
Set a = SQL.Execute("SELECT kisa FROM diller WHERE kisa<>'"& Session("lang") &"'")
Do while not a.Eof
kisa = a("kisa") %>
<li><%=kisa%></li><%
a.MoveNext:Loop
a.Close
Set a = Nothing
%></ul>
</li>
</ul>
I have the following code right now to write a flat list of items with a link to a controller action:
<ul>
#foreach (var item in items)
{
<li>
<a asp-controller="Home" asp-action="Demo" asp-route-itemName="#item.Name">
#item.Name
</a>
</li>
}
</ul>
Now this must become recursive. Items can also contain subitems. For recursion I need some sort of function. I know I could use #functions and define the function in the .cshtml file. Not sure whether such nice inline HTML code with tag helpers would still be allowed there, it didn't seem so. Another option is HTML helpers in a .cs file, no inline HTML here for sure. #helper doesn't seem to be available anymore.
What other options do I have to define a function and keep the inline HTML syntax that Razor offers?
Put the code for rendering a comment inside a partial view, and render it with a call to #Html.Partial("comment", comment).
Then within that comment partial view you'd have something like
#model Comment
Title: #Model.Title
Message: #Model.Message
#if (Model.ChildComments.Any())
{
<ul>
#foreach (var childComment in Model.ChildComments)
{
<li>
#Html.Partial("comment", childComment)
</li>
}
</ul>
}
This will render each comment, plus all its children (if any), recursively.
The event fires only when I remove the each blocks. What the event does is apply a vertical accordion slide down transition on an element. What I want to do is add the same slide down transition to all my documents when they are displayed in my views.
Right now, when I add an each block to iterate through my collection and display all the documents from my collection, the slide down event stops working.
Here's my template:
<template name="auctionsList">
<div class="container">
<div id='cssmenu'>
<ul>
{{#each auctions}}
{{>auction}}
{{/each}}
</ul>
</div> <!-- end cssmenu -->
</div><!-- end container -->
{{#if isReady}}
{{#if hasMoreauctions}}
<a class="load-more btn btn-default center-block text-uppercase" id="loadMore" href="#" style="margin-top:10px;">Load More</a>
{{/if}}
{{else}}
<div class="loading">{{>spinner}}</div>
{{/if}}
</template>
<template name="auction">
<li class='has-sub'>
<a href='#'>
<div class="auction-image">
<img src="brand_logos/DominosPizza.png" class="img-responsive" height="200" width="200">
</div>
{{> durationLeft}}
</a>
<ul>
<li><a href='#'>
<span>Sub Product</span></a></li>
</ul>
</li>
</template>
Here's my rendered/helper
Template.auctionsList.rendered = function () {
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
}
Template.auctionsList.helpers({
auctions: function () {
return Template.instance().userauctions();
}
});
Template.auctionsList.events({
'click #cssmenu li.has-sub>a' : function(event, template) {
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
}
});
You should move this from rendered to events. $('#cssmenu li.has-sub>a').on('click', function(){ }
Put the event within the auction template where your <li> tag exists.
Updated
Couple of things based on the gists you published:
1) you should try not use script tags directly in the template - i havent seen this often if at all. Move all this code to
Template.accordion.rendered = function(){ //here };
or better make it work in auctionsList because then its not duplicated x times for every each iteration.
But what would be even better is not to have the 'on' event at all. You should use a meteor event... like you mentioned in your earlier post. Meteor events have access to 'this' which is the current context item.
I would try put it in a template event on the master auctionsList template and later on worry about how it will work with the sub templates.
2) I dont think you need to add everything into another template like you have, the accordion template doesnt really need to exist, you can probably get away with putting it in the auction template (consider using even auctions to do the click event because if you do it that way your js snippet wont be repeated x times per post listing.You only need this once..
3) When you create the li in the auction template give it an ID at that point
<li id={{new accordion code in auction template}}>
You can then reference this id on your template click event. If you are new to meteor do yourself a favor and do the following in a click event to better understand what is going on (you will most likely find the ID you need within one of the values - most likely this:
Template.YourTemplate.events({
'click any button in your each': function(event,bl,value)
{
console.log(event);
console.log(bl);
console.log(value);
//and most importantly
console.log(this);
}
});
I know its not "an answer" but i hope it leads you in the right direction.
I'm having a problem and i'm really puzzled by it.
My markup is simple enough:
#foreach (var item in Model.Items)
{
<a class="mapIconUnit" id="pinDelete-#item.PinGuid.ToString()">
#Url.Action("DeletePin") <!-- testing purposes -->
#(Ajax.ActionLink("x", "DeletePin", MapAdministrationController.Routes.DeletePin(item.PinGuid), new AjaxOptions()
{
OnSuccess = "onMapPinDeleted",
Confirm = Resources.Resource.msg_GenericDeleteConfirmationQuestion
}
))
</a>
}
Now what i would expect to render from this is:
<a class="mapIconUnit" id="...">
... rendered url
<a href="..." etc>x</a>
</a>
But what i am getting is:
<a class="mapIconUnit" id="...">
... rendered url
</a>
<a href="..." etc>x</a>
What am i doing wrong here? The markup is too simple for it to be wrong to cause such a thing?
It's illegal to nest an anchor element inside another anchor element, more info can be found in the W3C specs: http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
So either razor or the webbrowser renders the elements correctly (i.e. place them next to each other).
I have anchor tags like this
<div id="menu_container">
<ul id="nav-bar">
<li>Home</li>
<li><a href="Account.aspx" runat="server" id="menu_item_account" >Account</a></li>
<li>Servers</li>
<li>Statistics</li>
<li>Tutorials</li>
<li>Contact us</li>
<div id="login_registration_container">
Sign in / Register
</div>
</ul>
</div>
I want to change the CSS class for menu_item_default this way:
WebControl wc = (WebControl)FindControl("#menu_item_default");
wc.Attributes.Add("class", "value");
error: null reference exception
How can this be done?
You shouldn't use '#' symbol in the FindControl argument:
WebControl wc = (WebControl)FindControl("menu_item_default");
Using a MasterPage and the element is in a ContentPlaceholder:
If so then you must retrieve the ContentPlaceholder first, and from it retrive the element you want.
If your page has the following Content-area for example:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
Then you would do the following (error handling omitted):
var mainCtrl = Master.FindControl("MainContent");
var anchor = (HtmlAnchor) mainCtrl.FindControl("menu_item_default");
anchor.Attributes.Add("class", "value");
Using a MasterPage and the element is in the MasterPage:
use:
var anchor = (HtmlAnchor) Master.FindControl("menu_item_default");
Is there a particular reason you are using a regular anchor tag? Why not use an ASP.Net LinkButton? That will make it much easier to reference in the code.
If the control is on the master page, try
Master.FindControl()