Asp.Net MVC 4 ?

Past three years I have been working with ASP.NET MVC3 and it is very good frame work to develop web application .Now Microsoft  has released ASP.NET MVC4 Framework .So let see what they introduce for us.

Mobile Application

ASP.NET MVC4 introduces new project template for build mobile web application .It has same structure of the ASP.NET MVC and a lot of handful CSS and JavaScript files are now inside, including jQuery Mobile. So we can develop mobile browser compatible applications easily  .

Display Modes

One new features of ASP.NET MVC 4 is support for display modes. This means that you can conditionally show different output to different user agents like desktop and mobile browsers. So we can develop two version of the same page.

For example, if a desktop browser requests the Home page, the application might use the Views\Home\Index.cshtml template. If a mobile browser requests the Home page, the application might return the Views\Home\Index.mobile.cshtml template.

Web API

ASP.NET Web API is a framework for building and consuming HTTP services that can reach a broad range of clients including browsers, phones and tablets. We  can use XML or JSON or something else with your API. JSON is nice for mobile apps with slow connections, for example. You can call an API from jQuery and better utilize the client's machine and browser.

Bundling and Minification

The new bundling feature in ASP.NET  packs a set of JS or CSS files into a single element, and reduces its size by minifying the content (i.e. removing not required blank spaces, removing comments, reducing identifiers). This can help to reduce the file size and make the site perform faster.

OAuth and OpenID

 ASP.NET MVC4 include library that enables users to log in with credentials from an external provider, such as Facebook, Twitter, Microsoft, or Google, and then integrate some of the functionality from those providers into your web application.

Enhanced support for Asynchronous methods

The .NET Framework 4 introduced an asynchronous programming concept referred to as a Task and ASP.NET MVC 4 supports Task. Tasks are represented by theTask  type and related types in the System.Threading.Tasks namespace. The .NET Framework 4.5 builds on this asynchronous support with  the await and async keywords that make working with Task objects much less complex than previous asynchronous approaches.

Add Controller to any project folder

You can now right click and select Add Controller from any folder in your MVC project. This gives you more flexibility to organize your controllers however you want, including keeping your MVC and Web API controllers in separate folders.

Database Migrations

ASP.NET MVC 4 projects now include Entity Framework 5. One of the great features in Entity Framework 5 is support for database migrations. This feature enables you to easily evolve your database schema using a code-focused migration while preserving the data in the database.

Java script online editors/web playground

Today I’m going to share information regarding tools which I use for test my Javascript/HTML/CSS  functionality.

jsfiddle(http://jsfiddle.net)

This is very useful web playground which can be used to simulate/test our javascript function .

jsbin(jsbin.com)

This is also  web playground which can be used to simulate/test our javascript function .

Why should we learn advanced Java Script?

Although, JavaScript introduces as web scripting language in 1995 by Brendan Eich (employee of Netscape), JavaScript is not only a web scripting language further; it can be used as server side programming language (node.js), Client Application development language (windows 8)

Some Characterizes of Javascript

Prototype-based-( not as Object Oriented Language)
Dynamic (can be drop property in any time in the cycle)
Weekly Type -(every type variable declare as var and function can receive any type variable)

JavaScript Basic

Declaring array:

var myArray= []

Creating empty Object:

var myStudentObject={};
var myStudentObject=new Object();
var myStudentObject=Object.create(null);

Initialization object

myStudentObject.name=”Dinesh”;
or
var myStudentObject= {name:”Dinesh”}

Functions

How to declared function

function firstFunction (){
}
or
var secondFunction=function(){
}

arguments –Key word

We can pass any arguments to function without declare and we can use arguments key word which inherit for every function to retrieve those arguments.

Ex:

function addNumber (){
var answer=arguments[0]+ arguments[1];
return answer;
}

Then we can call it as

firstFunction(1,2);

Method

var Operation={
add: function addNumber (){
var answer=arguments[0]+ arguments[1];
return answer;
}
};

//call it
var x= Operation.add(2,3)

Immediate Function

These function execute immediately .

(function(){
}())
Or
(function(){})();

Passing parameters to immediate  function
(function(a,b){
}(1,2))

DOM Selector

var a=documents.getElementsById(“pic”);//
 var q=documents.quarySelector(“h2”);//get first element
var list=documents.quarySelectorAll(“h2”);//get all elements

MVC3 TryUpdateModel() -Update Model for Edit

When we want to update model with edited values we can use TryUpdateModel() method.

example

[Httppost]
public ActionResult edit(int id)
{
    var user= UserRepository.GetUser(id);

    if (TryUpdateModel(user))
    {
        UserRepository.save();
    }

    return view()
}

But some times when we use TryUpdateModel() the model does not update that mean the method return false.So in that case we need to find out the error so we can do that as flowing it will return the list of errors and their corresponding properties.

[Httppost]
public ActionResult edit(int id)
{
    var user= UserRepository.GetUser(id);

    if (TryUpdateModel(user))
    {
        UserRepository.save();
    }
else{
//the tru update method return false
    
    var errors = ModelState
    .Where(m => m.Value.Errors.Count > 0)
    .Select(m => new { m.Key, m.Value.Errors })
    .ToArray();

}

    return view()
}

Why TryUpdateModel() return false ?

Most of the time the TryUpdateModel() method return false when we have not add editable field or hidden filed for all the required fields to view page.
so we can simply add hidden filed to the view which we don't need to change during the update method.

so My user Model

Public Class User{
[Requried]
public int UserId{get;set}
[Requried]
public string UserName {get;set}
[Requried]
pubic string UserCode{get;set}

pubic string Description{get;set}

public string Address{get;set}

}

So if  I want to update UserDescription in my edit page
I have to put UserId,UserName and UserCode as Hidden filed

But if our model content large number of fields and we only need to update few of fields in that case we can do it by specify the fields which we need to update as following

TryUpdateModel(model, new [] {"Description", "Address"}); // In this case the TryUpdate() only  check vaidation "Description","Address"

And also we can do it as fallowing by mentioning the field which should not update

TryUpdateModel(model, null, null, new [] {"UserId","UserName ","UserCode"});//In this case the TryUpdate() ignore "UserId","UserName" and "Usercode" vaidation

Remove Validation Error messege when click Reset Button in MVC3 Razor

The reset button does not clear validation message in mvc3 by default so  we need to do this with jQuery.The fallowing function clear validation messages in MVC3 pages.
.

jQuery(document).ready(function () {

            $("input:reset").click(function () {
                $('.field-validation-error')
               .removeClass('field-validation-error')
                .addClass('field-validation-valid');

                $('.input-validation-error')
                .removeClass('input-validation-error')
                 .addClass('valid');
            });

  });

MVC 3 Razor TextBox max length

@Html.TextBoxFor(model => model.Organization.OrganizationName, new { maxlength = 50 }) 

MVC 3 Razor Editor Template

Editor Template is very useful future in Asp.net MVC3 Framework.With Editor Template we can create template for model and  It  can be access easily in the application (like user controller in asp.net).
So I'm going to create Editor Template for Book Model in my application.
Book.cs

public class Book
{
public int BookId { get; set; }
public string BookName { get; set; }
public string Description { get; set; }
}

Then I'm going to create folder  as EditorTemplates in Shared folder  and add new view Book.cshtml as following.(The Name of the Template should be same as Class Name)
 .

@model MySimpleEditorTemplate.Models.Book


@Html.DisplayFor(p => p.BookId)  
@Html.EditorFor(p => p.BookId)
@Html.DisplayFor(p => p.BookName)
@Html.EditorFor(p => p.BookName)
@Html.DisplayFor(p => p.Description)
@Html.EditorFor(p => p.Description)

Then in view page simply we can add editor for book as

@Html.EditorFor(model => model.Book) 

then it will display above block