Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

jQuery to extend the ActionLink

In this issue, we are going to learn how to integrate a complex jquery menu in your ASP.NET MVC application while ActionLink doesnt allow you to wrap links.

Note: Do not put all the code in the article, to see the entire code, download the complete source code of this article in this LINK, it's very important to make this example.

Think you have created a new asp.net mvc application.

In your master page your menu looks like this:

Imagem 1

Make it look like this

Imagem 1

Here is the code

 
 <div id="menu">
   <ul class="menu">
       <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
       <li><%: Html.ActionLink("About", "About", "Home")%></li>
  
.
.
.

 </ul>

You may wish to create a special menu for your application for the design sake.

Imagem 1

Here is a quick tips how you can integrate a special jQuery menu in an ASP.NET MVC application. In fact it is not too complicated to use a jQuery plug in a basic (or even complex) mvc application. But in some cases, it’s a bit confusing and you’ll finally decide to change the original code provided with the plug in.

In this tip, we are going to choose a random plugin between diversified plugins that can be found around the World Wide Web. The randomly chosen plugin is this one http://apycom.com/menus/6-light-sea-green.html

You can follow the link if you want to download it, there you’ll find other many and diversified menus. If you have downloaded, extract it and you will find that the plug requires your menu to look like this

   
 <ul class="menu">
        <li><a href="#" class="parent"><span>Home</span></a></li>
.
.
.
</ul>

Instead of what we usually use :

 
<ul class="menu">
   <li><a href="#" class="parent">Home</a></li>
.
.
.
</ul>

Note the span element in bold.

If you try integrating this menu in our asp.net application, it will not work perfectly! You will not get the same result because the plugin uses the span element to regulate the position the menu. So that’s the problem. To solve this problem, you can try to generate this programaticaly, using html.ActionLink helper. This solution is not easy to handle. Until now, I don’t care how to do it Asp. Because jQuery can help me to wrap the a element. Have a look bellow to see I do it

<script type="text/javascript" language="javascript">
  $(document).ready(function () {
    $('.menu')
	.find('a')
	.each(function () {
    $(this).wrapInner($("<span/>"));
      });
        });
    </script>

Here you are and the problem is solved!

Explaination :

  • We tell the browser to execute our script only when the document is loaded completely
  • We grab the html element whose class name is ‘menu’
  • We find a a element inside the html grabbed in 2
  • We decide to do it for all similar elements (each a tag)
  • Then we wrap the a element.
  • ADD THIS CODE IN YOUR MASTER PAGE

Conclusion

JQuery is a powerful JavaScript framework that can help you to do more and write less! It this tips you learnt how you can change the look of your menu in an asp.net mvc application. You can also use other jquery functions(first(),after(),before(),animate(),last(), next(), …) to do complicated things at your wish.

Sincerely Yours!



C# 4.5 Developer ASP.NET 4.5, Php 5, JavaScript (jQuery 1.6), Silverlight 4 (Sooner Beta5) xHtml, html5 Css 3 PhotoShop CS3 Java

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login