I'm using JQuery UI 1.7/PACKT book. It said on p.63 that the content of a page can be loaded just by using this statement
<li>AJAX Tab</li>
How can I obtain something with Html.ActionLink()
Thanks for helping.
If you are using the jQuery UI Tabs, Html.ActionLinks will work exactly the same way. The key is to ensure that you have your unordered list items within a div tag with an id of "tabs."
Something like this:
<div id="tabs">
<ul>
<li><%= Html.ActionLink("Tab Name 1", "Action1", new { Controller = "ControllerName" })%></li>
<li><%= Html.ActionLink("Tab Name 2", "Action2", new { Controller = "ControllerName" })%></li>
</ul>
</div>
Just include this within your .aspx file that you want the tabs to appear, and make sure to include the jquery and jquery-ui scripts, and it should work for you. You can read about the various Html.ActionLink parameters by following the link. That should help you understand the ActionLink better.
Hope that helps! Please let me know if you need any additional clarification.
Related
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I am developing an ASP.NET MVC web application.
On one of my pages I have tabbed the information that looks like this:
Tabbed Content
My ActionLink looks like this:
#Html.ActionLink("Back to Details", "RecordView", "ApplicantRecords", null, null, "Documents", new { id = Model.InternID }, null)
Now when I hover over the link in my application it has the correct syntax with the InternID and fragment but when I click on it.. it sends me to the Tab that says "Applicant Profile", not "Documents"..
When I hover over the "Documents" tab it has the same url as when I hover my actionlink in my application.
Is there a way to fix this?
In addition to Chris Patt's answer.
You need to explicitly enable the specific tab you want.
First you need to pass one more param in your url querystring to represent which tab to be selected.
#Html.ActionLink("Back to Details", "RecordView", "ApplicantRecords",
new { id = Model.InternID ,tab="documents" }, null)
and in your RecordView() action method, you will accept this, set it to ViewBag so that you can read it in your razor view.
public ActionResult RecordView(int id,string tab="profile")
{
ViewBag.CurrentTab = tab;
return View();
}
and in your view, on the document ready event , we will read this value and use that to show a specific tab.
$(function() {
var tab = "#ViewBag.CurrentTab";
$('.nav-tabs a[href=#'+tab+']').tab('show');
});
Assuming your tab link's href values are "#profile" and "#documents"
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Profile
</li>
<li role="presentation">
Docs
</li>
</ul>
Simply appending the fragment to the URL doesn't do anything to activate a particular tab. JavaScript "tab" libraries merely utilize fragments for graceful degradation: if JavaScript is not enabled, clicking the "tab" will jump you to the right portion of the page where the tab content lies, because of the way page anchors work. However, you are responsible to inspecting the fragment in the URL, if it exists, and activating the appropriate tab. How to activate the tab depends on your particular solution, which you haven't given us any information about, though.
I am generating html menu string from XML in mvc controller and in angularjs i am passing the response to div like $("#divId").html(response).
Its working fine but some menus have sub menus so the open class is not calling so its not showing the submenus
please tell where i am doing wrong.
In angular, never use $() outside a directive (and generally use angular.element() instead ... But anyway you don't need it 99% of the time)
If you want to dynamically add some HTML into an angular template use the ng-bind-html property.
In your controller
$scope.mymenu = response;
In your html
<div ng-bind-html="response"></div>
You'll probably run into a case that angular don't trust your HTML. You'll have to use some angular services to say angular that your HTML should be trust (if it is a proper source).
Here is a good topic on how to make angular trust your HTML
Hope it helped.
EDIT
Here is a working plunker of this proposition
Looks like the first problem is that you try to write your HTML into the controller, wich is a bad thing.
Instead you should try to generate a JS object like this one :
$scope.mymenu = [{
name:"Adminitstration",
url:"/Administration",
},{
name: "My Dashboard",
url:"/mydashboard",
submenus: [{
name:"Activity dashboard",
url:"/activity",
}]
},{
name: "Profiles",
url:"/profiles",
submenus: [{
name:"Accounts",
url:"/accounts",
}]
}]
And use the angular templating to render an HTML according to theses
<ul>
<li ng-click="menu.submenusShow = !menu.submenusShow" ng-repeat="menu in mymenu">
{{menu.name}}
<ul ng-show="menu.submenusShow">
<li ng-repeat="submenu in menu.submenus">
{{submenu.name}}
</li>
</ul>
</li>
</ul>
I have read a few articles as I was searching for a solution. They all seemed to favor a hard-coded or HTML Helper alternative; however, I wanted something simple and database driven. This is my best solution (submitted as an answer, by me).
Here are some other articles' solutions:
An easy way to set the active tab using controllers and a usercontrol in ASP.NET MVC?
asp.net mvc and css: Having menu tab stay highlighted on selection
ASP.NET MVC: Tabs ASCX - Adjust CSS class based on current page?
Just pass a TempData down from one of your controllers like this:
TempData("CurrentPage") = "Nutrition"
Then, in your View add a conditional like this:
<ul>
#For Each item In Model
Dim currentItem = item
If (Not String.IsNullOrEmpty(TempData("CurrentPage")) And TempData("CurrentPage") = currentItem.NAV_Element) Then
#<li><a class="current" href="#Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">#Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>
Else
#<li>#Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</li>
End If
Next
</ul>
I have accomplished this in the past by using the route values to generate a href and then setting the parent tab to active based on that.
This is a bootstrap flavoured version:
<ul class="nav nav-tabs">
<li>Some page</li>
<li>Some other Page</li>
</ul>
<script type="text/javascript">
$(function(){
$('a[href="#Url.Action(ViewContext.RouteData.Values)"]').parents("li").addClass("active");
};
</script>
Si
I know I am too late to answer this but if you are using ASP MVC and looking for highlighting Menu items using controller and action, here is the solution which is working perfectly fine for me -
<li> <i class="fa fa-user-plus"></i> <span>Signup</span> </li>
I am created a demo of autocomplete using http://jqueryui.com/demos/autocomplete/
plugin.
Now the suggested list which appears on pressing key is
<ul>
<li>
Suggestion
</li>
</ul>
I have to edit the list like :
<ul>
<li>
<a>Suggestion</a>
<br />
<a>data1</a><a>data2</a>
</li>
</ul>
how can I do this? I seen script for autocomplete but not found any hint.
You can configure the autocomplete with the formatItem, and the parse properties of the configuration object.
This question has been answered here:
JQuery AutoComplete results format?
Looks like you want to add some HTML to the result. If that is correct, the jquery ui docs point to a resource (at the bottom of the docs page):
The label is always treated as text, if you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.
Or, you can add custom data using the open event of the autocomplete. See example here:
http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/