VB .Net Developer

10 - Passing user input to backend using Ajax

2009-05-11T13:10:00.001-07:00

In previous article, we can successfully make use of the Ajax technique to retrieve data from database and create new UI element in Web page with Ajax. In this article we will try to pass some user input to data access layer so that it can be used as parameter to retrieve data or it can be save in database.

1. Open the DemoADL project and modify the DemoDB.vb as following

======================================
Imports System.Data.SqlClient

Public Class DemoDB

Public sDiscountType As String
Public sStoreID As String

Public iPageNo As Integer = 1
Public iPageSize As Integer = 3

Public arrDiscount As New List(Of DemoDB)

Public Function GetRecords() As DemoDB

'Dim dbConnection As SqlConnection
'Dim sqlCommand As SqlCommand
'Dim dr As SqlDataReader

'dbConnection = New SqlConnection("server=localhost;Trusted_Connection=true;database=pubs")
'Try
' dbConnection.Open()
' sqlCommand = New SqlCommand("Select * from discounts", dbConnection)
' dr = sqlCommand.ExecuteReader()
' Dim i As Integer
' i = 0
' While dr.Read()
' i = i + 1
' Dim newRec As New DemoDB()
' arrDiscount.Add(newRec)
' newRec.sDiscountType = dr(0).ToString()
' newRec.sStoreID = dr(1).ToString()
' End While
' dr.Close()
' dbConnection.Close()
'Catch e As Exception
'End Try

'Return Me

Try
Dim i As Integer
i = 0
While i < iPageSize
i = i + 1
Dim newRec As New DemoDB()
arrDiscount.Add(newRec)
newRec.sDiscountType = "Test Discount Type " & i.ToString & " at Page No " & iPageNo
newRec.sStoreID = "Test Store ID " & i.ToString
End While
Catch e As Exception
End Try

Return Me

End Function

End Class

======================================

Compile this project.

2. Open the Service project using VWD 2008 express edition and update the DemoDAL.dll reference by right click the dll in the solution window and click Update Reference menu.

3. Double click the Service.vb and change the web service as following.

====================================

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports DemoDAL.DemoDAL

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' _
_
_
_
Public Class Service
Inherits System.Web.Services.WebService

_
Public Function HelloWorld() As String
Return "Hello World"
End Function

_
Public Function SayHelloFromDAL() As String
Dim obj As New DemoDAL.DemoDAL()
Return obj.SayHello()
End Function

_
Public Function GetRecords(ByRef obj As DemoDAL.DemoDB) As DemoDAL.DemoDB
Return obj.GetRecords()
End Function

End Class

====================================

The web service method GetRecords now accept a DemoDB object as a ByRef parameter. Therefore any change at DAL layer will be returned to the caller.
Compile the web service project and restart the web service by press F5 key.

4. Now open the ServiceAgent project using VB 2008 express edition. Update the Service reference to the Service we just started in step 3. Now double click the ServiceAgent.vb and change the code as following.

======================================

Imports ServiceAgent.DemoWebService

Public Class ServiceAgent

Public Function HelloFromServiceAgent()
Dim obj As DemoWebService.ServiceSoapClient
obj = New DemoWebService.ServiceSoapClient()
Return obj.SayHelloFromDAL()
End Function

Public Function GetRecords(ByRef demoDB As DemoWebService.DemoDB) As DemoWebService.DemoDB
Dim obj As DemoWebService.ServiceSoapClient
obj = New DemoWebService.ServiceSoapClient()
obj.GetRecords(demoDB)
Return demoDB
End Function

End Class

======================================

Similarly we are change the GetRecords function to accept DemoDB object as a ByRef parameter and call the web service with the DemoDB object.

Now rebuild this project.

5. Now open the DemoSite project using VWD 2008 and update the web service reference and the ServiceAgent reference. Then double click the Default.aspx.vb to modify the code that calls the GetRecord function and because DemoDB parameter is required by the function. We should call the GetRecords() function using following code.

=============================

Dim obj As ServiceAgent.DemoWebService.ServiceSoapClient
obj = New ServiceAgent.DemoWebService.ServiceSoapClient()

Dim records As New ServiceAgent.DemoWebService.DemoDB
records = obj.GetRecords(records)

=============================

6. Double click theWebSercieDemo.vb file in the solution window and modify the service proxy as following

=========================
_
Public Function wsProxyGetRecords(ByVal records As ServiceAgent.DemoWebService.DemoDB) As ServiceAgent.DemoWebService.DemoDB

Dim obj As ServiceAgent.DemoWebService.ServiceSoapClient
obj = New ServiceAgent.DemoWebService.ServiceSoapClient()

'Dim records As ServiceAgent.DemoWebService.DemoDB
obj.GetRecords(records)

Return records
End Function

=========================

7. Finally we need to change the code in javascript file to call the web service as following

==================================

function Getrecords() {

var obj =
new ServiceAgent.DemoWebService.DemoDB();

var pageNoContron = document.getElementById("TextBoxPageNo");
if (pageNoContron != null) {
var pageNo = pageNoContron.value;
if (pageNo.length > 0)
obj.iPageNo = pageNo;
else
obj.iPageNo = 1;
}

var pageSizeContron = document.getElementById("TextBoxRecordPerPage");
if (pageSizeContron != null) {
var pageSize = pageSizeContron.value;
if (pageSize.length > 0)
obj.iPageSize = pageSize;
else
obj.iPageSize = 2;
}

obj = WebServiceDemo.wsProxyGetRecords(obj, SucceededCallback_GetRecord, FailedCallback_GetRecord);

}

function SucceededCallback_GetRecord(obj) {

var example_div = document.createElement('div');
example_div.style.cssText =
'margin: 3px; '
+ 'border: 1px solid black; '
+ 'background:' + '#bbbbbb' + '; '
+ 'color:' + '#000000'
;

document.getElementById("form1").appendChild(example_div);

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var hour = currentTime.getHours();
var min = currentTime.getMinutes();
var sec = currentTime.getSeconds();

example_div.appendChild(document.createTextNode(obj.arrDiscount.length
+ " records have been retrieved at "
+ month + "/" + day + "/" + year
+ " "+hour
+" : "+min
+ " : " + sec));

for (var i = 0; i < obj.arrDiscount.length; i++)
{
try
{
var record_div = document.createElement('div');
record_div.style.cssText =
'margin-left: 30px; '
+ 'margin-top: 5px; '
+ 'border: 1px solid black; '
+ 'background:' + '#bbbbbb' + '; '
+ 'color:' + '#006600'
;
example_div.appendChild(record_div);
record_div.appendChild(document.createTextNode(i+" discount " + obj.arrDiscount[i].sDiscountType));
}
catch (e)
{
}
}

}

function FailedCallback_GetRecord() {
alert("GetRecords failed")
}
==================================

In the javascript code, the user input of Page No. and page size is retrieved from the page as user entry, and then passed to the web service. The value will also be passed back when the function finishes.

8. After modifying the Default.aspx to include the controls to allow user entry as following

==============================

==============================

we can start the application.

9. The final web page in browser will similar to following.
Get User Entry and Pass To Backend

When user provides page No., Page Size and clicks the link to Get Record by Ajax, a new table will be added to the page using data retrieved from database with the parameter of Page No. and Page Size .

The source code can be downloaded from Tutorial_VB Part_10_User Entry Passed To backend.zip

Javascript Editor Freeze in Visual Web Developer 2008

2009-05-11T10:49:00.001-07:00

I have noticed this problem for a little while. Sometimes when you double click a javascript file, the source editor window becomes not responsible. If you switch to any other source code, the editor just works fine.

After search online, I found following article seemed to solve the problem.

Downloadable Hotfix: Performance and Editor fixes for Microsoft Visual Studio 2008 and Visual Web Developer Express 2008

Performance and Editor fixes for VS2008…

I downloaded the hotfix and installed it. The problem seems resolved. The only problem is that the scroll bar does not seem work.

No Scroll Bar Available

Follow instructions from Matt's blog, I verified that the Hotfix has been installed properly.

KB946581 Hotfix Installed

Not sure the reason. I have just posted a question here http://forums.asp.net/1112.aspx

VS2008 Color Schemes

2009-05-11T08:23:00.000-07:00

I do not like the default VS2008 color schemes in Javascript editor, which is as following.

Default Javascript Editor Color Scheme.

Therefore I made some search online. The following is a good source for modification of color scheme.

http://winterdom.com/2007/11/vs2008colorschemes

http://blogs.msdn.com/charlie/archive/2008/05/26/ide-color-schemes-for-the-vs-editor.aspx.

I tried a few of them and the one called 2008-GardenOfEden looks to be my favorate. However, the Javascript editor does not look nice still.

Javascript Color Scheme of Newly imported options

I start wondering the javascript editor is not well developed because other than the color scheme problem, the window refresh of Javascript editor does not work sometimes as well. Maybe Microsoft can answer this question.

Anyway, I go to the Tools -> Options and modified a few items (Trach change before save and track change after save), it looks better.

Modified Version

I will stick with this one until I come across a better one some day later.

9 - Ajax Demo

2009-05-09T11:16:00.000-07:00

This article will start to explore the power of Javascript combined with Web Service.

Ajax stands for Asynchronous JavaScript And XML. The main benefit of Ajax is that the data can be retrieved according to the user's actions and the web page can be refreshed partially by modifying existing user interface element such as text, image, adding new elements to the page, or removing some elements from the page. More introduction about Ajax can be found from http://en.wikipedia.org/wiki/Ajax_(programming).

Before we continue with coding, we should understand the reason we need a service proxy as described in the article about architecture. Most web browsers generally do not allow Javascript to directly call web service from other web site. Therefore, in order to call our service agent or web service hosted in another website, such as http://vbs.ndprice.com/service.asmx from our website http://vb.ndprice.com/default.aspx, we need create an service proxy at http://vb.ndprice.com/WebServiceDemo.asmx. The main purpose of the service proxy is to call the service from server side to another server and pass the result to the browser.

There are more discussions in this article. Calling Cross Domain Web Services in AJAX. Here we will simply use a server side proxy.

Now lets start with our journey to create web page with some Ajax flavor.

1. Make sure our web service is running by starting the Service project.

2. Open the Demo Site project and right click the project in solution window, select Add New Item menu button. The following dialog will be popped up. Select the Web Service, type the web service name as WebServiceDemo.asmx and click OK, as following:

Add Service Prxy

3. Now doulbe click the WebServiceDemo.asmx file in the solution window and add new web service in the service proxy.

4. Add a solution folder to the website by right clicking the website and selecting the add folder menu button, as following:

Add New Folder

5. Name the new folder as javascript, and right click the folder. In the pop up menu, select Add new Item as following:

Add Javascript File

6. Now we can select to create a javascript file and name the Javascript fiel as DemoJavascript.js, as following.

Select Javascript File Name

7. Double click the javascript file, and type in following code in the Javascript editor:

==========================================

function Getrecords() {

var obj =
new ServiceAgent.DemoWebService.DemoDB();

obj = WebServiceDemo.wsProxyGetRecords(SucceededCallback_GetRecord, FailedCallback_GetRecord);

}

function SucceededCallback_GetRecord(obj) {

var example_div = document.createElement('div');
example_div.style.cssText =
'margin: 3px; '
+ 'border: 1px solid black; '
+ 'background:' + '#bbbbbb' + '; '
+ 'color:' + '#000000'
;

document.getElementById("form1").appendChild(example_div);

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var hour = currentTime.getHours();
var min = currentTime.getMinutes();
var sec = currentTime.getSeconds();

example_div.appendChild(document.createTextNode(obj.arrDiscount.length
+ " records have been retrieved at "
+ month + "/" + day + "/" + year
+ " "+hour
+" : "+min
+ " : " + sec));

for (var i = 0; i < obj.arrDiscount.length; i++) { try { var record_div = document.createElement('div'); record_div.style.cssText = 'margin-left: 30px; ' + 'margin-top: 5px; ' + 'border: 1px solid black; ' + 'background:' + '#bbbbbb' + '; ' + 'color:' + '#006600' ; example_div.appendChild(record_div); record_div.appendChild(document.createTextNode(i+" discount " + obj.arrDiscount[i].sDiscountType)); } catch (e) { } } } function FailedCallback_GetRecord() { alert("GetRecords failed") } ========================================== The above javascript will call the proxy service and add a new div based on return data.

8. Save the Javascript file.

9. In the solution window, double click the Default.aspx, and change the form code to add a script manager and a link to activate the script function

10. Now start the application and we should have the following web page.

Data Retrieved with Javascript

Everytime we click the "Get Record by Ajax", the data will be retreived by the javascript and a new table will be added to the web page without refresh the whole page.

The live demo can be found from here:

http://vb.ndprice.com/default.aspx

The source code for this demo can be found from here.

Tutorial_VB_part9_Ajax and Web Service.zip

Online tool to generate HTML/CSS code and images for rounded corners

2009-05-08T16:26:00.001-07:00

This website provides online generation of rounded background box to decorate your web site.

http://www.roundedcornr.com/

Combined with the color picker from http://www.colorpicker.com/, it becomes much more easy to make nice box.

8 - Add Database Access to DAL

2009-05-08T13:34:00.000-07:00

In the last a few articles we created a service oriented web site using 4 layer architecture. This article will try to connect to database in the Data Access Layer.

1. Open the DemoDB project and add a class by right clicking the project name in solution window and select menu item Add -> Class

Add DB Connection Class

2. Rename the class name to DemoDB and type following code in the class. Note: Please make sure you have the SQL Server database named as pubs ready. Otherwise, please make change accordingly.

===================================

Imports System.Data.SqlClient

Public Class DemoDB

Public sDiscountType As String
Public sStoreID As String

Public arrDiscount As New List(Of DemoDB)

Public Function GetRecords() As DemoDB

Dim dbConnection As SqlConnection
Dim sqlCommand As SqlCommand
Dim dr As SqlDataReader

dbConnection = New SqlConnection("server=localhost;Trusted_Connection=true;database=pubs")
Try
dbConnection.Open()
sqlCommand = New SqlCommand("Select * from discounts", dbConnection)
dr = sqlCommand.ExecuteReader()
Dim i As Integer
i = 0
While dr.Read()
i = i + 1
Dim newRec As New DemoDB()
arrDiscount.Add(newRec)
newRec.sDiscountType = dr(0).ToString()
newRec.sStoreID = dr(1).ToString()
End While
dr.Close()
dbConnection.Close()
Catch e As Exception
End Try

Return Me

End Function

End Class

===================================

3. Rebuild the class library

4. Open the Web Service project, right click the DemoDAL.Dll and click the Update Reference menu button to update the DLL reference as following

Update DemoDLA Reference

5. In the Service.vb code, add a new function to the web method list. The code will be:

=====================================
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports DemoDAL.DemoDAL

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' _
_
_
_
Public Class Service
Inherits System.Web.Services.WebService

_
Public Function HelloWorld() As String
Return "Hello World"
End Function

_
Public Function SayHelloFromDAL() As String
Dim obj As New DemoDAL.DemoDAL()
Return obj.SayHello()
End Function

_
Public Function GetRecords() As DemoDAL.DemoDB
Dim obj As New DemoDAL.DemoDB
Return obj.GetRecords()
End Function

=====================================

6. Rebuild the web service project and start the web service for following steps.

7. Open the ServiceAgent Class Library project, update the web service reference as following

Update Web Service Reference

8. In the ServiceAgent.vb, modify the code to include a new function as following

=================================
Imports ServiceAgent.DemoWebService

Public Class ServiceAgent

Public Function HelloFromServiceAgent()
Dim obj As DemoWebService.ServiceSoapClient
obj = New DemoWebService.ServiceSoapClient()
Return obj.SayHelloFromDAL()
End Function

Public Function GetRecords() As DemoWebService.DemoDB
Dim obj As DemoWebService.ServiceSoapClient
obj = New DemoWebService.ServiceSoapClient()
Return obj.GetRecords()
End Function

End Class
=================================

9. Rebuild the Service Agent class library.

10. Open the DemoSite project, update the dll reference and add a web reference to the project as well.

11. In the page load method, add some code to call the web service from both the Service Agent and web service reference directly. The code will be as following:

=================================

Imports ServiceAgent

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim obj As ServiceAgent.DemoWebService.ServiceSoapClient
obj = New ServiceAgent.DemoWebService.ServiceSoapClient()

Dim pageHtml As String
pageHtml = obj.SayHelloFromDAL

pageHtml = pageHtml & "

"

Dim directService As DemoWebService.Service
directService = New DemoWebService.Service
Dim i As Integer

Dim recordsDirect As DemoWebService.DemoDB
recordsDirect = directService.GetRecords()
pageHtml = pageHtml & "Total Records Returned by direct web service reference: " & recordsDirect.arrDiscount.Length.ToString
i = 0
For Each record As DemoWebService.DemoDB In recordsDirect.arrDiscount
i = i + 1
pageHtml = pageHtml & "
" & i.ToString
pageHtml = pageHtml & " Discount Type: " & record.sDiscountType & "
"
Next
pageHtml = pageHtml & "

"

Dim records As ServiceAgent.DemoWebService.DemoDB
records = obj.GetRecords()
pageHtml = pageHtml & "Total Records Returned by service agaent: " & records.arrDiscount.Length.ToString
i = 0
For Each record As ServiceAgent.DemoWebService.DemoDB In records.arrDiscount
i = i + 1
pageHtml = pageHtml & "
" & i.ToString
pageHtml = pageHtml & " Discount Type: " & record.sDiscountType & "
"
Next

pageHtml = pageHtml & "

"

pageHtml = pageHtml & "Hosted on GoDaddy"

Page.Form.InnerHtml = pageHtml
Page.Header.Title = DateTime.Now.ToString + ": Demo Web Site"

End Sub
End Class

=================================

12. Now press F5 key to run the project, you will have the data displayed on the web pages as following

Database Access Added to Web Page

So far we have a web page with real database support working. Next article will talk about the way to visit the web service through Javascript, in a Ajax way.

The code of this article can be downloaded here http://users.ndprice.com/Tutorial_VB_part8_DatabaseAccess.zip

7 - Make the Website Online

2009-05-08T10:40:00.001-07:00

In previous article we have implemented our first service oriented website. In this article we are going to adjust the web site configuration file, compile it and upload it to the GoDaddy hosting service

1. Double click the Web.Config file, find the endpint address, and change it to: http://uservice.ndprice.com/service.asmx. This is the web service we uploaded during our web service generation.

2. Under node of Web.config file, remove section ConfigSections, System.Codedom, System.WebServer. We only need to save System.Web and System.ServiceModel nodes. Under System.Web section, remove the Compilation, Controls, Assemblies, httpHandlers, httpModules sections.

3. Select Main Menu -> Tools -> Precompile tool that we have created in Web Service section. System will compile the web site and create a deployment package as following.

Create Web Site Deployment package

4. Upload the web site deployment package to web hosting system on GoDaddy.

Now type the following address in your browser, http://users.ndprice.com/, you will see the web site is online now.

Service Oriented Web site Online

The source code of all project can be downloaded from following address.

Download Tutorial_VB _Service Oriented Web Site Using VSExpress.zip

6 - First Web Site using Web Service

2009-05-08T07:58:00.001-07:00

In previous article we have prepared a class library to work with web service. This article will try to create our real web site, and make it online.

1. Start Visual Web Developer 2008 Express Edition, select Main Menu -> File -> New Web Site, select the ASP.NET Web Site, choose a folder to save the project and click OK.

Create ASP.NET Web Site

2. Now we need to add reference to the project to make use of our Service Agent class library. Right click the project in the solution window, choose the Add Reference menu button.

Add Reference

3. Browse to the ServiceAgent.dll we created in previous article and click OK.

Reference to Web Service Agent

4. Double click the Default.aspx.vb, and the code behind the default web page will appear in the code editor. Select the Page Event in the Class Name Drop down list.

Select Page Event to begin to Code

5. Select the Load event in the Method Name drop down list.

Add Page Load event Handler

6. Now type the following code in the code editor.

================================================

Imports ServiceAgent

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim obj As ServiceAgent.DemoWebService.ServiceSoapClient
obj = New ServiceAgent.DemoWebService.ServiceSoapClient()

Dim pageHtml As String
pageHtml = obj.SayHelloFromDAL

pageHtml = pageHtml & "

"
pageHtml = pageHtml & "Hosted on GoDaddy"

Page.Form.InnerHtml = pageHtml
Page.Header.Title = DateTime.Now.ToString + ": Demo Web Site"

End Sub
End Class

===============================================

7. The last thing we need to do is to add web service endpoint address so that the web site can find the service web site. Double click the web.config file and add the following to the end of web.config file, just before the line of .
Make sure the endpoint address is exactly the same as the web service address.

Modify We.Config File

The above section can be found from the app.config file of the Service Agent project.

OK. Press F5 key and the web site will be displayed in the default browser as following.

Web Site Running

In the next article we will talk about how to adjust the web configure file and upload it to GoDaddy.

5 - Service Agent Layer

2009-05-08T07:26:00.001-07:00

In previous article we created a web service and uploaded to GoDaddy. In this part we will create a Service Agent Layer to provide a universal calling functions to work with the web service.

1. Similar to the steps in part 3, we will need to start VB 2008 Express edition, create a class library named as Service Agent, change the default class name to Service Agent.

2. Start the Web service project so that web service is available to other projects.

3. Now we will need to add a web service reference to the project. Right click the project in the solution window.

Add Web Service Reference

4. In the popped up dialog to add service reference, copy the address of the web service to the Address text box, and click Go. Now click the service in the Services tree view, and the open the ServiceSoap node, you will have the following configuratio. Remember to change the namespace to DemoWebService or any name that you will use later.

Confiure Web Service Reference

5. Type following code in the ServiceAgent.vn

==========================================
mports ServiceAgent.DemoWebService

Public Class ServiceAgent

Public Function HelloFromServiceAgent()
Dim obj As DemoWebService.ServiceSoapClient
obj = New DemoWebService.ServiceSoapClient()
Return obj.SayHelloFromDAL()
End Function

End Class

===========================================

6. Now right click the ServiceAgent project in the solution window to build the ServiceAgent dll. We will get the following dll in the bin\release folder.

Create Service Agent dll

So far, we have finished the layer 3 in the architecture, the class library that provides a standard way to utilize web service. Next article will create the web site by using this dll.

4 - Web Service Layer

2009-05-07T20:30:00.000-07:00

Web Service

In last Article we created a simple data access layer class library. In this article we will create a web service to consume the class library.

1. Let us start Visual Web Developer 2008 Express Edition.

VWD 2008 Express Edition

2. Click File -> New Website. From the Visual Studio Installed Packages in the popped out dialog, select ASP.NET Web Service, pick a proper folder to save the web site, and then click OK to create the project, as following

Create ASP .NET Web Service

3. Now we will have a default web service web site projectas following.

Default ASP.Net Web Service Project

4. Right click the project in the solution window and click the add reference menu button to add a reference to our DemoDAL class library.

Add Reference

Select Reference

6. Now we have the reference to our DemoDAL library, we can import the library in our web service and start to call the function. In the service.vb file, type following code.

==============================

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports DemoDAL.DemoDAL

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' _
_
_
_
Public Class Service
Inherits System.Web.Services.WebService

_
Public Function HelloWorld() As String
Return "Hello World"
End Function

_
Public Function SayHelloFromDAL() As String
Dim obj As New DemoDAL.DemoDAL()
Return obj.SayHello()
End Function

End Class

================================

7. We can set the Service.asmx as start up page by right clicking this file in the solution window as following

Set start page

8. We need to change the property of the project to use static port instead of dynamic port during debug.

Change Start Port

9. Finally we can start to debug the web service by press F5 key.

See Our Web Service

10. By now, we have got our first web service running on our development enviroment. In order to upload the web service to a web hosting server such as such as GoDaddy, IXWeb Hosting, 1&1 Web Hosting, omnis, Lunarpages etc, we need to compile our web service first.

Add Compiling Tools

11. Add external tools as following:

Compile Tool Parameters

Second line is: (please make sure you have this file in the proper folder)
C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspnet_compiler.exe

Third line is:
-p "$(ProjectDir)" -v / "$(ProjectDir)\..\CompiledApp"

12. Now you can click the Main Menu -> Tools ->Pre Compile to generate a web service installation package.

Deployment package

13. You can now upload the depoyment package to a web server hosting environment. I have a hosting account with GoDaddy, therefore I have uploaded the demoweb service to the following website.

Uploading Web Service

Demo Service

3 - Data Access Layer

2009-05-07T19:47:00.000-07:00

Data Access Layer

In this section we will create a VB. Net class library that will serve as the data access layer.

First Let us start VB .Net 2008.

Start VB .Net

Now, we will create a VB.Net Class Library Project called SiteDAL.dll
1. Click File -> Create New. From the Visual Studio Installed Templates in the pop up dialog, choose Class Library and set the name of the class library as DemoDAL, as following:

Create DAL project

2. Click OK to create the project. We will have a default Class Library Project as following.

Default DAL project

3. Rename the default class name to "DemoDAL.VB" by right clicking the "Class1.vb" in the solution explorer window. The class name will also be changed to DemoDAL automatically as following:

Change Class Name

4. Create a simple function in the DemoDAL class by adding following code in the class.

Public Class DemoDAL

Public Function SayHello()
Return "Hello World From DAL Class Library"
End Function

End Class

5. Click Save Button of VB. Net to save the project to folder of your choice.

6. Click Build -> Build DemoDAL from the main Menu, or just right click the project in the solution window and choose to build.

Build the Project

7. Now we will get a DemoDAL.dll in the bin\release folder under the directory where we choose to save the project.

DemoDAL dll

So far we have successfully created a Data Access Layer even though no database operation is involved at all. We will come back to this project later to add the database manipulation functions later. For now, we are more interested in the architecture layout of the website.

2 - Architecture Review

2009-05-07T19:41:00.000-07:00

Architecture

This part of the article will discuss the architecture that will be used to build a scalable and efficient web site.

The following is the structure of the web site we are going to implement in this series of articles.

Architecture Diagram

The data access layer is responsible for all functions to create object entities, communicate with database and perform business logic at server side. It will create the connection with database, call stored procedures to manipulate database and perform some data reorganization if necessary. This layer is a class library project developed using Visual Basic .Net.

The second layer is an ASP .NET WEB Service project developed using Visual Web Developer 2008 Express Edition. This layer provides an universal access to the database through web service to provide a loose coupled architecture.

The third layer, which is also a Visual Basic class library dll, is developed to simplify the call to the web service so that UI developers do not need to configure the web service invoke and respond to the service.

Now the web service can be used in the fourth layer, or the UI layer, as standard objects or classes in the ASP.Net web pages despite the fact that all the data and computing is provided remotely by another web site.

In order to provide Ajax access to the web service, service proxy is required at the fourth level so that web service object is available in the Javascript.

The above architecture has a lot of benefit.
1. Web service layer provides loose coupling of the modules so that web server load can be balanced among different web servers
2. Web servers can also configured so that certain group of services are hosted together and other calculation intensive service can be hosted independently.
3. Data access layer can be directly used in the UI development is web service is not required
4. Web Service Agent dll can be used Web application and Desktop application exactly the same way. It allows the easier system maintenance as the web service handling mechanism is standardized.
5. Service for different modules can be hosted in different service application and web servers to allow independent development in a team.

1 - Service Oriented Web Site with VS Express 2008

2009-05-07T15:58:00.000-07:00

Introduction

In this series of articles, I will walk you through the steps to create Service Oriented Web Site Using VB .Net 2008 Express Edition and Visual Web Developer 2008 Express edition. This set of articles is designed for beginners and for those who want to explore new technologies, like me.

First you need to download Visual Studio Express Editions from following web site. http://www.microsoft.com/express/download/

After installing the Express editions Visual Basic 2008 Express edition and Visual Web Developer 2008 Express edition, we can start to build out service oriented web site using these excellent tools, all for free. I have been using the profession editions and team editions of Visual studio that provides more tools and templates for a long time, I do not actually see any functions that I need for my commercial software development can not be achieved through the free tools, although you may need to spend a little longer to get the work done. The NDPrice website is a good sample of what we can do with Visual Studio 2008 Express editions. A lot of web hosting providers such as GoDaddy, IXWeb Hosting, 1&1 Web Hosting, omnis, Lunarpages etc. can all successfully host the web site developed with express editions.

Following web hosting service can not host the web site developed in this series of articles: Yahoo small business , Hosting Monster, I Power Web, Power Web