Sys.Services.ProfileService.properties and jQuery

Showing you how to load edit and save profiles without disclosing the property names.

This post is about using jQuery and Sys.Services.ProfileService for editing roles. This is in a basic form at the moment allowing you to add the properties to a list of textboxes in the same order as they are on the database. So to start off with I created a list of text boxes and labels for each property in the profile, then I added the JavaScript.

function LoadProfile() {
Sys.Services.ProfileService.load(null,
OnLoadCompleted, OnProfileFailed, null);
}

This simply calls the profile service and if successful it calls the OnLoadCompleted function


function OnLoadCompleted(numProperties, userContext, methodName) {
var prop = Sys.Services.ProfileService.properties;
var fields = $("#tabs-9 input:text");
var i = 0;
for (var p in prop) {
$(fields[i]).val(prop[p]);
i++;
}
}

Now I save the lengthy Sys.Services.ProfileService.properties; to a variable then use jQuery to collect the collection of text boxes that are in the div tag with an ID of "tabs-9".

Then loop through the prop collection while also looping through the textbox collection adding the values.

To save the properties do the same in reverse, using the click of the update button


$("#CompanySave").click(function(e) {
e.preventDefault();
var prop = Sys.Services.ProfileService.properties;
var fields = $("#tabs-9 input:text");
var i = 0;
for (var p in prop) {
prop[p] = $(fields[i]).val();
i++;
}
Sys.Services.ProfileService.properties = prop;
Sys.Services.ProfileService.save(null, OnSaveCompleted, OnProfileFailed, null);
});

And that’s it without having to disclose any of the actual property names. I could be spruced up a bit to include different form elements let me know what you think.

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/