Fixing deploymet error: The feature is not a Farm Level feature and is not found in a Site level defined by the Url

If you have a SharePoint 2013 site that was migrated from SP2010 but the visual upgrade was not performed, then it will be on SP2010 UI mode as you can see in Fig #1 below (unlike the case of a brand new SP2013 or after the visual upgrade as in Fig #2).

Figure #1 -  Sharepoint 2013 with SP2010 UI

Figure #2 – SharePoint 2013 with SP2013 UI

So in SharePoint 2013 site with SP2010 UI mode, if you are deploying a feature (for example a visual web part) through Visual Studio or PowerShell then the following occurs:

• The feature is scoped to "Site", and Activate on Default is set to true.
• Active deployment configuration is default\
• Solution will be added to farm
• Feature will be installed on farm, and feature files will be copied to features folder in 15 hive (\15\TEMPLATE\FEATURES).
• .Dll files will be deployed to GAC or local bin folder
• User controls will be copied to control templates folder in 15 hive (\15\TEMPLATE\CONTROLTEMPLATES).
• Feature is not added to site collection features page.
• Enable-SPFeature command will fail with error message:
  The feature is not a Farm Level feature and is not found in a Site level defined by the Url [Site Collection Url].
• The .webpart file will not be copied to Web Parts Gallery (_catalogs/wp) in target site collection.
• Web part cannot be added to any page.

Solution:

Use CompatibilityLevel parameter in Install-SPSolution PowerShell cmdlet to deploy the solution in either or both 14 & 15 hives:

Install-SPSolution -identity SolutionName.wsp -GACDeployment -CompatibilityLevel{14,15} -WebApplication https://ServerName.Domain.com

Also, you can apply the CompatibilityLevel parameter to Enable-SPFeature cmdlet to activate individual features in either or both hives.

Tabs in MVC 5 Using JQuery UI

Here is how to implement tabs inside MVC 5 project using jQuery UI library.

Steps To Do It:

1. Install jquery ui (combined library) to get the js files and base theme

These files will be added by the Nuget:
jquery-ui-1.11.1.js
jquery-ui.min-1.11.1.js


2. From jquery UI website, make a custom download including the tabs widget and the desired theme (for example: 'Cupertino ' theme). Then add the file 'jquery-ui.css' to project under '/Contents' folder:

3. Add the following changes inside the <head> section in /Shared/_Layout.cshtml view file (Note that 2 file bundles (/bundles/jquery & /bundles/bootstrap) already exist in layout view but should be moved from bottom to top of the page):

@*moved from bottom of page*@
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

<link rel="stylesheet" href="/Content/jquery-ui.css" />

<script src="/Scripts/jquery-ui-1.11.1.js"></script>

@*style for vertical tabs*@
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}

</style>

4.  In /Home/index.cshtml view file: replace existing code with code below (where 'TabsSet1' is for horizontal tabs, & 'TabsSet2' is for vertical tabs):

@{  
 ViewBag.Title = "Home Page";
}

<title>@ViewBag.Title</title>

<h2 class="demoHeaders">IBR Testing JQuery UI Tabs</h2>

<div id="TabsSet1">
<ul>
<li><a href="#tabs-test">Test</a></li>
<li><a href="/home/About">About</a></li>
<li><a href="/Home/Contact">Contacts</a></li>
</ul>
<div id="tabs-test">
<h1>Welcome to this test tab</h1>
</div>
</div>

<br/><br/>

<div id="TabsSet2">
<ul>
<li><a href="/Home/About">About Us</a></li>
<li><a href="/Home/Contact">Contacts</a></li>
<li><a href="/Product/Index">Our Products</a></li>
<li><a href="#tabs-5">Tab X</a></li>
<li><a href="#tabs-6">Tab Y</a></li>
</ul>
<div id="tabs-5">
<h1>This is another Main tab</h1>
</div>
<div id="tabs-6">
<h1>Some Tab 2</h1>
</div>
</div>

<script>
$(function () {
$("#TabsSet1").tabs();
$("#TabsSet2").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#TabsSet2 li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>


Notes:
- Tabs can redirect to an MVC action (ex: href="/Home/Contact") or to another div content (ex: href="#tabs-5")
- Extra work required for adjusting the content for vertical tabs when page width is too small because the content div will overlap the tab boundaries.



A useful reference:
http://vizagtechie.blogspot.mx/2012/10/aspnet-mvc-dynamic-tab-using-jquery-ui.html?view=snapshot