MVC 3 with Razor client-side validation

To Validation client Side on MVC you need to follow these steps

1. My web.config file has the following entries.
 <appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

2.The _Layout.cshtml has the following scripts or Required pages where you wanted to validate fields

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

3. My partial class has the following

public partial class Address
    {
        public class AddressMetaData
        {
            [DisplayName("Address Line 1")]
            [Required(ErrorMessage = "Address Line 1 is required")]
            [StringLength(100, ErrorMessage="Maximum of 100 characters")]
            public object AddressLine1 { get; set; }

            [DisplayName("Address Line 2")]
            [Required(ErrorMessage = "Address Line 2 is required")]
            [StringLength(100, ErrorMessage = "Maximum of 100 characters")]
            public object AddressLine2 { get; set; }

            [DisplayName("Address Line 3")]
            [Required(ErrorMessage = "Address Line 3 is required")]
            [StringLength(100, ErrorMessage = "Maximum of 100 characters")]
            public object AddressLine3 { get; set; }
        }
    }

4. And my Edit.cshtml view is so 

@model Grid.PolicyLocation
@{
ViewBag.Title = "Edit";
}
<h2>
  Edit Location
</h2>
@using (Html.BeginForm())
{
@Html.ValidationSummary("Please correct Errors")
<h3>
  Address
</h3>
<table class="noborder">
  <tr>
    <td class="noborder">
      @Html.LabelFor(model => Model.Address.AddressLine1)
    </td>
    <td class="noborder">
      @Html.EditorFor(model => model.Address.AddressLine1)
      @Html.ValidationMessageFor(model => model.Address.AddressLine1)
    </td>
  </tr>
  <tr>
    <td class="noborder">
      @Html.LabelFor(model => Model.Address.AddressLine2)
    </td>
    <td class="noborder">
      @Html.EditorFor(model => model.Address.AddressLine2)
      @Html.ValidationMessageFor(model => model.Address.AddressLine2)
    </td>
  </tr>
  <tr>
    <td class="noborder">
      @Html.LabelFor(model => Model.Address.AddressLine3)
    </td>
    <td class="noborder">
      @Html.EditorFor(model => model.Address.AddressLine3)
      @Html.ValidationMessageFor(model => model.Address.AddressLine3)
    </td>
  </tr>
</table>
} 

5. If on blur validation not work then only add this code

$(document).ready(function () {
            $('input[type=text]').blur(function () {
                $(this).valid();
            })
        })

MVC Interview Questions

What are the 3 main components of an ASP.NET MVC application?
1. M - Model
2. V - View
3. C - Controller

In which assembly is the MVC framework defined?
System.Web.Mvc

Is it possible to combine ASP.NET webforms and ASP.MVC and develop a single web application?
Yes, it is possible to combine ASP.NET webforms and ASP.MVC and develop a single web application.

What does Model, View and Controller represent in an MVC application?
Model: Model represents the application data domain. In short the applications business logic is contained with in the model.

View: Views represent the user interface, with which the end users interact. In short the all the user interface logic is contained with in the UI.

Controller: Controller is the component that responds to user actions. Based on the user actions, the respective controller, work with the model, and selects a view to render that displays the user interface. The user input logic is contained with in the controller.

What is the greatest advantage of using asp.net mvc over asp.net webforms?
It is difficult to unit test UI with webforms, where views in mvc can be very easily unit tested.

Which approach provides better support for test driven development - ASP.NET MVC or ASP.NET Webforms?
ASP.NET MVC

What are the advantages of ASP.NET MVC?
1. Extensive support for TDD. With asp.net MVC, views can also be very easily unit tested.
2. Complex applications can be easily managed
3. Seperation of concerns. Different aspects of the application can be divided into Model, View and Controller.
4. ASP.NET MVC views are light weight, as they donot use viewstate.

Is it possible to unit test an MVC application without running the controllers in an ASP.NET process?
Yes, all the features in an asp.net MVC application are interface based and hence mocking is much easier. So, we don't have to run the controllers in an ASP.NET process for unit testing.

Is it possible to share a view across multiple controllers?
Yes, put the view into the shared folder. This will automatically make the view available across multiple controllers.

What is the role of a controller in an MVC application?
The controller responds to user interactions, with the application, by selecting the action method to execute and alse selecting the view to render.

Where are the routing rules defined in an asp.net MVC application?
In Application_Start event in Global.asax

Name a few different return types of a controller action method?
The following are just a few return types of a controller action method. In general an action method can return an instance of a any class that derives from ActionResult class.
1. ViewResult
2. JavaScriptResult
3. RedirectResult
4. ContentResult
5. JsonResult

What is the significance of NonActionAttribute?
In general, all public methods of a controller class are treated as action methods. If you want prevent this default behaviour, just decorate the public method with NonActionAttribute.

What is the significance of ASP.NET routing?
ASP.NET MVC uses ASP.NET routing, to map incoming browser requests to controller action methods. ASP.NET Routing makes use of route table. Route table is created when your web application first starts. The route table is present in the Global.asax file.

What are the 3 segments of the default route, that is present in an ASP.NET MVC application?
1st Segment - Controller Name
2nd Segment - Action Method Name
3rd Segment - Parameter that is passed to the action method

Example: http://pragimtech.com/Customer/Details/5
Controller Name = Customer
Action Method Name = Details
Parameter Id = 5

ASP.NET MVC application, makes use of settings at 2 places for routing to work correctly. What are these 2 places?
1. Web.Config File : ASP.NET routing has to be enabled here.
2. Global.asax File : The Route table is created in the application Start event handler, of the Global.asax file.

What is the adavantage of using ASP.NET routing?
In an ASP.NET web application that does not make use of routing, an incoming browser request should map to a physical file. If the file does not exist, we get page not found error.

An ASP.NET web application that does make use of routing, makes use of URLs that do not have to map to specific files in a Web site. Because the URL does not have to map to a file, you can use URLs that are descriptive of the user's action and therefore are more easily understood by users.

What are the 3 things that are needed to specify a route?
1. URL Pattern - You can include placeholders in a URL pattern so that variable data can be passed to the request handler without requiring a query string.
2. Handler - The handler can be a physical file such as an .aspx file or a controller class.
3. Name for the Route - Name is optional.

Is the following route definition a valid route definition?
{controller}{action}/{id}
No, the above definition is not a valid route definition, because there is no literal value or delimiter between the placeholders. Therefore, routing cannot determine where to separate the value for the controller placeholder from the value for the action placeholder.

What is the use of the following default route?
{resource}.axd/{*pathInfo}
This route definition, prevent requests for the Web resource files such as WebResource.axd or ScriptResource.axd from being passed to a controller.

What is the difference between adding routes, to a webforms application and to an mvc application?
To add routes to a webforms application, we use MapPageRoute() method of the RouteCollection class, where as to add routes to an MVC application we use MapRoute() method.

How do you handle variable number of segments in a route definition?
Use a route with a catch-all parameter. An example is shown below. * is referred to as catch-all parameter.
controller/{action}/{*parametervalues}

What are the 2 ways of adding constraints to a route?
1. Use regular expressions
2. Use an object that implements IRouteConstraint interface

Give 2 examples for scenarios when routing is not applied?
1. A Physical File is Found that Matches the URL Pattern - This default behaviour can be overriden by setting the RouteExistingFiles property of the RouteCollection object to true.
2. Routing Is Explicitly Disabled for a URL Pattern - Use the RouteCollection.Ignore() method to prevent routing from handling certain requests.

What is the use of action filters in an MVC application?
Action Filters allow us to add pre-action and post-action behavior to controller action methods.

If I have multiple filters impleted, what is the order in which these filters get executed?
1. Authorization filters
2. Action filters
3. Response filters
4. Exception filters

What are the different types of filters, in an asp.net mvc application?
1. Authorization filters
2. Action filters
3. Result filters
4. Exception filters

Give an example for Authorization filters in an asp.net mvc application?
1. RequireHttpsAttribute
2. AuthorizeAttribute

Which filter executes first in an asp.net mvc application?
Authorization filter


What are the levels at which filters can be applied in an asp.net mvc application?
1. Action Method
2. Controller
3. Application
[b]Is it possible to create a custom filter?[/b]
Yes

What filters are executed in the end?
Exception Filters

Is it possible to cancel filter execution?
Yes

What type of filter does OutputCacheAttribute class represents?
Result Filter

What are the 2 popular asp.net mvc view engines?
1. Razor
2. .aspx

What symbol would you use to denote, the start of a code block in razor views?
@

What symbol would you use to denote, the start of a code block in aspx views?
<%= %>

In razor syntax, what is the escape sequence character for @ symbol?
The escape sequence character for @ symbol, is another @ symbol

When using razor views, do you have to take any special steps to proctect your asp.net mvc application from cross site scripting (XSS) attacks?
No, by default content emitted using a @ block is automatically HTML encoded to protect from cross site scripting (XSS) attacks.

When using aspx view engine, to have a consistent look and feel, across all pages of the application, we can make use of asp.net master pages. What is asp.net master pages equivalent, when using razor views?
To have a consistent look and feel when using razor views, we can make use of layout pages. Layout pages, reside in the shared folder, and are named as _Layout.cshtml

What are sections?
Layout pages, can define sections, which can then be overriden by specific views making use of the layout. Defining and overriding sections is optional.

What are the file extensions for razor views?
1. .cshtml - If the programming lanugaue is C#
2. .vbhtml - If the programming lanugaue is VB

How do you specify comments using razor syntax?
Razor syntax makes use of @* to indicate the begining of a comment and *@ to indicate the end. An example is shown below.
@* This is a Comment *@

JQuery getJSON call to MVC Controller

This can happen if the data return by the controller method is violating JSON format. You can try the following-

• Change ActionResult to JsonResult.
• Add [AcceptVerbs(HttpVerbs.Get)] to Filter method.
• Add {} as second paramenter of getJSON as it takes three parameter.

Its working fine with the following code-

    [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult Filter()
    {
       var myData = new[] { new { first = "Murli", last = "D" }, new { first = "Deepak", last = "Tripathi" } };
       return Json(myData, JsonRequestBehavior.AllowGet);
    }

<script type="text/javascript">
$(document).ready(
    function () {
        $.getJSON(
        "/Account/Filter", {}, 
        function (myData) {
                alert(myData);
        });
});
</script>

Call PageMethod From JavaScript in ASP.NET Ajax

Most of time we need to call page method(server side code) by client side script(JavaScript) without post back. I will accomplish this using the Page Methods feature. To do this we are using ASP.Net Ajax. Using page method a JavaScript knowledge will help.

Create a script manager control on your form, to use PageMethods,we will need to set the EnablePageMethods property to true of ScriptManager.
Enable Page Methods on your ScriptManager

<asp:ScriptManager ID="ScriptManager1" runat="server"  EnablePageMethods="True"> 
      </asp:ScriptManager>

Create static method and set WebMethod attribute
Now we create a static method on our code behind file. It must marked with the WebMethod attribute, if we are not using WebMethod attribute we can't able to call this page method via javascript.To use WebMethod attribute we need to add System.Web.Services namespace.

using System.Web.Services;

[WebMethod]
public static bool WelcomeMessage(string name)
{
    if (name == "ASP" || name == "C#" || name == "Ajax" || name ==     "JQuery")
        return true;
    else
        return false;
}

Call from JavaScript
Call this method from JavaScript as follows:

<script type="text/javascript">
var divWelcomeMessage =document.getElementById('divWelcomeMessage');

function CallMethod(username) 
{
    //initiate the Ajax page method call
    //alert(username);
    PageMethods.WelcomeMessage(username,OnSucceeded);
    
}
// Callback function invoked on successful completion of the page method.
function OnSucceeded(result, userContext, methodName) 
{
    if (methodName == "WelcomeMessage")
    {
        if(result==true)
            divWelcomeMessage.innerHTML = "Welcome Dear";
        else 
            divWelcomeMessage.innerHTML = "Go from here";
    }
}
</script>

We call this JavaScript on the textbox keyup event as follows.

<input type="text" id="txtusername" runat="server"onkeyup="CallMethod(this.value);"/
><div id="divWelcomeMessage" /gt;

How is ASP.NET MVC different from ASP.NET WebForms

ASP.NET WebForms	ASP.NET MVC
Uses the ‘Page Controller’ pattern. Each page has a code-behind class that acts as a controller and is responsible for rendering the layout.	Uses the ‘Front Controller’ pattern. There is a single central controller for all pages to process web application requests and facilitates a rich routing architecture
Uses an architecture that combines the Controller (code behind) and the View (.aspx). Thus the Controller has a dependency on the View. Due to this, testing and maintainability becomes an issue.	ASP.NET MVC enforces a "separation of concerns". The Model does not know anything about the View. The View does not know there’s a Controller. This makes MVC applications easier to test and maintain.
The View is called before the Controller.	Controller renders View based on actions as a result of the User Interactions on the UI.
At its core, you ‘cannot’ test your controller without instantiating a View. There are ways to get around it using tools.	At its core, ASP.NET MVC was designed to make test-driven development easier. You ‘can’ test your Controller without instantiating a View and carry out unit-tests without having to run the controllers in an ASP.NET process.
WebForms manage state by using view state and server-based controls.	ASP.NET MVC does not maintain state information by using view state.
WebForms supports an event-driven programming style that is like Windows applications and is abstracted from the user. The State management is made transparent by using sessions, viewstate etc. In the process, the HTML output is not clean making it difficult to manage later. The ViewState also increases your page size.	In ASP.NET MVC, the output is clean and you have full control over the rendered HTML. The orientation is towards building standard compliant pages and provides full control over the behavior of an application.
Deep understanding of HTML, CSS and JavaScript is not required to a large extent since the WebForm model abstracts a lot of these details and provides automatic plumbing. While abstracting details to provide ease of use, sometimes a solution is overcomplicated, than it needs to be.	A thorough understanding of how HTML, CSS and JavaScript work together is required. The advantage is you can do a lot of jQuery and AJAX stuff in an efficient and simple manner than you would do in an ASP.NET application.
WebForms can drastically reduce time while building up intranet and internet applications that use a lot of controls (drag and drop model). Although this is true for development, a lot of time is spent later to code around limitations.	You lose the 'drag and drop' quick model of building your web applications. The focus is on control over the application behavior and test-driven development. The model is extensible and you do not have to spend time working around limitations.
Relatively simple to learn and pickup. Works very well for developers who initially have trouble with the HTTP/HTML model and are coming from a similar WinForms oriented event model.	There is a learning curve to understand the why, when and how of ASP.NET MVC.
Lesser amount of code is required to build webapps since a lot of components are integrated and provided out of the box. You can also use a lot of data controls provided out of the box that rely on ViewState.	Since the application tasks are separated into different components, amount of code required is more. Since ASP.NET MVC does not use ViewState, you cannot use Data controls like GridView, Repeater.
Works very well for small teams where focus is on rapid application development	Works well for large projects where focus in on testability and maintainability.

Anonymous Methods

Delegates are defined as "a reference type that can be used to encapsulate a method with a specific signature"

The use of delegates is involved in event handlers, callbacks, asynchronous calls and multithreading, among other uses.

 

Before C# 2.0, the only way to use delegates was to use named methods. In some cases, this results in forced creation of classes only for using with delegates. In some cases, these classes and methods are never even invoked directly.

 

C# 2.0 offers an elegant solution for these methods described above. Anonymous methods allow declaration of inline methods without having to define a named method.

This is very useful, especially in cases where the delegated function requires short and simple code. Anonymous methods can be used anywhere where a delegate type is expected.

 

Anonymous Method declarations consist of the keyword delegate, an optional parameter list and a statement list enclosed in parenthesis.

 

Code Snippet: Event Handler (without using anonymous methods)

 
...

btnSave.Click += new EventHandler (btnSave_Click);

...

 

void AddClick(object sender, EventArgs e)

{

SaveChanges();

lblStatus.Text = "Your changes have been saved";

}

Code Snippet: Event Handler (using anonymous methods)

btnSave.Click += delegate { SaveChanges(); lblStatus.Text = "Your changes have been saved"; };

Code Snippet:  Event Handler using Anonymous Methods, with a parameter list 

btnSave.Click += delegate(object sender, EventArgs e)

{

MessageBox.Show(((Button)sender).Text);

SaveChanges();

MessageBox.Show("Your changes have been saved");

}

Anonymous methods can be specified with parameters enclosed in parenthesis, or without parameters, with empty parenthesis. When parameters are specified, the signature of the anonymous method must match the signature of the delegate. When the delegate has no parameters, empty parenthesis are specified in the anonymous method declaration. When an anonymous method is declared without parenthesis, it can be assigned to a delegate with any signature. 

Note that method attributes cannot be applied to Anonymous methods. Also, anonymous methods can be added to the invocation list for delegates but can be deleted from the invocation list only if they have been saved to delegates.

 

An advantage offered with the use of anonymous methods is that they allow access to the local state of the containing function member.

 

Conclusion

 

Anonymous methods offer a simple and elegant solution in many situations. In the next version of C#, (C# 3.0), anonymous methods are evolved into Lambda Expressions used in Language Integrated Query (Linq).

 

Disclaimer

This article is for purely educational purposes and is a compilation of notes, material and my understanding on this subject. Any resemblance to other material is an un-intentional coincidence and should not be misconstrued as malicious, slanderous, or any anything else hereof 

3 ways to define a JavaScript class

Introduction

JavaScript is a very flexible object-oriented language when it comes to syntax. In this article you can find three ways of defining and instantiating an object. Even if you have already picked your favorite way of doing it, it helps to know some alternatives in order to read other people's code.
It's important to note that there are no classes in JavaScript. Functions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. Everything is an object. And when it comes to inheritance, objects inherit from objects, not classes from classes as in the "class"-ical languages.

1. Using a function

This is probably one of the most common ways. You define a normal JavaScript function and then create an object by using the new keyword. To define properties and methods for an object created using function(), you use the this keyword, as seen in the following example.

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}

// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

To instantiate an object using the Apple constructor function, set some properties and call methods you can do the following:

var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

1.1. Methods defined internally

In the example above you see that the method getInfo() of the Apple "class" was defined in a separate function getAppleInfo(). While this works fine, it has one drawback – you may end up defining a lot of these functions and they are all in the "global namespece". This means you may have naming conflicts if you (or another library you are using) decide to create another function with the same name. The way to prevent pollution of the global namespace, you can define your methods within the constructor function, like this:

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}

Using this syntax changes nothing in the way you instantiate the object and use its properties and methods.

1.2. Methods added to the prototype

A drawback of 1.1. is that the method getInfo() is recreated every time you create a new object. Sometimes that may be what you want, but it's rare. A more inexpensive way is to add getInfo() to the prototype of the constructor function.

function Apple (type) {
    this.type = type;
    this.color = "red";
}

Apple.prototype.getInfo = function() {
    return this.color + ' ' + this.type + ' apple';
};

Again, you can use the new objects exactly the same way as in 1. and 1.1.

2. Using object literals

Literals are shorter way to define objects and arrays in JavaScript. To create an empty object using you can do:
var o = {};
instead of the "normal" way:
var o = new Object();
For arrays you can do:
var a = [];
instead of:
var a = new Array();
So you can skip the class-like stuff and create an instance (object) immediately. Here's the same functionality as described in the previous examples, but using object literal syntax this time:

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function () {
        return this.color + ' ' + this.type + ' apple';
    }
}

In this case you don't need to (and cannot) create an instance of the class, it already exists. So you simply start using this instance.

apple.color = "reddish";
alert(apple.getInfo());

Such an object is also sometimes called singleton. It "classical" languages such as Java, singleton means that you can have only one single instance of this class at any time, you cannot create more objects of the same class. In JavaScript (no classes, remember?) this concept makes no sense anymore since all objects are singletons to begin with.

3. Singleton using a function

Again with the singleton, eh?
The third way presented in this article is a combination of the other two you already saw. You can use a function to define a singleton object. Here's the syntax:

var apple = new function() {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
}

So you see that this is very similar to 1.1. discussed above, but the way to use the object is exactly like in 2.

apple.color = "reddish";
alert(apple.getInfo());

new function(){...} does two things at the same time: define a function (an anonymous constructor function) and invoke it with new. It might look a bit confusing if you're not used to it and it's not too common, but hey, it's an option, when you really want a constructor function that you'll use only once and there's no sense of giving it a name.

Summary

You saw three (plus one) ways of creating objects in JavaScript. Remember that (despite the article's title) there's no such thing as a class in JavaScript. Looking forward to start coding using the new knowledge? Happy JavaScript-ing!