View Full Version : [Solved] Ajax.request and web service

5 Aug 2009, 1:22 PM
I'm now trying to use the Ext.Ajax.request to call a web service method that I want to use to save data from a FormPanel and it's throwing an error that I can't figure out.

I now have the combo working now and need to make the SaveShip method work. Currently if I set break points in the SaveShip method they are never hit so I figure there is something going on earlier in the process that is breaking.

My post looks like this.

Here is a screen shot of the respnose.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddShipCombo.aspx.cs" Inherits="Tests_AddShipCombo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Add Ship Combo Test</title>
<link rel="stylesheet" type="text/css" href="../Common/Scripts/ext-3.0.0/resources/css/ext-all.css" />
<!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> -->
<script type="text/javascript" src="../Common/Scripts/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Common/Scripts/ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

var shipStore = new Ext.data.JsonStore({
id: 'ShipId',
proxy: new Ext.data.HttpProxy({
url: '../WebServices/JobsWebService.asmx/GetShips'
,method: 'post'
,jsonData: {}
,headers: { 'Content-Type': 'application/json; charset=utf-8;' }
root: 'd.rows',
totalProperty: 'd.totalRows',
idProperty: 'ShipId',
fields: ['ShipId', 'ShipName']

var shipCombo = new Ext.form.ComboBox({
id: 'shipCombo',
name: 'shipCombo',
renderTo: 'shipRenderer',
valueField: 'ShipId',
displayField: 'ShipName',
hiddenName: 'ShipId', // The value that should be bound/saved.
typeAhead: true,
minChars: 1,
mode: 'remote',
editable: true,
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a ship',
store: shipStore

var addShipForm = new Ext.FormPanel({
id: 'addShipForm',
//layout: 'fit',
title: 'Add New Ship',
frame: true,
border: false,
labelAlign: 'left',
labelWidth: 70,
//trackResetOnLoad: true,
items: [{
xtype: 'textfield',
id: 'ShipName',
name: 'ShipName',
fieldLabel: 'Ship Name',
maxLength: 100

var button = Ext.get('addShip');
button.on('click', function() {
addShipWin = new Ext.Window({
id: 'addShipWin',
layout: 'fit',
width: 250,
height: 150,
closeAction: 'close',
plain: true
,items: [addShipForm]
,buttons: [{
text: 'Add',
handler: function() {
url: '../WebServices/JobsWebService.asmx/SaveShip',
method: 'POST',
jsonData: { ShipName: Ext.getCmp('ShipName').getValue() },
headers: { 'Content-Type': 'application/json;charset=utf-8' },
success: function(response, options) {
jsonData = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert('Success', jsonData.ShipName + ' saved successfully');
failure: function(response, options) {
jsonData = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert('Failure', jsonData.message);
}, {
text: 'Cancel',
handler: function() {


<table border="0" cellpadding="0" cellspacing="0">
<td><div id="shipRenderer"></div></td><td><input id="addShip" type="button" value="Add" /></td>

web service

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using BayDelta.AppServices;
using BayDelta.LLBLGen.EntityClasses;
using BayDelta.LLBLGen.HelperClasses;
using BayDelta.AppServices.DTO;
using BayDelta.AppServices.Json;
using LLBLGenExtensions.EntityExtensions.JSon;
using LLBLGenExtensions.ExtensionMethods;

/// <summary>
/// Summary description for JobsWebService
/// </summary>
[WebService(Namespace = "http://localhost/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class JobsWebService : System.Web.Services.WebService

public JobsWebService()
//Uncomment the following line if using designed components

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public object GetShips()
string shipName = string.Empty;
List<Ship> list = new List<Ship>();

if (!string.IsNullOrEmpty(Context.Request.QueryString["query"]))
shipName = Context.Request.QueryString["query"].ToString();

EntityCollection<ShipEntity> ships = ServiceManager.GetMiscDataManager().GetShipNames(shipName, 0);

for (int i = 0; i < ships.Count; i++)
ShipEntity shipentity = ships[i];
Ship ship = new Ship();
ship.ShipId = shipentity.ShipId;
ship.ShipName = shipentity.ShipName;

var data = new { success = true, totalRows = list.Count, rows = list };

return data;

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public object SaveShip(string shipName)
var data = new { success = true, ShipName = shipName };
return data;
catch (Exception x)
var data = new { success = false, message = x.Message };
return data;

5 Aug 2009, 3:21 PM
After playing around with this a little I've learned that the parameter string shipName being passed to the SaveShip method is causing the problem. I have an example of working code that I got from @andycramb that passes the parameter to the method this way. Why does mine not work?

This works but now I can't pass the parameter.

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public object SaveShip()
var data = new { success = true, ShipName = shipName };
return data;
catch (Exception x)
var data = new { success = false, message = x.Message };
return data;

5 Aug 2009, 3:29 PM
Very nice. It works now. I think what I was doing wrong was that I had the case of the ext parameter different then the server side parameter. The ext param was ShipName and the server side param was shipName.