Pages

Wednesday, June 29, 2011

The simple answer to the above question is by using the ‘asp:ServiceReference’ tag inside ‘asp:scriptmanager’ tag as shown in the below code snippet. Inside the ‘servicereference’ tag provide the ASMX file name.

Following is the video for consuming webservices in AJAX: -

Now let’s go a for a long answer and a step by step answer.

Normally consumption of web services happens as shown in the below figure. The browser Ajax controls calls the ASP.NET code and the ASP.NET code consumes the web service. But there are scenarios where you would like to call the web services directly from the Ajax JavaScript functions rather than calling via the behind code. This article will demonstrate how we can achieve the same.

Step 1: Create your Customer Class

The first step is to create the customer class as shown below. So ourcustomer class has 4 properties on customer id, first name, address and designation.

Step 2: Create your Web Service

The next step is we need to create the web service which exposes the customer class to our UI. Below is a simple web service which has encapsulated customer collection. In the constructor, we are loading some dummy data into the list of customers as shown in the below code snippet:

We are also exposing two functions through the web service, one which gives out a list of customers and another which gives out individual customer data based on customer id.

Step 3: Reference your Web Service using the asp:servicereference

Using the ‘asp:ServiceReference’, we will then point the path to the ASMX file as shown in the below code snippet. This will generate the JavaScript proxy which can be used to call the customer object.

Step 4: Call the Webservice and the JavaScript Code

Once you have defined the proxy, you can now call the ‘Customer’ proxy directly to make method calls.

When you call the JavaScript proxy object, we need to provide three functions; the first function (‘LoadCustomerToSelectOption’) will be called when the web service finishes and returns data. The data will be returned in the fill variable which will then be looped and added to the customer combo box.

Tuesday, June 28, 2011

There are three ways provided by Silverlight for layout management is Canvas, Grid and Stack panel. Each of these methodologies fit into different situations as per layout needs.

Canvas – Absolute Positioning

Canvas is the simplest methodology for layout management. It supports absolute positioning using ‘X’ and ‘Y’ coordinates. ‘Canvas.Left’ helps to specify the X co-ordinate while ‘Canvas.Top’ helps to provide the ‘Y’ coordinates.
Below is a simple code snippet which shows how a rectangle object is positioned using ‘Canvas’ on co-ordinates (50,150).

Below is how the display looks like. When you the run the code, the XAML viewer will position the rectangle object on absolute ‘X” and ‘Y’ coordinates.

Grid – Table layout

Grid layout helps you position your controls using rows and columns. It’s very similar to table defined in HTML.

Above is a simple table with two columns and two rows defined using Grid. We have shown how the table display looks like. Using the Grid.ColumnDefinition, we have defined two columns and using Grid.RowDefinition, we have defined two rows. We have then created 4 text blocks which are then specified in each section using Grid.Column and Grid.Row. For instance, to place in the first column, we need specify the Grid.Column as 0 and Grid.Row as 0. We have followed the same pattern for everyone and you can see that all the textblocks are placed in the
appropriate sections.

Stack – One Above the Other

As the name says, so the behavior. Stack allows you to arrange your UI elements vertically or horizontally.

For instance, above are 4 elements which are arranged in a stack panel element. You can see how the stack aligns / stacks the elements one above other. You can also stack the UI elements horizontally or vertically depending on the nature of your layout.
Following is the video which demonstrates simple animation in SilverLight:
-

Monday, June 27, 2011

Three ways by which you can handle concurrency in WCF is Single, multiple and reentrant. To specify WCF concurrency we need to use the ‘ServiceBehavior’ tag as shown below with appropriate ‘ConCurrencyMode’ property value.

Figure:

Single: - A single request has access to the WCF service object at a given moment of time. So only one request will be processed at any given moment of time. The other requests have to wait until the request processed by the WCF service is not completed.

Multiple: - In this scenario multiple requests can be handled by the WCF service object at any given moment of time. In other words request are processed at the same time by spawning multiple threads on the WCFserver object. So you have great a throughput here but you need to ensure concurrency issues related to WCF server objects.Reentrant: - A single request thread has access to the WCF service object, but the thread can exit the WCF service to call another WCF service or can also call WCF client through callback and reenter without deadlock.

As the article name says learn MVC, so the agenda is simple we are going to learn ASP.NET MVC  in 7 days.
The way we will learn MVC in this series of article is by doing Labs, looking at detail steps of how to achieve those labs and also looking at demonstrative videos.

This complete article is divided in to 7 days with 42 hands on labs and every day we will do 6 labs which will help us achieve our goals.

So get ready for day 1. In day1 below is our agenda we will start with introduction, do a simple hello world and finally in the 6th lab we will create a simple customer data entry screen using HTML helper classes.

I am sure all ASP.NET love the behind code concept. Accepting something new like MVC will not convince them. So let’s analyze the problems with the current behind code stuff.

When we generally talk about ASP.NET application built on tiered architecture they are divided in four parts UI (ASPX pages), behind code (ASPX.CS pages), Middle tier (.NET classes) and finally Data layer.

If you see from the aspect of code distribution major code which has logic is in the middle tier or in the behind code (APX.CS files). The UI or ASPX files are HTML files which is more of UI design and data access logic are pretty much standard components like enterprise data blocks, entity data contexts etc.

From the aspect of unit testing we can exclude the data logic and the UI HTML. The data logic classes are already time tested components like enterprise
data block, entity data context or LINQ data context. So we really do not have to put lot of effort on testing the DAL separately. In case you have custom data access layer it will be still easy to test them as they are simple .NET classes.

There is no logic in testing on ASPX HTML as such it’s more of look and feel.

The middle tier is again a simple .NET class like data logic so you can easily do unit testing using VSTS or NUNIT.

Now comes the most important one the behind code. The behind code has lot of action and testing them is one of the most important things. The only way to invoke these codes are by doing manual test. From a longer run perspective this would not be a great choice.

Even though www.microsoft.com always boasted about how the ASP.NET behind code was separate from the UI, in practical sense it’s very difficult to decouple an ASP.NET behind code and do unit testing on them.

The ASP.NET behind code is completely tied up with ASP.NET Httpcontext object which makes unit testing very difficult.

Just think how do I unit test the below behind ASP.NET code. How do I create a Http context object , how do I simulate the sender and eventargs objects of the button clicks etc.

FYI: - Many developers would talk about mock test, rhino mocks etc but still its cryptic and the complication increases with session variables, view data objects, ASP.NET UI controls creating further confusion.

As said previously the ASPX and the ASPX.CS cannot be decoupled in reality thus reducing reusability. Yes, Microsoft did said first that the behind code is different and the UI is different but then they are probably separate physical files only and one cannot just exist without other.

For instance let’s say the same button click code when called via HTTP POST should display using displayinvoice.aspx and when called via HTTP GET should display in tree view. In other words we would like to reuse the behind code. Just think how can we do the same using the current behind code.

That’s where MVC comes to rescue. The behind code is moved to a simple .NET class called as controller. Any user request first comes to the controller class, the controller class then invokes the model and attaches the model to the view for display to the end user.

As this controller class is a simple .NET class we can reuse and also do unit testing easily. So let’s see how we can create MVC application using MVC template provided by visual studio.

• Visual Studio 2008 SP1 (any edition) or the free Visual Web Developer 2008 Express with SP1. These do not include ASP.NET MVC 2 by default; you must also download and install ASP.NET MVC 2 from http://www.asp.net/mvc/ .

So once you have all your pre-requisite its time to start with the first lab.

Now that we have the controller we need to go and add the view. So click on the Index function which is present in the control and click on add view menu asshown in the below figure.

The add view pops up a modal box to enter view name which will be invoked when this controller is called as shown in the figure below. For now keep the view name same as the controller name and also uncheck the master page check box.

Once you click on the ok button of the view, you should see a simple ASPX page with the below HTML code snippet. In the below HTML code snippet I have added “This is my first MVC application”.

Now that we have created a simple MVC hello world, it’s time to see how we can pass data from controllers to views. The first hit comes to the controller
which will load your business objects or model and you would like to transfer these objects to the view to display them.

The controller gets the first hit and loads the model. Most of the time we would like to pass the model to the view for display purpose.
As an ASP.NET developer your choice would be to use session variables, view state or some other ASP.NET session management object.

The problem with using ASP.NET session or view state object is the scope. ASP.NET session objects have session scope and view state has page scope. For MVC we would like to see scope limited to controller and the view. In other words we would like to maintain data when the hit comes to controller and reaches the view and after that the scope of the data should expire.

That’s where the new session management technique has been introduced in ASP.NETMVC framework i.e. ViewData.

Below is a simple youtube video which demonstrates the lab for view data. In this video we will see how we can share data between controller and the view
using view data. So we will create a simple controller, record the current data in a view data variable and then display the same in the view using the percentage tag.

The next thing is to display data in the view by using the percentage tag. One important point to note is the view does not have a behind code. So to display the view we need to use the <%: tag in the aspx page as shown in the below code snippet.

The first step is to create a simple customer model which is nothing but a class with 3 properties code, name and amount. Create a simple MVC project, right click on the model folder and click on add new item as shown in the below figure.

From the templates select a simple class and name it as customer.

Create the class with 3 properties as shown in the below the code snippet.

The next step is to add the controller and create a simple action display customer as shown in the below code snippet. Import the model namespace in the controller class. In the action we created the object of the customer class, flourished with some data and passed the same to a view named as “DisplayCustomer”

We need to now join the points of MVC by creating views. So right click on the view folder and click add view. You should see a drop down as shown in the below figure. Give a view name, check create a strongly typed view and bind this view to the customer class using the dropdown as shown in the below figure.

The advantage of creating a strong typed view is you can now get the properties of class in the view by typing the model and “.” as shown in the below figure.

Below is the view code which displays the customer property value. We have also put an if condition which displays the customer as privileged customer if above 100 and normal customer if below 100.

In this sample we flourished the customer object from within the controller,in the next lab we will take data from an input view and display the same. Inother words we will see how to create data entry screens for accepting data from views.

Every project small or big needs data entry screens. In this lab we will create a simple customer data entry screen as shown in the below figure using MVC template.

As soon as the end user enters details and submits data it redirects to a screen as shown below. If he entered amount is less than 100 it displays normal customer or else it displays privileged customer.

The first step is to create the data entry page using the simple HTML form action tag as shown in the below code snippet. The most important point to note in the below code snippet is that the action is pointing to the controller action i.e ‘DisplayCustomer’.

The above defined form action will post to the controller class and on the function “DisplayCustomer”. So we need to get the data from the HTML controls, flourish the object and send the object to the view.

Below is the code snippet of displaycustomer which flourishes the customer object by collecting data from request.form and sends the object to the view ‘displaycustomer.

The next step is to create the “DisplayCustomer” view.So right click on the view folder and click add view. You should see a drop down as shown in the below figure. Give a view name, check create a strongly typed view and bind this view to the customer class using the dropdown as shown in the below figure.

The advantage of creating a strong typed view is you can now get the properties of class in the view by typing the model and “.” as shown in the below figure.

Below is the view code which displays the customer property value. We have also put an if condition which displays the customer as privileged customer if above 100 and normal customer if below 100.

In this lab we created a simple data entry screen which helped us flourish the customer object. This customer object was then passed to the view for display.
If you closely watch the current lab we have done lot of coding i.e. creatingthe HTML screens , flourishing the object etc. It would be great if there wassome kind of automation. In the next lab we see how HTML helper classes help tominimize many of these manual coding and thus increasing productivity.

In our previous lab we created a simple customer data entry screen. We completedthe lab successfully but with two big problems:-
• The complete HTML code was written manually. In other words, less productive. It’s like going back to dark ages where developers used to write HTML tags in notepad.

HTML helper classes have readymade functions by which you can create HTML controls with ease. Go to any MVC view and see the intellisense for HTML helper class you should see something as shown in the below figure.

By using HTML helper class you can create any HTML control like textbox, labels, list box etc just by invoking the appropriate function.

In order to create the form tag for HTML we need to use “Html.BeginForm” , belowgoes the code snippet for the same.

The final thing is the controller code. The controller code now becomes very simple. The customer object will be auto flourished as we have used the HTML helper classes. You will create the controller class as we did in Lab 4 but we do not need to write any kind of code for connecting the HTML screens with controller, it’s all hidden and automated.

In the next labs we will talk about URL routing, ease of MVC unit testing, MVC Controller attributes and lot more. The next lab will bit more advanced as compared to the first day, so take rest and I need to work hard to get you the second day labs.

For instance when the below code runs the first two variables i.e. “i” and “y” are stored in a stack and the last variable “o” is stored in heap.

void MyFunction()
{
int i = 1; // This is stored in stack.
int y = i; // This is stored in stack.
object o = null; // This is stored in heap.
} // after this end the stack variable memory space is reclaimed while //
the heap memory is reclaimed later by garbage collector.

Value types contain actual data while reference types contain pointers and the pointers point to the actual data.

Value types are stored on stack while reference types are stored on heap. Value types are are your normal data types like int , bool , double and reference types are all objects.

When value type is moved to a reference type it’s called as boxing. The vice-versa is termed as unboxing.

Attaching to the above one more c# interview which comes up is What is boxing and unboxing , below is the video which explains the same.

Subscription Package for fundamentals and Interview preparation

which consist of .NET, C#, ASP.NET, SQL Server, WCF, Design Patterns, SilverLight, LINQ, SharePoint, Azure videos read details of subscription Also want to inquire more then call us on +91-22-66752917/mail us on questpond@questpond.com. Simply click to .