October 20, 2014

Error: The Security Validation For This Page Is Invalid



Scenario:
The user is trying to edit a list item in page, via a custom web part, and the context is already under system account elevation (using SPSecurity.RunWithElevatedPrivilages() method).


Causes:
This error can occur due to one of the following reasons:

  1. Security/authentication problem: Can be fixed by delegation, and using ‘Web.AllowUnsafeUpdates’ & ‘web.Site.WebApplication.FormDigestSettings’ setting.
  2. Breaking role inheritance problem: In code, breaking the role inheritance internally flips the ‘AllowUnsafeUpdate’ flag to false, so it has to be explicitly set to true. See http://support.microsoft.com/default.aspx?scid=kb;EN-US;970192
  3. Page timeout problem:Where user took so long to upload the attachments. See http://support.microsoft.com/kb/888828

Solution:
Actually the code already applied point 1 above. It appeared that the code internally was doing other operations right before list item save, those operations were flipping the 'AllowUnsafeUpdate' flag without an alarm.. so the solution is simply to switch it back to 'true' before the save!





October 6, 2014

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;
floatleft;
width12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clearleft;
width100%;
border-bottom-width1px !important;
border-right-width0 !important;
margin0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
displayblock;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom0;
padding-right.1em;
border-right-width1px;
border-right-width1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding1em;
floatright;
width40em;
}
</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