Using jQuery and a Web Service for unobtrusive email form

This could probably be done better and i will look into making it a jQuery plugin when I get time. Basically Iam using jQuery to collect all the variables from a form and looping through them to create a html string. then using a web service to send the text and have it emailed, then report whether it was a success or not.

Sys.Application.add_load(function() {
//Collect form variables
$("input:submit").click(function(e) {
e.preventDefault();
var tb = $("input:text");
var rb = $("input:radio");
var cb = $("input:checkbox");
var sel = $("option:selected");
var tbArea = $("textarea");
var text = "";
tb.each(function(n) {
text += "" + $(this).attr("id") + ": " + $(this).val() + "
";
});
tbArea.each(function(n) {
text += "" + $(this).attr("id") + ": " + $(this).val() + "
";
});
rb.each(function(n) {
if ($(this).attr("checked")) {
text += "" + $(this).attr("id") + ": " + $(this).val() + "
";
}
});
cb.each(function(n) {
if ($(this).attr("checked")) {
text += "" + $(this).attr("id") + ": " + $(this).val() + "
";
}
});
sel.each(function(n) {
text += "" + $(this).parent("select").attr("id") + ": " + $(this).val() + "
";
});
output.append(text);
EmailService.SendMail(text, success, failure);
});
//Send to web service as string
});

Using Sys.Observer and jQuery for Template Checkboxes

I was thinking, how do you use those tricky checkboxes with client templates. The problem is that the value bound to the checkbox does not automatically update the data context on the saveChanges() command.

In the client template you can use the sys:commandArgument to return the current dataItem.

<input command="update" commandargument="{{ $dataItem }}" value="Make Live" type="button">

The checkboxes in the template should have the same ID as their datafield

<input id="isReport" value="true" if="isReport==true" checked="checked" type="checkbox">
<input id="isReport" value="true" if="isReport==false" type="checkbox">
<input id="isReport" value="true" if="isReport==null" type="checkbox">

use the clever code:if blocks to display the checkboxes correctly in the first place.

When declaring the template declare a command

fixture = $create(Sys.UI.DataView,
{
dataProvider: dataContext,
fetchOperation: "categories"
},
{
command: saveCommand
},
null, $get("fixture"));

Then in the saveCommand function loop through all the checkboxes using an if statement to check if it was checked or not and update the dataitem for each with the Sys.Observer.setValue function.

function saveCommand(sender, e) {
//Get the current data item
var data = e.get_commandArgument();
// loop through all the checkboxes and use their id (which is the same as the data field) then add the value back to the dataContext.
$("input:checkbox").each(function() {
var id = $(this).attr("id");
var value = ($(this).attr('checked')) ? true : false;
Sys.Observer.setValue(data, id, value);
});
dataContext.saveChanges(saved, onfailure);
}


codeproject

Sys.Observer adding a POJO to the DataContext

Firstly declare a global variable

var myTemplate;

Then add

Sys.Application.add_init(function() {
dataContext = $create(Sys.Data.AdoNetDataContext, { serviceUri: "../../../WebDataService.svc" });

myTemplate = $create(Sys.UI.DataView,
{
dataProvider: dataContext,
fetchOperation: "DataTable",
fetchParameters: { $filter: "ID eq 1" },
autoFetch: true
},
{
command: saveCommand
},
null, $get("DomID"));
});

Then add a form input controls for the POJO property.
Then baring in mind that you have retrived just one record get that Data:

var data = myTemplate.get_data();

var myTemplateItem = data[0];

then use the Sys.Observer to add the object to the data context

Sys.Observer.setValue(myTemplateItem , "property", $("#formItem").val()); // Using jQuery selecter get value

dataContext.saveChanges();

And job done the dataContext will update the property to the database.

Very basic but you get the idea. The Sys.Observer is a very powerful tool in the Ajax arsenal.


codeproject

New Ajax Control Toolkit Released

The new version of the Ajax control toolkit is available to download from here


I like the look of the text editor control.

Reference jQuery and ASP.NET Ajax scripts from your JavaScript File

/// <reference path="MicrosoftAjax.debug.js" />
/// <reference path="MicrosoftAjaxTemplates.debug.js" />
/// <reference path="MicrosoftAjaxAdoNet.debug.js" />
/// <reference path="jquery-1.3.1-vsdoc.js" />

As simple as inserting the above code at the top of your .js code and you can have intellisense making your coding a lot easier.


codeproject

using code instead of declaratively attaching the DataView

Just a quick blog to point out a good post by Kalyan Bandarupalli that I found quite helpfull

http://www.techbubbles.com/aspnet/data-view-control-in-aspnet-ajax-4-preview-4/

This collection already contains an address with scheme http. There can be at most one address per scheme in this collection.

This relates to the blog for this same problem with WCF that Rob Zelt posted and it is pretty much the same just adapted for ADO.NET Data Services

http://www.robzelt.com/blog/2007/01/24/WCF+This+Collection+Already+Contains+An+Address+With+Scheme+Http.aspx

If you have the error:

This collection already contains an address with scheme http. There can be at most one address per scheme in this collection.

Parameter name: item

Then enter this code at the bottom in a new class and change the svc file

Factory="CustomHostFactory"

and all being well it should remove the error.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.Data.Services;

class CustomHostFactory : DataServiceHostFactory

{

protected override ServiceHost CreateServiceHost(Type serviceType, Uri[] baseAddresses)

{

CustomHost customServiceHost = new CustomHost(serviceType, baseAddresses[1]);

return customServiceHost;

}

}

class CustomHost : DataServiceHost

{

public CustomHost(Type serviceType, params Uri[] baseAddresses) : base(serviceType, baseAddresses)

{ }

protected override void ApplyConfiguration()

{

base.ApplyConfiguration();

}

}