July 20, 2011 05:16 by
ScottRazor Layout pages are the equivalent to MasterPages in ASP.NET Web Forms and the Web Forms View Engine within ASP.NET MVC. Just as it is possible to nest MasterPages, it is also possible to nest Razor Layout pages. This article explores the process required to achieve nesting of Layout pages using the Razor View Engine in MVC 3, or WebMatrix Web Pages sites.
You would consider using nested layout pages if you were building a corporate site for a global company, for instance, which is comprised on many divisions, each having their own look and feel. There may be a common look and feel for the header and footer of the site, but the navigation and content changes in both structure and appearance depending on which division of the company is being featured. The imaginary company that the sample site relates to has a number of divisions, one of which is Automation and another for Electronics. Each of them has their own branding which needs ot be catered for. For simplicity's sake the following walkthrough illustrates the use of Razor in a Web Pages site built using WebMatrix, but the principals are exactly the same if you are using ASP.NET MVC 3.
Step 1
Create a new site using the Empty Site template and name this Nested Layouts. Add two folders to the site – one called Content and the other called Shared. Add a new CSS file to Content and leave it with the default file name of StyleSheet.css. Add the following code to it:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
padding: 0;
margin: 0;
}
h1{
color: #0093c0;
}
#wrapper{
background-color: #c1dfde;
padding: 10px;
width: 800px;
margin: auto;
min-height: 600px;
}
#electronics, #automation{
min-height: 400px;
}
#electronics{
background-color: #8ec1da;
width: 650px;
float: left;
}
#automation{
background-color: #ffe8d3;
}
#electronicsnav{
background-color: #fff;
min-height: 400px;
width: 150px;
float: left;
}
#automationnav{
background-color: #dedede;
}
#automation h3{
color: #997d63;
}
Step 2
Add a CSHTML file to the Shared folder and name it _MainLayout.cshtml. Change the existing code so that it looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@Page.Title</title>
<link href="@Href("~/Content/StyleSheet.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Global Enterprises</h1></div>
<div id="nav">
<a href="Home">Home</a> |
<a href="About">About</a> |
<a href="Engineering">Engineering</a> |
<a href="Electronics">Electronics</a> |
<a href="Automation">Automation</a> |
<a href="Contact">Corporate</a> |
<a href="Contact">Contact Us</a>
</div>
@RenderBody()
</div>
</body>
</html>
Step 3
Add another CSHTML file to the Shared folder and name this one _AutomationLayout.cshtml. Replace the existing code with this:
@{
Layout = "~/Shared/_MainLayout.cshtml";
}
<div id="automationnav">
<a href="Products">Products</a> |
<a href="Services">Services</a> |
<a href="Support">Support</a> |
<a href="Team">The Team</a> |
</div>
<div id="automation">
@RenderBody()
</div>
<div id="footer">The Automation Division Footer</div>
Step 4
Now add a third CSHTML file to the Shared folder. Name it _ElectronicsLayout.cshtml, delete the existing code and add the following:
@{
Layout = "~/Shared/_MainLayout.cshtml";
}
<div id="electronicsnav">
<a href="Products">Products</a> <br />
<a href="Services">Services</a> <br />
<a href="Support">Support</a> <br />
<a href="Team">The Team</a> <br />
</div>
<div id="electronics">
@RenderBody()
</div>
<div id="footer">The Electronics Division Footer</div>
Step 5
Add a CSHTML file to the root folder. Name this one Automation.cshtml and replace the existing code with this:
@{
Layout = "~/Shared/_AutomationLayout.cshtml";
Page.Title = "Automation";
}
<h3>Automation Home Page</h3>
Step 6
Finally, add another CSHTML file to the root folder and call it Electronics.cshtml. Replace the existing code with the following:
@{
Layout = "~/Shared/_ElectronicsLayout.cshtml";
Page.Title = "Electronics";
}
<h3>Electronics Home Page</h3>
Making sure that the Electronics page is selected in the left pane, click the Run button to launch the page in your browser. Notice that the second navigation has a white background and the main area has a blue background. Click the Automation link in the top navigation. See how the colours change? The main content is a brownish-pink colour as is the secondary navigation. The heading in the main content area changes colour too. Most obviously, the Electronics navigation is displayed vertically whereas the Automation navigation is horizontal.
What defines a Layout page is a call to the RenderBody method. In this exercise you created a layout page from _MainLayout.cshtml by placing @RenderBody() in the file, and by matching that with Layout declarations in both the _AutomationLayout.cshtml and ElectronicsLayout.cshtml files. You also added calls to RenderBody in both of those files, thus turning them into layout pages. Electronics.cshtml and Automation.cshtml each contained Layout declarations pointing to their own layout page, completing the content – layout relationship. There is no limit to the number of levels to which you can nest layout pages.
The design of the pages won’t win any awards, but this sample serves to illustrate that nesting layout pages can offer a very flexible solution to certain problems.
June 22, 2011 05:55 by
ScottRemote validation has finally landed in RC1 of ASP.NET MVC 3. It’s a weird area as more often than not people tend to over complicate something that is really pretty simple. Thankfully the MVC implementation is fairly straightforward by simply providing wiring allowing the jQuery Validation plugin to work it's magic. Basically there is a new Remote attribute that can be used like so.
public class Credentials
{
[Remote("Username", "Validation")]
public string Username { get; set; }
public string Password { get; set; }
}
As you can see we have attributed the Username field with a Remote attribute. The 2 parameters tell us what Action and Controller we should call to perform the validation. This does make me feel slightly uneasy as it kind of feels like you are coupling the controller to the model which doesn't sit right by me. currently sitting on the fence I'll see how it works in real life. Anyway I implemented it like so,
public class ValidationController : Controller
{ public ActionResult Username(string UserName)
{
return Json(Repository.UserExists(Username), JsonRequestBehavior.AllowGet);
}
}
And thats you - provided you have the necessary client side libraries included of course (jQuery, jQuery Validate etc). and have Client Side Validation turned on (now by default in MVC3).
Configuration
The Remote attribute offers a few nice little configuration options to make things easier. The typical ones are there such as ErrorMessage, ErrorResource etc. but there are a few specific ones as well.
Fields
There may be a case where ding the name and the value of a single form field isn’t enough to perform validation. Perhaps validation is affected by some other field/value in the form. The Remote attribute accepts a comma separated list of other fields that need to be sent up with the request using the Fields parameter
This basic example will send up the value of the EmailService input field along with the value of Username. Clean and simple.
[Remote("Username", "Validation", Fields = "EmailService")]
HttpMethod
HttpMethod simply allows us to change how the ajax request is sent e.g. via POST or GET or anything else that makes sense. So to send a remote request via POST
[Remote("Username", "Validation", HttpMethod = "POST")]
A Minor Difference
You might notice if you read the release notes for RC1 that my implementation of the controller is slightly different. The reason being that the example in the release notes is broken :-). The example looks like this
public class UsersController {
public bool UserNameAvailable(string username) {
return !MyRepository.UserNameExists(username);
}
}
However the Validate plugin expects a JSON response which is fine on the surface but returning a boolean response to the client side results in a response body of False (notice the captial F) which in turn causes a parse error when the plugin performs JSON.parse. My suggested solution is actually more inline with how most people would typically write an Ajax capable controller action anyway (though I am not happy with the JsonRequestBehaviour usage) but there are other ways but they aren’t pretty….
public class ValidationController : Controller
{
public string Username(string username)
{
return (!Repository.UserExists(Username)).ToString().ToLower();
}
}
See? Ugly and plain WRONG (but it will work).
Nice to see this feature finally landing as it can be useful in certain situations.
May 4, 2011 07:01 by
ScottHostForLIFE.eu was established to cater to an under served market in the hosting industry; web hosting for customers who want excellent service. HostForLIFE.eu – a cheap, constant uptime, excellent customer service, quality, and also reliable hosting provider in advanced Windows and ASP.NET technology. We proudly announces the availability of the ASP.NET MVC 3 hosting in our entire servers environment.
You can start hosting your ASP.NET MVC 3 site on our environment from as just low €3.00/month only. For more details about this product, please visit our product page at http://hostforlife.eu/ASPNET-MVC-European-Hosting.aspx.
“ASP.NET MVC 3 is a framework for developing highly testable and maintainable Web applications by leveraging the Model-View-Controller (MVC) pattern. The framework encourages developers to maintain a clear separation of concerns among the responsibilities of the application – the UI logic using the view, user-input handling using the controller, and the domain logic using the model. ASP.NET MVC applications are easily testable using techniques such as test-driven development (TDD), “said General Manager of HostForLife.eu , Kevin Joseph. “And now, just by paying €3.00/month, you can get professional ASP.NET MVC 3 with us. Really, there are many benefits when you host your site with us. We can fully guarantee you that we will provide the best quality hosting service with you.”
For more information about our site, please visit http://www.hostforlife.eu.
Top Reasons to host your ASP.NET MVC Website with HostForLife.eu
There are many reasons why so many people choose HostForLife over any other web hosting provider each year. Whether you’re beginner or an experience webmaster, HostForLife offers the perfect solution for everyone.
You’ll have highly trained, skilled professional technical support people ready, willing, and wanting to help you 24 hours a day. Your web hosting account servers are monitored from three monitoring points, with two alert points, every minute, 24 hours a day, 7 days a week, 365 days a year. The followings are the list of other added-benefits you can find when hosting with us:
1. World-class 24x7 Customer Support
Will your hosting company promptly answer questions and resolve issues - at 3 am on a Sunday? Even some providers claiming “24x7” support will not - but HostForLife will. Our outstanding uptime is backed by true 24x7 customer support. An expertly trained technician will respond to your query within one hour, round the clock. You will also get qualified answers. Other hosting companies typically have very low - level support staff during the night or weekends. HostForLife always has knowledgeable, top - level support standing by, day or night, to give you the answers you need.
2. Commitment to Outstanding Reliability
Reliability, Stability, and Performance of our servers remain out TOP priority. Even our basic service plans are equipped with standard service level agreements for 99.99% uptime. Advanced options raise the bar to 99.99%. Our state-of-the-art data centers combine servers and SAN storage with full redundancy and operational tools with proprietary service management techniques. Full backup and recovery capabilities are implemented, including redundant power supplies, cooling and connectionsto major data networks.
3. “Right-size” plans for maximum value
HostForLife offers a complete menu of services. IT professionals select only what they need - and leave behind what they don’t. The result is an optimal blend of cost and performance. We offer IT professionals more advanced features and the latest technology - ahead of other hosting companies.
4. Profitable, Stable, Debt-free Business
Financial stability is the bedrock of a hosting provider’s ability to deliver outstanding uptime, cost-effective service plans and world-class 24x7 support. HostForLife’s customers are assured of our financial integrity and stability - a stark contrast to the ups and downs they may have experienced with other providers.
5. The Best Account Management Tools
HostForLife revolutionized hosting with Plesk Control Panel, a Web-based interfaces that provides customers with 24x7 access to their server and site configuration tools. Some other hosting providers manually execute configuration requests, which can take days. Plesk completes requests in second. It is included free with each hosting account. Renowned for its comprehensive functionally - beyond other hosting control panels - and ease of use, Plesk Control Panel is available only to HostForLife’s customers.
6. 30-Day Money Back Guarantee
HostForLife 30 day money back guarantee ensures you have the ability to cancel your account anytime within your first 30 days under our full 30 day money back guarantee (less one-time account setup free). So what are you waiting for? Sign up today, risk free…
7. Simplicity with FREE 1-Click Installation
HostForLife was designed with ease of use in mind. From one click installations of your favourite website applications to our much talked about drag and drop website builder, you can rest assure your stay with us is going to be a smooth one. HostForLife offers the most extensive set of scripts on the web allowing you to build complicated websites with little or no programming knowledge at all. From blogs to forums to powerful e-commerce solutions, Super Green has something that is right for you.