PDA

View Full Version : Form and .Net web services



darrenlo
24 Sep 2010, 1:31 PM
Hi, I'm trying to direct my form to a .asmx web service and i just can't get it to return me primitive json code, instead it returns only in xml..

does anyone knows how to solve this? please..

Stoot98
25 Sep 2010, 6:35 AM
Try using the JSON.NET library to serialize your data objects.

http://json.codeplex.com/

darrenlo
26 Sep 2010, 11:16 AM
Thanks, but actually the solution was to use a WCF service and mess around a bit with the response object.
Although, i failed to work with POST requests so if anyone know how i'll be more than happy to hear..

If you have the same problem maybe the following code will help you:

------------------------------------- WCF service ------------------------------------------
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Web;
using GeoManage;

[ServiceContract(Namespace = "GeoManage")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service2
{
[OperationContract]
[WebGet]
public void Login(string username, string password)
{
// Clear the {d:} append
WebOperationContext context = WebOperationContext.Current;
context.OutgoingResponse.SuppressEntityBody = true;

// Create a new response
HttpContext responseContex = HttpContext.Current;
responseContex.Response.ContentType = "application/json";

// Write response
ResponseObject response = new ResponseObject();
response.success = true;
response.message = "Post back - Login successfully";

if (password.Length == 0)
{
response.success = false;
response.message = "Post back - Login failed!";
}

responseContex.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(response));
}

// Add more operations here and mark them with [OperationContract]
}

------------------------------------- index.js ------------------------------------------
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
//--------------------------Global variables------------------------------------//
var isDebug = true;

//---------------------------Event Handlers-------------------------------------//
// Fires onClick button "Add"
var btnAddHandler = function(button, event) {
var txt = "User tapped the '" + button.text + "' button.";
//Ext.getCmp('container').update(txt);
Ext.get('paragraphContainer').setHTML(txt);
};

// Fires onClick button "Back"
// Always returning to card "Add"
var btnBackHandler = function(button, event) {
var activeitemindex = tabpanel.items.indexOf(tabpanel.getActiveItem());
activeitemindex = (tabpanel.getActiveItem().title == "About") ? activeitemindex - 1 : activeitemindex;
tabpanel.setCard(activeitemindex - 1);
}

// Fires before switching a tab
// Setting the toolbarTop title to selected menu tab title
var beforeCardSwitch = function(thisCont, newCard, oldCard, index, isAnim) {
toolbarTop.setTitle(newCard.title);
}

// Fires after switching a tab
var afterCardSwitch = function(thisCont, newCard, oldCard, index, isAnim) {
if (index == 0) form.show();
// Clear container
//Ext.getCmp('container').update("");
Ext.get('paragraphContainer').setHTML("");
// Hide the "Back" button if not in tab "Add" or "Login"
(newCard.title == "Add" || newCard.title == "Login") ? btnBack.hide() : btnBack.show();
//ui.toolbarTop.doComponentLayout();
}

//------------------------------Buttons-----------------------------------------//
var btnBack = new Ext.Button(
{ // Navigator Back
text: 'Back',
ui: 'back',
handler: btnBackHandler,
hidden: true,
scope: this
});

var navigationButtons = [btnBack];

//-----------------------------Toolbar Top--------------------------------------//
this.toolbarTop = new Ext.Toolbar({
ui: 'dark',
dock: 'top',
title: 'Login',
items: navigationButtons
});

//--------------------------------Form------------------------------------------//
var formBase = {
scroll: 'vertical',
//fullscreen: true,
standardSubmit: false,
items: [
{ // From Fieldset
id: 'loginFS',
xtype: 'fieldset',
title: 'Please Log On',
cls: 'login-fieldset',
instructions: '',
defaults: {
required: true,
labelAlign: 'left'
},
items: [
{ // Username
xtype: 'textfield',
name: 'UserName',
label: 'User Name',
required: true,
autoCapitalize: false
}, { // Password
xtype: 'passwordfield',
name: 'Password',
label: 'Password'
}
]


}, { // Form buttons
xtype: 'button',
text: "Log On",
cls: 'btnLogin',
handler: function() {
// Handle required fields
var requiredFields = JSLINQ(form.getComponent(0).items.items).Where(function(field) { return field.required == true && field.getValue() == ""; });
if (requiredFields.items.length > 0) {
var fieldNames = requiredFields.items[0].getName();
for (var requiredMissing = 1; requiredMissing < requiredFields.items.length; requiredMissing++) {
fieldNames = fieldNames + ", " + requiredFields.items[requiredMissing].getName();
}

alert('Required field' + ((requiredMissing > 1) ? 's)' : '') + ' missing: ' + fieldNames);
} else { // Form validation passed
form.submit({
method: 'GET',
url: 'http://localhost:52083/GeoManage/Service2.svc/Login?username=' + form.getValues().UserName + '&password=' + form.getValues().Password,
scope: this,
waitMsg: { message: 'Authenticating...', cls: 'demos-loading' }
});
}
}
}], // formitems
listeners: {
submit: function(form, result) { // Submit Form
form.getComponent('loginFS').setInstructions(result.message);
if (isDebug) console.log('success', Ext.toArray(arguments));
form.hide();

tabpanel.setCard(1);
//tabpanel.doComponentLayout();
},
exception: function(form, result) { // Form Error
form.getComponent('loginFS').setInstructions(result.message);
if (isDebug) console.log('failure', Ext.toArray(arguments));
}
}
}; //formBase

if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false//,
//height: 385,
// width: 480
});
}

var form = new Ext.form.FormPanel(formBase);
form.show();

//------------------------------Tab Panel---------------------------------------//
var tabpanel = new Ext.TabPanel(
{
listeners: {
'beforecardswitch': beforeCardSwitch,
'cardswitch': afterCardSwitch
},
tabBar: {
dock: 'bottom',
layout: {
pack: 'right'
}
},
fullscreen: true,
ui: 'dark',
animation: {
type: 'slide',
cover: true
},
dockedItems: toolbarTop,
defaults: {
scroll: 'vertical'
},
items:
[{ // Tab Item #1
title: 'Login',
items: form,
iconCls: 'favorites',
cls: 'card1'
}, { // Tab Item #2
title: 'Add',
layout: {
type: 'vbox',
align: 'fit'
},
defaults:
{
pack: 'justify'
},
items:
[{
html: '<div id="wrapper" class="wrapperDiv">'
+ '<div id="header" class="headerDiv">'
+ '<h1>Geomanage is a bla bla bla...</h1>'
+ '</div>'
+ '<div id="body" class="bodyDiv">'
+ '<p id="paragraphContainer"></p>'
+ '</div>'
+ '</div>'
}, {
xtype: 'spacer'
}, {
xtype: 'panel',
items:
[{
ui: 'confirm-round',
text: 'Add',
xtype: 'button',
cls: 'button',
handler: btnAddHandler
}]
}],
iconCls: 'add',
cls: 'card1'
}, { // Tab Item #3
title: 'Terms of use',
html: '<div id="wrapper" class="wrapperDiv">'
+ '<div id="header" class="headerDiv">'
+ '<h1>Terms of use</h1>'
+ '<h2>bla bla bla..</h2>'
+ '</div>'
+ '<div id="body" class="bodyDiv">'
+ '<p></p>'
+ '</div>'
+ '</div>',
iconCls: 'bookmarks',
cls: 'card1',
badgeText: '?'
}, { // Tab Item #4
title: 'About',
html: '<div id="wrapper" class="wrapperDiv">'
+ '<div id="header" class="headerDiv">'
+ '<h1>About</h1>'
+ '<h2>bla bla bla..</h2>'
+ '</div>'
+ '<div id="body" class="bodyDiv">'
+ '<p></p>'
+ '</div>'
+ '</div>',
iconCls: 'info',
cls: 'card1'
}
] // tabitems
}); // tabpanel
} // onready
}); // extsetup

--------------------------------- my custom css ------------------------------------------
body {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #627280), color-stop(90%, #444e58));
background-image: linear-gradient(top, #627280 0%, #444e58 90%);
}
.x-tabpanel > .x-panel-body .x-panel-body {
padding-right: 2px;
padding-left: 2px;
padding-top: 10px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: rgba(0,0,0,.2);
text-shadow: rgba(255,255,255,.2) 0 1px 0;
}
.x-phone .x-tabpanel > .x-panel-body .x-panel-body {
padding: 30px 20px;
font-size: 36px;
}
.x-phone p {
font-size: 16px;
line-height: 18px;
}
h1 {
font-weight: bold;
font-size: 22px;
}
p {
font-size: 24px;
line-height: 30px;
}
.card1 .x-panel-body {
background-color: #ccc;
}
.card2 .x-panel-body {
background-color: #ccc;
}
.card3 .x-panel-body {
background-color: #759E60;
}
.card4 .x-panel-body {
background-color: #9C744F;
}
.card5 .x-panel-body {
background-color: #926D9C;
}

.x-form-fieldset-instructions /* override fieldset instructions */
{
font-size: 10px;
}

.form-style
{
background-color: red;
color: Red;
}

.btnLogin
{
margin-top: 10px;
}

.login-fieldset
{

}

.wrapperDiv
{
}

.headerDiv
{
}

.bodyDiv
{
}

.add {-webkit-mask-box-image: url(../themes/images/default/tabicons/add.png)}

.button
{
width: 100px;
}

.demos-loading {
background: rgba(0,0,0,.3) url(../../Images/loading.gif) center center no-repeat;
display: block;
width: 10em;
height: 10em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em;
margin-top: -5em;
-webkit-border-radius: .5em;
color: #fff;
text-shadow: #000 0 1px 1px;
text-align: center;
padding-top: 8em;
font-weight: bold;
}


* I'm using an external "JSLINQ.js" library