Peter Gerritsen's blog » AJAX

Building an AJAX web part with jQuery (Part 3)

Peter Gerritsen — Tue, 31 Mar 2009 13:36:35 +0000

In part 1 of this series I explained a bit about the context and goal of creating an AJAX web part without using ASP.Net AJAX. I also showed the steps necessary for creating services that return data in the JSON format. In part 2 I showed you how to call these services from JavaScript and render the HTML for the data. In this last part I’ll show you how to use the jQuery UI and validation plugins.

jQuery UI

The jQuery UI plugin provides some useful widgets and effects to use in your jQuery based scripts. It also offers an advanced theme framework, so you don’t have to write all the css by yourself. You can use one of the included theme’s or roll your own with the ThemeRoller.

I’ve decided to use the UI plugin for tree things in my web part:

Datepicker widget to specify the orderdate
Dialog widget to show confirmation dialogs, edit forms and validation messages
Highlighting effect to focus the users attention to changing data, such as the shoppingcart

Datepicker

The datepicker enhances a standard text input box with a datapicker that slides out when the textbox receives focus. It contains different options for specifying the allowed dates, year/month selection and more. When it’s shown it will look like this:

Linking it to your input box is very simple. I use the following code:

$("#bpvorderdate").datepicker({
showOn: 'button',
minDate: +1, dateFormat: 'dd/mm/yy',
buttonImage: '/_layouts/images/calendar.gif',
buttonImageOnly: true
});

In this case, the user has to press a button (in this case an imagebutton) to open the datepicker.

Dialogs

Dialogs are a very useful way to give feedback to the user or asking for confirmation. In my web part I want to show a confirmation dialog when a user presses the delete icon next to a product in the shoppingcart or the “clear shoppingcart” button. The user will be presented with the following dialog:

Showing this is very easy. First we create a function that is called when the page is initialized:

function initializeDeleteItemDialog() {
var doOk= function() {
var paramsdata = {
"productId" : $("#bpvremoveitemid").val()
}
$.ajax({
type: "POST", url: "/_layouts/intranet2009/bpvshoppingcart.asmx/DeleteItem",
data: JSON.stringify(paramsdata),
contentType: "application/json;charset=utf-8",
dataType: "json",
success:rendershoppingcart,
error: showError
});

$("#bpvremoveitemdialog").dialog("close");
}
var doCancel = function()
{
$("#bpvremoveitemdialog").dialog("close");
}
var dialogOpts = {
modal: true,
buttons: {"Bewaren": doCancel, "Verwijderen": doOk},
autoOpen: false
}
$("#bpvremoveitemdialog").dialog(dialogOpts);
}

We first specify the code to execute when the user presses the Ok button. In this case we’ll call the DeleteItem method of the shoppingcart web service and then close the dialog. The Cancel button will close the dialog straight away. In the dialog options we specify the buttons with their callback. Then we hook up the dialog to the html element we want to show. The html is written out in the Render method of the web part:

writer.WriteLine(“”);
writer.WriteLine(“Weet u zeker dat u dit product uit uw winkelwagen wilt verwijderen?”);
writer.WriteLine(“”);
writer.WriteLine(“”);

To open the dialog we just have to call the dialog method again with “open” as parameter:

function removeProduct(element) {
$("#bpvremoveitemid").val($(element).attr("productid") );
$("#bpvremoveitemdialog").dialog("open");
}

Validation

Validation of your inputs is supposed to be really easy with the validation plugin. Unfortunately this doesn’t count when you combine it with ASP.Net Webforms. With the validation plugin you attach the validation to a form within your html. Because ASP.Net Webforms uses one form tag for the entire page, this doesn’t allow you to set validation to a group of elements that would normally be contained within their own form tag. The solution I came up with for now only validates 1 element at a time.
If you now of a way to assign one validation and remove it again before assigning a new validation, let me know.

First we hook up all the validations we want on the form and we specify a custom validation
rule, called dutchDate:

$.validator.addMethod(
"dutchDate", function(value,element)
{ return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);},
"Voer een datum in van het formaat dd/mm/yyyy" );
$("form").validate({
onsubmit: false,
onfocusout: false,
onkeyup: false,
onclick: false,
showErrors: showValidationError,
rules: {
bpvproductamount: {
required: true,
number: true
},
bpvproductid: {
required: true
},
bpvorderdate: {
required: true,
dutchDate: true
}
},
messages: {
bpvproductamount: {
required: "Aantal is een verplicht veld",
number: "Aantal moet een getal zijn"
},
bpvproductid: {
required: "U heeft geen product geselecteerd" },
bpvorderdate: {
required: "Bezorg-/ophaaldatum is een verplicht veld",
dutchDate: "Bezorg-/ophaaldatum moet in het formaat dd/mm/yyyy zijn"
}
}
});

I only want the validation to occur when I call it on specific elements from code, so we specify false on every event it normally triggers on. When there are errors, I want to call a showValidationError function that shows the errors in a dialog box. Then we specify the rules and the messages we want to show when the rule isn’t matched. “bpvproductamount” equals the name attribute of the input element.

To call the validation we use the element method of the validation plugin:

if ($("form").validate().element("#txtbpvproductid") && $("form").validate().element("#txtbpvproductamount"))
{
// valid, so perfom actions
}

As soon as an element doesn’t pass validation, the method we attached to the showErrors event is called. Unfortunately this means only one error at a time will popup if multiple elements don’t pass validation. To show the validation messages, we’ll make use of the Dialog widget once again:

function showValidationError(errorMap, errorList)
{
var message = "";
var i;
for(i=0; i < errorList.length; i++) {
message += errorList[i].message + "
";
}
if (message.length > 0) {
showMessage(message);
}
}

Conclusion

Building an AJAX web part with jQuery (and some plugins) can result in a very responsive UI with a good user experience. In the end, I don’t think building a web part with ASP.Net AJAX would have taken me less time as well. I’m not happy with the validation though. Although the jQuery validation plugin is very useful in most web frameworks (including ASP.Net MVC), it seems that it doesn’t combine well with web forms. But I haven’t been able to find a better plugin for it.

Bookmark to:

Building an AJAX web part with jQuery (Part 3) is a post from: Peter Gerritsen's blog

Building an AJAX web part with jQuery (Part 2)

Peter Gerritsen — Tue, 31 Mar 2009 10:29:31 +0000

In part 1 of this series I explained a bit about the context and goal of creating an AJAX web part without using ASP.Net AJAX. I also showed the steps necessary for creating services that return data in the JSON format. In this post I’ll show you how to call these services from JavaScript and insert the data in the HTML placeholders rendered by the web part.

Calling the generic handler for products and categories

jQuery offers various methods to perform asynchronous calls to web resources. To retrieve JSON the most used are jQuery.ajax and jQuery.getJSON. The last one uses a HTTP GET request and is simpler to use, the jQuery.ajax method offers more options/flexibility. For retrieving the product categories and the products, I’ve decided to go with getJSON.
The code for retreiving the categories looks as follows:

function showProductCategories() {
$.getJSON(bpvweburl + "/_layouts/intranet2009/bpv.ashx",
{type: "categories"},
function(data)
{
var categoriescontainer = $("#bpvcategoriescontainer");
categoriescontainer.empty();
var list = categoriescontainer.append($("#bpvcategorytemplate").html());
var directive = {'a.context[onclick]' : '"showProducts(this);return false;"'};
list.autoRender( data, directive );
});
}

The first line is responsible for calling the handler. It specifies a inline callback method to handle the returned data. The JSON returned is processed by the PURE templating plugin. I’ve blogged about using this before.

Calling the shopping cart web service

For getting the data from the web service, we’ll use the jQuery.ajax method. That’s because we need to do a HTTP POST request as well as specify some other options for the request. For more information see this post by Dave Ward. To initially load the shopping cart we use the following code:

function loadShoppingcart()
{
$.ajax({
type: "POST",
url: "/_layouts/ecabointranet2009/bpvshoppingcart.asmx/GetItems",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: rendershoppingcart,
error: showError
});
}

function rendershoppingcart(msg) {
var cartcontainer = $("#bpvcartcontent");
cartcontainer.empty();

if (msg.d.length > 0)
{
var cartitemslist = cartcontainer.append($("#bpvcarttemplate").html());

var directives = {
'a.bpvedit[onclick]' : '"editAmount(this); return false;"',
'a.bpvremove[onclick]' : '"removeProduct(this); return false;"'
}
cartitemslist.autoRender( msg.d, directives );
}
else
{
cartcontainer.append("U heeft nog geen producten in uw winkelwagen");

}

$("#bpvcartcontent").effect("highlight", {color: "#ffcf57"}, 700, null);
}

function showError(xhr, status, error)
{
var err = eval("(" + xhr.responseText + ")");

$("#bpverrordialog span.errormessage").html(err.Message);

$("#bpverrordialog").dialog("open");
}

As you can see we post to the GetItems method of the asmx. We need to specify a empty JSON object as data (more information on that in this post, again by Dave Ward) and specify the contentType we want returned. When the AJAX call returns an error, we’ll call the showError method (which uses the jQuery UI dialog widget I’ll tell more about in part 3). When the call is successful, the rendershoppingcart method is called. This checks if the cart is empty, so we can display a message in that case, or uses PURE again for rendering the cart contents. To provide visual feedback to the user when the cart is updated, we’ll use the highlight effect on the cart to attract the attention of the user.
If we want to pass in parameters with an AJAX call (like the productId when we want to delete an item from the cart), we need to construct a parameters object and serialize that as string for usage in the call:

var paramsdata = { "productId" : $("#bpvremoveitemid").val() }

$.ajax({
type: "POST",
url: "/_layouts/ecabointranet2009/bpvshoppingcart.asmx/DeleteItem",
data: JSON.stringify(paramsdata),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: rendershoppingcart,
error: showError
});

As you can see, we use a JSON.stringify method for serializing the object as a string.

You can download the scriptfile needed for this from JSON.org.

All the other methods in the web service are called in the same way, so there’s no need to inundate you with more code on that. The only thing left is to show you parts of the contents of the Render method in the webpart:

// Templates
// Categorylist template
writer.WriteLine("");
writer.WriteLine("Productcategorie");
writer.WriteLine("laden...");
writer.WriteLine("");
// Productlist template
writer.WriteLine("");
writer.WriteLine("Product");
writer.WriteLine("geen items");
writer.WriteLine("");
// Shoppingcart template
writer.WriteLine("");
writer.WriteLine("Informatie en bestellen");
writer.WriteLine("");
writer.WriteLine("");
writer.WriteLine("Product Aantal 
naam aantal  ");
writer.WriteLine("");

// Item selector
writer.WriteLine("");
writer.WriteLine("1. Selecteer uw producten");
writer.WriteLine("");
writer.WriteLine("Productcategorie");
writer.WriteLine("Product");
writer.WriteLine("");
writer.WriteLine("Informatie en bestellen");
writer.WriteLine("");
writer.WriteLine("");
writer.WriteLine("");
writer.WriteLine("Aantal:");
writer.WriteLine("");
writer.WriteLine("");
writer.WriteLine("");
writer.WriteLine("");
writer.WriteLine("");

// Shoppingcart
writer.WriteLine("");
writer.WriteLine("2. Lijst met uw bestelling");
writer.WriteLine("U heeft nog geen producten in uw winkelwagen");

writer.WriteLine("Alles verwijderen");
writer.WriteLine("");

Product	Aantal
naam	aantal

As you can see, all we do is write out HTML. First I write out the HTML needed for the databinding of the categories and products (I removed that because it’s the same as the category one). Then some placeholders and form elements are rendered. There’s a little more HTML off course, but you get the point, NO CODE

In the next part I’ll show you how to use some jQuery plugins to enhance the experience of the user and validation of the input.

Bookmark to:

Building an AJAX web part with jQuery (Part 2) is a post from: Peter Gerritsen's blog

Building an AJAX web part with jQuery (Part 1)

Peter Gerritsen — Mon, 30 Mar 2009 10:08:51 +0000

In this series of posts I will describe how I build a web part full of AJAX functionality using jQuery and some plugins for jQuery.

Why?

ASP.Net AJAX is quite hard to implement using only code. Besides that, having multiple updatepanels and multiple triggers outside of these updatepanels, can complicate stuff very quickly. So I decided to see how much time I would need to build the required functionality using JavaScript with jQuery.

What?

The web part of choice was one that would allow visitors of the portal to order a bunch of products from different categories. Products are stored in a list and have a choice sitecolumn to specify the category of the item. Products can be selected and added to a shopping cart. After the wanted items are added to the shopping cart, the user can specify some comments, a handling method (Pick-up or deliver) and a delivery-/pickup date and send in the order. The order information is saved in a list, the user gets a confirmation email and the shopping cart is cleared. The resulting web part look like this (sorry for the dutch interface):

How?

For getting the categories and products we’ll use a generic handler. This offers the possibility of caching and is perfectly suitable for read-only data access. The shopping cart and order functionality will be provided through a ASP.Net Webservice. Both the handler and web service will return JSON data. We’ll need ASP.Net 3.5 for this.

The web part will only override the render method and write out the needed HTML. So no control instantiation, event handling or other code.

Useful links

Dave Ward’s weblog on encosia.com provides a vital source for information on combining jQuery and ASP.Net. Also Rick Strahl has some useful posts on this subject.

Building the products handler

We’ll start by building the Generic Handler that returns JSON data for categories and products. We’ll differentiate between the two by passing in the type with the query string. I’ve created two classes for data retrieval from the list in SharePoint, one that returns the choices of the categories and one that returns the products based on the category. We’ll then use the DataContractJsonSerializer to generate and return the JSON for this data:

public void ProcessRequest(HttpContext context)
{
try
{
if (string.IsNullOrEmpty(context.Request["type"]))
throw new ArgumentException("type not specified or null");

string type = context.Request["type"];

context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(300));
context.Response.Cache.SetCacheability(HttpCacheability.Public);

if (type.Equals("categories", StringComparison.InvariantCultureIgnoreCase))
{
StringCollection categories = BPVProductCategory.GetProductCategories();

DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(StringCollection));
ser.WriteObject(context.Response.OutputStream, categories);
}
if (type.Equals("products", StringComparison.InvariantCultureIgnoreCase))
{
if (string.IsNullOrEmpty(context.Request["category"]))
throw new ArgumentException("category not specified or null");

string category = HttpUtility.UrlDecode(context.Request["category"]);

Ecabo.Intranet2009.SharePoint.Diagnostics.Logging.LogMessageFormat("Category: {0}", category);

List products = BPVProduct.GetAvailableProducts(category);

DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(List));
ser.WriteObject(context.Response.OutputStream, products);
}
}
catch (Exception ex)
{
context.Response.Write(string.Format("ERROR: {0}", ex.Message));
}
}

Building the shopping cart web service

Next, we need to create a web service that will allows us to modify the shopping cart with add, remove, change and clear methods. This web service will also contain a method to place the order. To make sure this web service will return JSON when requested, we’ll decorate the class with the ScriptService attribute (normally you just have to comment out the automatically included line in the class definition) and we decorate
the methods with the ScriptMethod attribute in which we specify the ResponseFormat to be JSON. To store the shoppingcart between requests to the service we’ll use the Session. In order for that to work we add the EnableSession=true parameter to the WebMethod attribute of each method. The resulting code looks like this:

[WebService(Namespace = "http://sharepoint.ecabo.nl/200903/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class BPVShoppingCart : System.Web.Services.WebService
{
private List ShoppingCart
{
get
{
if (HttpContext.Current.Session["BPVShoppingCart"] != null)
{
return (List)HttpContext.Current.Session["BPVShoppingCart"];
}
else
{
List shoppingCart = new List();
HttpContext.Current.Session.Add("BPVShoppingCart", shoppingCart);
return shoppingCart;
}
}
set
{
HttpContext.Current.Session["BPVShoppingCart"] = value;
}
}

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List GetItems()
{
try
{
return ShoppingCart;
}
catch (Exception ex)
{
Ecabo.Intranet2009.SharePoint.Diagnostics.Logging.LogException(ex);
return null;
}
}

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List AddItem(string productName, int productId, string productCode, int amount)
{
try
{
ShoppingCartItem item = ShoppingCart.Find(p => p.ProductID == productId);
if (item == null)
{
item = new ShoppingCartItem();
item.Amount = amount;
item.ProductCode = productCode;
item.ProductID = productId;
item.ProductName = productName;
ShoppingCart.Add(item);
}
else
{
item.Amount += amount;
}

return ShoppingCart;
}
catch (Exception ex)
{
Ecabo.Intranet2009.SharePoint.Diagnostics.Logging.LogException(ex);
return null;
}
}

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List DeleteItem(int productId)
{
try
{
ShoppingCartItem item = ShoppingCart.Find(p => p.ProductID == productId);
if (item != null)
{
ShoppingCart.Remove(item);
}

return ShoppingCart;
}
catch (Exception ex)
{
Ecabo.Intranet2009.SharePoint.Diagnostics.Logging.LogException(ex);
return null;
}
}

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List ChangeAmount(int productId, int amount)
{
try
{
if (amount == 0)
return DeleteItem(productId);

ShoppingCartItem item = ShoppingCart.Find(p => p.ProductID == productId);
if (item != null)
{
item.Amount = amount;
}

return ShoppingCart;
}
catch (Exception ex)
{
Ecabo.Intranet2009.SharePoint.Diagnostics.Logging.LogException(ex);
return null;
}
}

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List ClearCart()
{
try
{
ShoppingCart.Clear();
return ShoppingCart;
}
catch (Exception ex)
{
Ecabo.Intranet2009.SharePoint.Diagnostics.Logging.LogException(ex);
return null;
}
}

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List PlaceOrder(string comments, string deliveryType, string deliveryDate)
{
try
{
string products = "";

foreach (ShoppingCartItem item in ShoppingCart)
{
products += string.Format("{0} - {1} - {2}\r\n", item.ProductCode, item.Amount, item.ProductName);
}

BPVBestelling bestelling = new BPVBestelling();
bestelling.Comments = comments;
bestelling.Handling = deliveryType;
bestelling.HandlingDate = Convert.ToDateTime(deliveryDate, new CultureInfo("nl-NL"));
bestelling.Title = DateTime.Now.ToString("yyyyMMdd_HHmm") + "_" + SPContext.Current.Web.CurrentUser.Email;
bestelling.Products = products;
bestelling.PlacedBy = SPContext.Current.Web.CurrentUser;

if (BPVBestelling.AddBestelling(bestelling))
{
BPVBestelling.SendConfirmationEmail(bestelling, ShoppingCart);
ShoppingCart.Clear();
return ShoppingCart;
}
else
throw new Exception("Het is niet mogelijk om uw bestelling te verwerken");
}
catch (Exception ex)
{
Ecabo.Intranet2009.SharePoint.Diagnostics.Logging.LogException(ex);
throw new Exception("Het is niet mogelijk om uw bestelling te verwerken", ex);
}
}
}

There’s one more thing needed for letting the web service return the data in JSON format. We need to include a httpHandler in the web.config for the asmx extension that routes the request to the ScriptHandlerFactory. An easy way to do this is for your SharePoint webapp by creating a blank web.config and placing it in a subfolder of the layouts directory where you also place the asmx file. The following is all you need in that web.config file:

Next parts

That wraps it up for this first post in the series. In part 2 I’ll show you how to call these services from jQuery and insert the data in the HTML of the webpart. In part 3 we’ll enhance the experience by including dialogs and validation in the solution.

Bookmark to:

Building an AJAX web part with jQuery (Part 1) is a post from: Peter Gerritsen's blog

Using a template plugin for jQuery to parse JSON data

Peter Gerritsen — Fri, 13 Mar 2009 11:47:50 +0000

When you’re building an AJAX control in .Net there a a few possibilities. One of them is using AJAX.Net updatepanels. This saves you from writing tedious javascript code to refresh parts of you page. With the arrival of javascript libraries such as jQuery it’s much easier to create the AJAX functionality you want with javascript. However, you still have to write quite a lot of DOM manipulation code and use string concatenation
to process any JSON results and render the correct HTML.

Fortunately some javascript template engines are developed to make this easier. These engines come in all shapes and sizes, ranging from engines with an own templating syntax to simple data binding engines.

On the first side of the spectrum, there are engines such as jTemplates, this one uses python like syntax to create the instructions. On the other end engines like Chain.js and PURE live, these can be considered more a databinding egines. The last ones make use of classnames for the databinding, like in the following Chain.js example:


	
		Library Name

$('#quickdemo').items( [
		{library:'Prototype'},
		{library:'jQuery'},
		{library:'Dojo'},
		{library:'MooTools'}
	]).chain();

In this case the library field in the JSON objects is put into the element with “library” in de classname. The nice thing about Chain.js is the fact that it monitors the items collection for changes. Adding or removing items from script, automatically updates the generated HTML. So filtering and sorting can be very easily accomplished, some very easy to follow examples are available on the companion website.

PURE uses the same classnames based system for the databinding. Consider the following example:


	
		Beebole

var data = {
	"reference": "3456",
	"sites": [{
			"name": "Beebole",
			"url": "http://beebole.com"
		},
		{
			"name": "BeeLit",
			"url": "http://beeLit.com"
		},
		{
			"name": "PURE",
			"url": http://beebole.com/pure
		}]
	};
	$('ol.siteList').autoRender(data);

The url@href and reference@id classnames provide a way to set attributes of the databound elements.

But what if you don’t want to decorate your HTML elements with extra classnames to support the databinding? Or you want to handle some events of the generated elements?

For this PURE supports directives. You create your directives and pass them into the autoRender or render functions. Consider the following example:


	
		
			laden...

function showProductCategories()
{
    $.getJSON(bpvweburl + "/_layouts/ecabointranet2009/bpv.ashx", {type: "categories"}, function(data)
    {
        var categoriescontainer = $("#bpvcategoriescontainer");
        categoriescontainer.empty();

        var list = categoriescontainer.append($("#bpvcategorytemplate").html());

        var directive = {'a.context[onclick]' : '"showProducts(this); return false;"'}

        list.autoRender( data, directive );
    });
}

Here we get some JSON from a handler, put the html from the template into a new element, and bind the JSON to that template. When binding the JSON data, we attach a javascript function to the onclick event of the generated anchor tags.

Much more can be accomplished by using directives, such as creating an alternating row style by setting a class during the binding of the items. For more information about using directives in PURE, read this page.

There are loads more things possible in PURE or in the other engines, the best way to find out is to read the docs and try some things out.

Bookmark to:

Using a template plugin for jQuery to parse JSON data is a post from: Peter Gerritsen's blog

Adding AJAX.Net to your MOSS WebParts

Peter Gerritsen — Wed, 18 Feb 2009 12:53:37 +0000

I know there are loads of posts on this subject already, but in this one I’ll try to give some useful tips on this subject.

First, you need to add AJAX.Net entries to your web.config of the MOSS site. A very easy way to do this is by using the Ajaxify stsadm extensions.

Simply add the included wsp to your solutions and deploy. After that you can easily add the entries by running the stsadm –addajaxmoss command. Unfortunately you need to add one entry manually, but that is given as part of the output when you run the command.

Next you need to add a ScriptManager to the pages with the AJAX enabled webparts. You can off course modify the masterpage. I chose to create a base web part that checks if a ScriptManager has been added to the page and adds it if necessary:

protected override void OnInit(EventArgs e)
{
base.OnInit(e);

//Register the ScriptManager

ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);

if (scriptManager == null)
{
scriptManager = new ScriptManager();
scriptManager.ID = “ScriptManager1″;

scriptManager.EnablePartialRendering = true;

this.Page.Form.Controls.AddAt(0, scriptManager);
}
}

Because MOSS needs a lot of JavaScript to function properly, this unfortunately requires another fix. You can read more about it here. I added the fix to the base webpart with the following code:

protected override void CreateChildControls()
{
//Add fix according to http://msdn2.microsoft.com/en-us/library/bb861877.aspx

EnsurePanelFix();
}

private void EnsurePanelFix()
{
if (this.Page.Form!= null)
{
String fixupScript = @”
_spBodyOnLoadFunctionNames.push(“”_initFormActionAjax”");
function _initFormActionAjax()
{
if (_spEscapedFormAction == document.forms[0].action)
{
document.forms[0]._initialAction = document.forms[0].action;
}
}

var RestoreToOriginalFormActionCore = RestoreToOriginalFormAction;
RestoreToOriginalFormAction = function()
{
if (_spOriginalFormAction != null)
{
RestoreToOriginalFormActionCore();
document.forms[0]._initialAction = document.forms[0].action;
}
}”;

ScriptManager.RegisterStartupScript(this, typeof(BaseWebPart), “UpdatePanelFixup”, fixupScript, true);
}
}

Because all the content you want to include in an UpdatePanel needs to be added to the ControlTemplateContainer.Controls collection, it’s not possible to write out any html you need between controls in the UpdatePanel by using the standard HtmlTextWriter.WriteLine method in the Render method. The easiest way is to add LiteralControls to the controlcollection of the UpdatePanel (with thanks to my collegue Wouter Lemaire for giving me the tip). To make this even easier, I’ve added the following extension method to my project:

public static void AddLiteral(this UpdatePanel updatePanel, string html)
{
Literal lit = new Literal();
lit.Text = html + “\r\n”;
updatePanel.ContentTemplateContainer.Controls.Add(lit);
}

You can call this method from the CreateChildControls method in your web part like so:

updatePanel.AddLiteral(“”);
updatePanel.AddLiteral(“”);
updatePanel.AddLiteral(“ Ma Di Wo Do Vr
Ochtend ”);

To indicate progress you need some form of visual feedback to the user. For this you need to set the ProgressTemplate of the UpdatePanel. For this you need to create a class that implements the ITemplate interface.
Then you implement the InstantiateIn method to create a template:
public void ITemplate.InstantiateIn(Control container)
{
Label lbl = new Label();
lbl.Text = “Progress….”;
container.Controls.Add(lbl);
}

Then add an object of this class to the ProgressTemplate property of the UpdatePanel:
updateProgress.ProgressTemplate = new ProgressTemplate();

Bookmark to:


Adding AJAX.Net to your MOSS WebParts is a post from: Peter Gerritsen's blog