I'm trying to create a way of moving "chapters" around. My problem is that I can't get my head around to how. If any of you guys have an idea or example of how you've done it, it would be great.
I was thinking something like a list. Where you can drag or click "chapters" around.
like this:
Chapter A
Chapter A.a
Chapter A.a.a
Chapter A.a.b
Chapter A.b
Chapter B
Chapter B.b
Chapter C
The thing is, if I just have a button for moving up and down, then I would need additional buttons for when moving to a chapter from A to C.
PS: The project is in .cshtml.
Edit: each child-chapter has a value which holds the id of its parent. When moving around this id will change, and then be saved when the user i happy with the current order.
I would suggest having a re-usable, sorting widget to simply order elements around, and then have 3 (in this case): one for the chapters, one for the sections and one for the sub-sections. You can show and hide the corresponding widget based on what's currently selected.
Furthermore, you can show each item as an accordion (again, one for chapters, one for sections, etc.). By default you can reorder the chapters. Once you select one, you can view and reorder its sections, and once you select a section... well, you get the idea.
Hope it helps!
jQuery UI has a great widget for this called 'sortable'. Here is a working jsfiddle that does what I think you are looking for. Use the sortable and connected lists examples.
<ul class="sortable">
<li class="ui-state-default">Chapter 1</li>
<li class="ui-state-default">Chapter 2</li>
<li class="ui-state-default">Chapter 3
<ul class="sortable">
<li class="ui-state-default">Chapter 3a</li>
<li class="ui-state-default">Chapter 3b</li>
<li class="ui-state-default">Chapter 3c</li>
</ul>
</li>
<li class="ui-state-default">Chapter 4
<ul class="sortable">
<li class="ui-state-default">Chapter 4a</li>
<li class="ui-state-default">Chapter 4b</li>
<li class="ui-state-default">Chapter 4c</li>
</ul>
</li>
<li class="ui-state-default">Chapter 5</li>
</ul>
$(function() {
$( ".sortable" ).sortable({
revert: true,
connectWith: ".sortable"
});
$( "ul, li" ).disableSelection();
});
Related
I'm trying to select a HTML drop-down option through c# however Im not sure where to start. Could someone give a basic example.
Thanks in advance
Edited: This drop down I'm selecting is on someone's web page off the internet.
Edited: Below is the html on the webpage:
The drop down menu that contain "Ratings Data Upload" is what I am after to select.
<li class="dropdown ">
<a class="dropdown-toggle" role="button" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="">
Ratings Data Upload
</li>
There is a great browser automation framework called Selenium. Your next step should be using tutorials or online training content to learn Selenium (or another tool).
Selecting a drop down value with Selnium is as easy as:
Select objSelect =new Select(driver.findElement(By.id("search-box-id")));
objSelect.selectByVisibleText("Name of option shown to user");
I would like links on the navigation bar to appear or disappear depending upon the data in the database. All the nav bar links are in _Layout.cshtml which is being used by all pages.
<ul>
#if (User.Identity.IsAuthenticated)
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bookings</a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("All Bookings", "GetAllBookings", "Booking")</li>
<li>#Html.ActionLink("Member's Dashboard", "GetBookingsByStatus", "Booking")</li>
</ul>
</li>
</ul>
I would like member's dashboard to only appear if they are a member and have certain attributes in their profile. What is the best way to dynamically changing the nav bar links depending upon the data in database?
even in your sample code, you can just leave out the list items by wrapping them in an #if conditional and checking their permissions in whatever method you see fit.
However, I hope I'm pointing out the obvious, but this method only hides the link. It doesn't prevent the user from typing it in or using a bookmark. You will also need to duplicate the security check in your controller.
I will like to know how to disable ChoiceC from this menu if the user is not logon to the
current site using the loging page.
The ChoiceC option will be only available to the user which have connected to the site had been approved.
Can you provide me link or example on how to perform this task with C# ?
I tried to had the class="disabled" but it didn't do anything ie the option is still available.
<div id="menu">
<ul id="menua"; class="ul menua">
<li style="text-align:center;padding:9px;" class="smallwhitetext"></li>
<li>ChoiceA</li>
<li>MenuA
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</li>
<li>Choice B</li>
<li class="disabled">
Choice C
</li>
</ul>
</div>
I'd recommend a two-step approach. First, don't have the C# code output the link in the list item if they're not logged in. Second, change the style of the list item by applying a class to that item to indicate to the user that they're not logged in and thus the item is unavailable.
Simply applying a class to that item wont work.
I'm not sure what method you use to build the menu and choices, but normally this could best be done when the page is generated at the server. Just wrap your conditional choice inside an if-statement where you check the approval. Here is some pseudo code for the old style:
<ul>
<li>ChoiceA</li>
<li>MenuA
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</li>
<li>ChoiceB</li>
<% if( userIsAuthenticated) { %>
<li>ChoiceC</li>
<% } %>
</ul>
Now I know there are many ways to go about outputting HMTL with MVCs and templates and stuff, but since you didn't mention any specific technique I went for the old style.
Hope it helps!
EDIT
You could also skip the mixing of C# and HTML like one used to do in ASP and still do in PHP and others by simply:
if(userIsAuthenticated) {
Response.Write(#"<li>Choice C</li>");
}
The downside is that when you get a lot of quotes its easier to miss some and a bit harder to read. Plus you wont get code coloring for the HTML.
Note: The # is for verbatim string literals which escape every special character except quotes. You escape these using double quotes instead of the usual \.
<ul id="menua"; class="ul menua">
<li>Option A</li>
<li>Option B</li>
<% if(userIdAuthenticated) { %>
<li>Option C </li>'
<% } %>
</ul>
This is working but still have a small error.
The only error I got is the top ul which is underline in green with the following error message Validation (XHTML5) Text is not allowed between the opening and closing tag for element ul.
I have the following problem: I'm making a site in Orchard and have to apply a design made by some design company. They delivered html and CSS (+ LESS) and I have to make it into a theme.
I get it done for the most part except the menu's. I want to apply a class to the nav tag in the following code, but I can't make any alternates for that end up rendering it.
<article class="widget-navigation widget-menu-widget widget" shape-id="18">
<nav shape-id="19">
<ul class="menu menu-main-menu" shape-id="19">
<li class="current first" shape-id="22">
Home
</li>
<li shape-id="24">
Something1
</li>
<li shape-id="26">
Something2
</li>
<li class="last" shape-id="28">
Something3
</li>
</ul>
</nav>
</article>
How do I influence the rendering of my menu's so that I can apply proper CSS to it? The only alternates that I can make either contain only:
#Model.Text
or:
#Display(Model.Menu)
I think you can create a custom shape for the menu, inside Views/Menu-Main.cshtml, as explained on this page. From there on, you can pretty much do whatever you want to the shape. For example
#{
// Model is Model.Menu from the layout (Layout.Menu)
var tag = Tag(Model, "ul");
var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);
if (items.Any()) {
items[0].Classes.Add("first");
items[items.Count - 1].Classes.Add("last");
}
}
<nav class='my-custom-class'>
#tag.StartElement
#DisplayChildren(Model)
#tag.EndElement
</nav>
I haven't actually tried this so apologies if I'm not 100% correct, but this should get you in the right direction at least.
Also, the sample code above is just a slightly modified version of the original menu's code, best part about Orchard is that it's open source... You can view the original code here
I don't know how to apply CSS for a HTML generic control like <UL> and <LI> given runat="server" in ASP.NET. I am finding the <li> in a master page from a content page. Once I found that control I want to apply CSS.
<ul id="mainMenu" runat="server" style="width:350px;">
<li id="mainHome" runat="server"><a title="Home" href="#" class="home">Home</a></li>
<li id="mainManage" runat="server"><a title="Manage" href="#"
class="manage">Manage</a></li>
<li id="mainEnquiry" runat="server"><a title="Enquiry" href="#"
class="enquiry">Enquiry</a></li>
<li id="mainReport" runat="server"><a title="Report" href="#"
class="report">Reports</a></li>
</ul>
Please try this,
ull.Style.Add("background-color", "Red");
Or, I have tested this, will definitely work, please check
ull.Attributes.Add("class", "yourClass");
Edit:
To test this solution I have provided you:
make new blank master page and put <ul runat="server" id="ull">
then add a new page and use the above master page.
make findcontrol ul and put in CSS as I have mentioned in the answer.
then run your page, and view source of your HTML page and you will find what you are looking for. Like