Set menu item to Active in MVC with BootStrap

Recent I start working on MVC with BootStrap for building the great Web UI. I am building a menu with several menu items and found out that it is not setting as “active” in the class of the item when a page is loaded.

BootStrap_menu_01

By default the MVC template doesn’t add the active class to the “li” item in the menu. So I have to add the class=”active” to the “li” to indicate the active menu item.

BootStrap_menu_02

Above is the code that is used for the actual menu that create the menu in the first screenshot. if you look at line 8, you will see the class=”active”, this is what makes the active menu item. In order for us to do this, we need to know what page is currently loaded and then apply the active class css to the corresponding “li” element. The best way to do this, is to create a HTML helper to handle this for us.

Now, let’s try to create a new folder in the project and called “Helpers”. Then add a new class named “HtmlHelpers.cs” (from my sample, I used KenLinHtmlHelpers). here we could create an extension method of the HtmlHelpers method. We do this by creating a static class.

BootStrap_menu_03

As you can see, I have created 2 method, IsActive and IsActiveController. The only difference is, do you want to take Action into one of the input parameter. If you want to set class is active whenever it is in the specific controller, you could use IsActiveController. Otherwise, you may use IsActive if you want the active class only in exactly the specified Action and Controller. Please also note that, I am letting the activeClass and inActiveClass input as optional with a default value.

Now we could update our cshtml as below,

BootStrap_menu_04

Look carefully on each “li” item now. There is a new HtmlHelper method to check and show if it is the active controller.  Please also look carefully, I have also called the method in line 9, for the parents of the dropdown Menu.

NOTE: You have to reference the class in the top of the view page that you are using the IsActive or IsActiveController method in. Just add the code as line 1 of the above screenshot.

NuGet redirection and package retrieval errors in Visual Studio 2015

Yesterday I have experience that I tried to install NuGet Package but an error occurred while retrieving package metadata in Visual Studio 2015.


NugetError.01

After getting some try and catch. I found out that the VS2015 is configured to connect the API v3 of the NuGet.org. So I tried to add another one with the URL on API v2 of the NuGet.org and I am then able to install any NuGet package. So I think that if you hit into the same error, this is a good to try.

NugetSetting.01


NugetSuccess.01

 

DataBinding in second, third…TabPages

I have experience in few months ago. I was working on a WinForm application. I placed a TabControl with multiple TabPages. However, I found out that the dataBinding does not work on the second, third or later TabPage controls. After getting some error and test. I found out that the controls in these tabPage are not being loaded until it is “showed”.

 

So I have some code sample to resolve this, you may try to place it under Page.Load event handling,


    foreach (TabPage tp in tabControl1.TabPages)
    {
        tp.Show();
    }
    this.tabControl1.SelectedTab = this.tabPage2;

 

// here I am going to make sure that the dataBinding is completed before select into other tabPages.
// You may try to loop this one by one tabPage if you have more tabPages
    this.tabPage2.BindingContextChanged += (object sender, EventArgs e) => {
        this.tabControl1.SelectedTab = this.tabPage1;
    };

    this.tabControl1.SelectedTab = this.tabPage1;


Hope this article could help you a bit.

 

 

Microsoft Learning Download Center has moved to Cloud!

mocl

If you are MCT, you must know that the URL of the MOC Download Center is https://mocl.one.microsoft.com/cwdl/cwdl_home.asp.

Today, when I browse to this url and it shows an image and telling you that “Microsoft Learning Download Center has moved to Cloud! You are automatically being redirected, please click here to go the new website directly.” And your webpage will be redirect to the new portal after few seconds.

So you’d better to update favorites in your Browser and point to the new URL now.
New URL is:
https://learningdownloadcenter.microsoft.com

Useful links to learn Windows 10 and VS2015

images images
I am sure that you all are new to Win10 and VS2015. You may be looking for learning resource. Here I listed some of the sample site for you and so you could get some learning on these 2 new products.

Opportunity URLs Remarks
Developer Tools Download https://www.visualstudio.com/ Download any Visual Studio skus, including VS 2015
Developer for Windows 10  -What’s New
Get Started
Design
Develop
Publish
https://dev.windows.com/en-us/getstarted/whats-new-windows-10/
https://dev.windows.com/en-us/getstarted/
https://dev.windows.com/en-us/design/
https://dev.windows.com/en-us/develop/
https://dev.windows.com/en-us/publish/
All the info developers may need to write apps
Windows 10 courses in MVA https://www.microsoftvirtualacademy.com/en-US/training-courses/getting-started-with-windows-10-for-it-professionals-10629/ Great site to get online courses on Windows 10
Channel https://channel9.msdn.com/windows/ Another great online resource for Windows 10 related videos
Windows 10 Jumpstart http://www.microsoftvirtualacademy.com/liveevents/preparing-your-enterprise-for-windows-10-as-a-service/ A live event on August 14th

Microsoft MVP since 2003