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

Accsess The Magento Core API With Dot net technologies

Magento is one of the most popular e-commerce platforms.which based  on PHP and Mysql.Magento Core API supports both SOAP and XML RPC protocols. The API is permission based and allows access to the Customer, Catalog and Order modules of Magento. Please reference the documentation for more information.
This article I am going to explaining How to access magento web service from Dot net Technologies .
we can access magento soap api with following url.
http://mymagento.com/api/v2_soap?wsdl (You can see wsdl definition by typing this url in web browser).
So let see how to display Magento customer list in my WindowsFormsApplication project.
To consume to the magento web service in our application we should add web Reference by rigth click on solution .

In the web reference dialog box type the magento web service URL (http://mymagento.com/api/v2_soap?wsdl) and click Go button then available service method display as following screen.
Then we can change the web service name and click Add Refference button.

 By doing above steps,we can generate  the web service proxy .
C# code to retrieve  customer list.

 using Magento.com.mymagento

public void  showCustomrs(){
   MagentoService ms = new MagentoService();
   string sesion= ms.login("Dinesh", "123456");
   filters myfilter=new filters();//filter criteriya
   customerCustomerEntity[] cusls= ms.customerCustomerList(sesion,myfilter);//get customers
   dgCutomer.ItemsSource = cusls; //display in grid
}