Saturday 21 March 2009

Detecting errors in ASP.NET MVC views

That was something annoying with ASP.NET MVC, but there is a simple solution...
this is a copy from ASP.NET MVC - RC Release Notes.



ASP.NET Compiler Post-Build Step

Currently, errors within a view file are not detected until run time. To let you detect these errors at compile time, ASP.NET MVC projects now include an MvcBuildViews property, which is disabled by default. To enable this property, open the project file and set the MvcBuildViews property to true, as shown in the following example:

<Project ToolsVersion="3.5" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<MvcBuildViews>true</MvcBuildViews>
</PropertyGroup>

Note Enabling this feature adds some overhead to the build time.

You can update projects that were created with previous releases of MVC to include build-time validation of views by performing the following steps:

1. Open the project file in a text editor.

2. Add the following element under the top-most <propertygroup> element:

<MvcBuildViews>true</MvcBuildViews>

3. At the end of the project file, uncomment the <target name="AfterBuild">element and modify it to match the following example:

<Target Name="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
<AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>

Tuesday 17 March 2009

Modal div with JQuery

I Found a usefull JQuery plugin for modal div, it is the SimpleModal. It is pretty simple, it enables you to make a div, containing whatever you want, perform like a modal window.

Click for demo

Here are some code sample :

Simple call :
$('#modalContentTest').modal();

With callbacks :
$(this).modal({
onOpen: OnModalOpen,
onClose: OnModalClose,
persist: true
});

How to put a div in the center of the screen using CSS

I lately found out how to put a div in the center of the screen. I did a bit of googling and found my answer (Sorry, i didn't note the forum that helped me). I first want to mention that my div is pretty big, made to fit in 1024x768. so here is my solution :

<html>
<head>
<title>DIV CENTER SCREEN</title>
<style type="text/css">
<!--
html, body
{
font-family: Arial, Helvetica, Sans-Serif;
padding:0;
margin: 0;
text-align:center;
height: 100%;
}
div#shim
{
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -275px;
float: left;
}

div#wrapper
{
width: 650px;
height: 550px;
margin:0px auto;
text-align:left;
clear: both;
top: -275px;
position: static;
background-color: #7B9EbD;
text-align: center;
}
p
{
line-height: 550px;
font-weight: bold;
font-size: 16pt;
}
-->
</style>
</head>
<body>
<div id="shim"></div>
<div id="wrapper">
<p>
This div is in the center of the screen...
</p>
</div>
</body>
</html>

The trick is to put another div above the one you need centered, put it 50% height and a margin-top equal to half your centered div height. then put your centered div with a top of half it's height.

DIV Layout


I Lately had to build the layout for a website, this is a simple layout, and the picture represents what I want it to look. The challenge is to have a layout that would fill the width of the screen while having a fixed width left column. So here is my solution :

<html>

<head>
<style>
html, body
{
padding:0;
margin: 0;
width: 100%;
height: 100%;
}
div#page
{
width: 100%;
height: 100%;
}
div#header
{
background-color: #FF0000;
height: 80px;
}
div#menu
{
float: left;
width: 150px;
background-color: #00FF00;
}
div#pagecontent {
margin-left: 150px;
background-color: #0000FF;
}
div#footer
{
background-color: #636363;
text-align: center;
}
</style>
</head>

<body>

<div id="page">

<div id="header">
<h1>This is my title</h1>
<h2>This is my subtitle</h2>
</div>

<div id="menu">
<ul>
<li>this</li>
<li>is</li>
<li>my</li>
<li>left</li>
<li>menu</li>
<li>this</li>
<li>is</li>
<li>my</li>
<li>left</li>
<li>menu</li>
<li>this</li>
<li>is</li>
<li>my</li>
<li>left</li>
<li>menu</li>
</ul>
</div>

<div id="pagecontent">
This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page.
</div>

<div id="footer">
this is my footer
</div>

</div>

<BODY>

</html>