10 - Passing user input to backend using Ajax

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