RSS

Tag Archives: razor

ASP.Net MVC 3 Razor View Quick Reference

  • @ : Identify Razor code segment.
  • @* *@ : Comment.
  • @( ) : Indicate pure server-side code. This is only in single line.
  • Razor supports if else, while, do while, and foreach statement
  • @{ } : Indicate code block. This can be written in multiple lines.
  • Code block is not purely server-side code, it can also contains client-side code (HTML).
  • In code block, HTML elements is required to indicate client-side content.
  • Use <text></text> element in code block to identify client-side text.
  • @model : Keyword to define a model.
  • @section : Keyword to render code / text to pre-defined section.
  • @helper : Keyword to define a helper which create a reusable code snippet.
  • @functions : Keyword to define a function which provides pure server-side methods that can be reused within the view.
  • @RenderBody() : Method to render all the content of the view. A placeholder for view’s entire content.
  • @RenderSection() : Method to define a region that content will be inserted into by consuming view.
Advertisements
 
Leave a comment

Posted by on November 1, 2011 in References

 

Tags: ,

ASP.NET MVC 3: Use Different Layout File in Razor View

There are two ways to use different layout files in MVC view.

1. Set Layout in the View.

Create a new layout file in Shared folder and set the layout in the view page, on the top. Here part of my Index.cshtml.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

2. Use Controller to Set Layout

Create new layout page and return the layout file in the controller. Here’s my AdminController.cs

public ActionResult Index()
{
    return View("Index", "_LayoutAdmin");
}
 
1 Comment

Posted by on May 7, 2011 in General

 

Tags: , , ,

Place JavaScript Code Inside Head Tag in ASP.NET MVC 2 and MVC 3

ASP.NET MVC 2

To properly place JavaScript inside <head> tag in ASP.NET MVC 2, I just need to add ContentPlaceHolder control as my place holder for all JavaScript code from individual pages. So, in my Site.Master page, I have:

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="../../Scripts/Js/jquery-1.4.2.min.js"></script>
    <asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>

Then, in the view pages that refer to this master page, I can have:

<asp:Content ID="Content2" ContentPlaceHolderID="ScriptContent" runat="server">
    <script language="javascript" type="text/javascript">
        $(function () {});
    </script>
</asp:Content>

This way, my JavaScript code will fall inside <head> tag when rendered.

ASP.NET MVC 3

In ASP.NET MVC 3, this technique is still applicable when you use ASPX (C#) view engine. However, it doesn’t when Razor (CSHTML) view engine is used.

To properly place JavaScript code inside <head> tag in ASP.NET MVC 3 with Razor (CSHTML), add the “@RenderSection” inside <head> tag in your “_Layout.cshtml” file. Something like this:

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    @RenderSection("ScriptTag", false)
</head>

Then, in view page, you can just add the following code:

@section ScriptTag
{
    <script type="text/javascript" language="javascript">
        $(function () {});
    </script>
}

What “@RenderSection” gives you is sort of reference point that you can refer to from your view page with “@section” keyword following your section name that you define when you call “@RenderSection”. In this case, “ScriptTag” is my section name.

When the view is rendered, your JavaScript code will be inside <head> tag.

 
Leave a comment

Posted by on March 14, 2011 in General

 

Tags: , , , , ,

 
%d bloggers like this: