The main downside though was one of the templates remained in the installing state. Apparently the easiest way to remove this template is by using some custom code, in this case I just used a console application within my dev box:

static void Main(string[] args)
{
FormsService fs = SPFarm.Local.Services.GetValue("");

foreach (FormTemplate ft in fs.FormTemplates)
{
if (ft.Name.Contains("Blackberry"))
{
ft.Delete();
}
}
}

Bookmark to:

InfoPath Form Template stays in “installing” state is a post from: Peter Gerritsen's blog

Not a big deal you would think. The only issue we had when using a FieldValue control is that the time that would be displayed was 1 or 2 hours later than the actual value.

After I changed this to a DateTimeField the difference was gone.

The only thing you need to add is a ControlMode=”Display” attribute to prevent editors from setting their own value in edit mode.

The difference is in the way the value is rendered. The FieldValue control does a ToString() and HtmlEncode on the value. The DateTimeField actually converts the value to local time by using the TimeZone class.

It’s all in the details!

Bookmark to:

DateTimeField vs. FieldValue in a publishing page is a post from: Peter Gerritsen's blog

The custom itemstyle checks for the difference between all day events, events that span multiple days and checks for start and end times.

To use this itemstyle you will need to add EventDate and EndDate to the CommonViewFields and reference the ddwrt namespace in the top of your xsl:

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

And finally here’s the itemstyle:

<xsl:template name="CalendarEvent" match="Row[@Style='CalendarEvent']" mode="itemstyle">
         <xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
       </xsl:variable>
          <xsl:variable name="LinkTarget">
             <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
       </xsl:variable>
       <xsl:variable name="MultiDayEvent">
           <xsl:choose>
               <xsl:when test="starts-with(@EndDate,substring(@EventDate, 0, 11))">
                   0
               </xsl:when>
               <xsl:otherwise>
                   1
               </xsl:otherwise>
           </xsl:choose>
       </xsl:variable>
       <xsl:variable name="StartTimeIsEndTime">
           <xsl:choose>
               <xsl:when test="contains(@EndDate,substring(@EventDate, 11, 9))">
                   1
               </xsl:when>
               <xsl:otherwise>
                   0
               </xsl:otherwise>
           </xsl:choose>
       </xsl:variable>
       <xsl:variable name="DisplayDate">
           <xsl:choose>
               <xsl:when test="$MultiDayEvent = 0">
                   <xsl:choose>
                       <xsl:when test="@fAllDayEvent = 0">
                        <xsl:choose>
                               <xsl:when test="$StartTimeIsEndTime = 1">
                                   <xsl:value-of select="ddwrt:FormatDateTime(string(@EventDate) ,1043 ,'dd-MM-yyyy H:mm')" />
                               </xsl:when>
                               <xsl:otherwise>
                                   <xsl:value-of select="ddwrt:FormatDateTime(string(@EventDate) ,1043 ,'dd-MM-yyyy H:mm')" /> - <xsl:value-of select="ddwrt:FormatDateTime(string(@EndDate) ,1043 ,'H:mm')" />
                               </xsl:otherwise>
                           </xsl:choose>
                       </xsl:when>
                       <xsl:otherwise>
                        <xsl:value-of select="ddwrt:FormatDateTime(string(@EventDate) ,1043 ,'dd-MM-yyyy')" />
                    </xsl:otherwise>
                   </xsl:choose>
               </xsl:when>
               <xsl:otherwise>
                   <xsl:choose>
                       <xsl:when test="@fAllDayEvent = 0">
                           <xsl:value-of select="ddwrt:FormatDateTime(string(@EventDate) ,1043 ,'dd-MM-yyyy H:mm')" /> - <xsl:value-of select="ddwrt:FormatDateTime(string(@EndDate) ,1043 ,'dd-MM-yyyy H:mm')" />
                       </xsl:when>
                       <xsl:otherwise>
                           <xsl:value-of select="ddwrt:FormatDateTime(string(@EventDate) ,1043 ,'dd-MM-yyyy')" /> - <xsl:value-of select="ddwrt:FormatDateTime(string(@EndDate) ,1043 ,'dd-MM-yyyy')" />
                       </xsl:otherwise>
                   </xsl:choose>
               </xsl:otherwise>
           </xsl:choose>
       </xsl:variable>
       <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
            <xsl:value-of select="$DisplayTitle"/>
        </a>
        <xsl:text> - </xsl:text><xsl:value-of select="$DisplayDate"/><br/>
    </xsl:template>

Bookmark to:

Displaying calendar items in an ItemStyle is a post from: Peter Gerritsen's blog

After installing an update for the Office Clients you are now prompted with a login box when you edit an Office document on a SharePoint site that uses FBA:

When you have a customized login page this will be shown instead, so users won’t be (or will be less) confused when they get a login form with your company’s branding applied.

Read more about it here:
http://blogs.msdn.com/sharepoint/archive/2009/05/13/update-on-sharepoint-forms-based-authentication-fba-and-office-client.aspx

Bookmark to:

Enhancements to Office client integration with Forms Based Authentication on SharePoint is a post from: Peter Gerritsen's blog

SPUtilty

Contains methods for redirecting users to the error page, access denied page or a custom url. You can get Full name and email adres of a user by passing in the logginname, send an email from the web context or determine if an lcid is an East-Asian lcid.

More information here:
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.utilities.sputility.aspx

SPBuiltinFieldId

Contains variables for all the Guids of the built in fields. No need to worry about the difference between dutch and english MOSS sites.

SPBuiltInContentTypeId

Contains variables for all the Guids of the built-in contenttypes.

SPDiffUtilty

Shows the differences between two strings in Html format. So comparing “This is an initial string” with “This” returns the following: “This is an initial string“

SPContentTypeId (structure)

Provides methods to determine the relationships between two contenttypes.

SPContentTypeUsage

Allows you to determine where contenttypes are used within the sitecollection. Here’s a useful post that shows code to audit the contenttype hierarchy:
http://soerennielsen.wordpress.com/2008/03/06/audit-your-content-type-hierarchy/

SPChangeQuery

Allows you to query your sitecollection for objects that have changed. This way you can audit changes in access rights for instance.

Bookmark to:

Useful SharePoint classes is a post from: Peter Gerritsen's blog

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(“<div id=\”bpvremoveitemdialog\” title=\”Product verwijderen?\”>”);
writer.WriteLine(“Weet u zeker dat u dit product uit uw winkelwagen wilt verwijderen?”);
writer.WriteLine(“<input type=\”hidden\” id=\”bpvremoveitemid\”/>”);
writer.WriteLine(“</div>”);

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 + "<br />";
}
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

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("<span>U heeft nog geen producten in uw winkelwagen</span>");

}

$("#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("<div id=\"bpvcategorytemplate\" style=\"display: none;\">");
writer.WriteLine("<h3>Productcategorie</h3>");
writer.WriteLine("<ul><li class=\"context\"><a href=\"#\" class=\"context context@category\">laden...</a></li></ul>");
writer.WriteLine("</div>");
// Productlist template
writer.WriteLine("<div id=\"bpvproducttemplate\" style=\"display: none;\">");
writer.WriteLine("<h3>Product</h3>");
writer.WriteLine("<ul><li class=\"context\"><a href=\"#\" class=\"Title ID@productid Description@description Code@productcode AttachmentUrl@imageurl\">geen items</a></li></ul>");
writer.WriteLine("</div>");
// Shoppingcart template
writer.WriteLine("<div id=\"bpvcarttemplate\" style=\"display: none;\">");
writer.WriteLine("<h3>Informatie en bestellen</h3>");
writer.WriteLine("<table><thead><tr><td class=\"ProductName\">Product</td><td>Aantal</td><td></td></tr></thead><tbody class=\"d\">");
writer.WriteLine("<tr class=\"context\"><td class=\"ProductName\">naam</td><td class=\"Amount\">aantal</td><td><a href=\"#\" class=\"bpvedit ProductID@productid Amount@amount\"><img src=\"/_layouts/images/ecabo/2009/page-edit.gif\" /></a> <a href=\"#\" class=\"bpvremove ProductID@productid\"><img src=\"/_layouts/images/ecabo/2009/bin.gif\" /></a></td></tr>");
writer.WriteLine("</tbody></table>");
writer.WriteLine("</div>");

// Item selector
writer.WriteLine("<div id=\"bpvitemselector\">");
writer.WriteLine("<h2>1. Selecteer uw producten</h2>");
writer.WriteLine("<div id=\"selector\">");
writer.WriteLine("<div id=\"bpvcategoriescontainer\"><h3>Productcategorie</h3></div>");
writer.WriteLine("<div id=\"bpvproductscontainer\"><h3>Product</h3></div>");
writer.WriteLine("</div>");
writer.WriteLine("<div id=\"bpvproductinfo\"><h3>Informatie en bestellen</h3>");
writer.WriteLine("<img src=\"/_layouts/images/blank.gif\" id=\"bpvproductimage\"/>");
writer.WriteLine("<span class=\"title\" id=\"bpvproducttitle\"></span>");
writer.WriteLine("<span class=\"description\"  id=\"bpvproductdescription\" /></span>");
writer.WriteLine("<label class=\"amount\">Aantal:</label><input type=\"text\" id=\"txtbpvproductamount\" name=\"bpvproductamount\"/>");
writer.WriteLine("<input type=\"hidden\" id=\"txtbpvproductid\" name=\"bpvproductid\"/>");
writer.WriteLine("<input type=\"hidden\" id=\"txtbpvproductcode\" />");
writer.WriteLine("<input type=\"button\" id=\"bpvaddproduct\" value=\"Voeg toe\"/>");
writer.WriteLine("</div>");
writer.WriteLine("</div>");

// Shoppingcart
writer.WriteLine("<div id=\"bpvshoppingcart\">");
writer.WriteLine("<h2>2. Lijst met uw bestelling</h2>");
writer.WriteLine("<div id=\"bpvcartcontent\"><span>U heeft nog geen producten in uw winkelwagen</span></div>");

writer.WriteLine("<a id=\"clearcart\" href=\"#\" onclick=\"clearCart(); return false;\">Alles verwijderen</a>");
writer.WriteLine("</div>");

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

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<bpvproduct> products = BPVProduct.GetAvailableProducts(category);

DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(List<bpvproduct>));
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<shoppingCartItem> ShoppingCart
{
get
{
if (HttpContext.Current.Session["BPVShoppingCart"] != null)
{
return (List<shoppingCartItem>)HttpContext.Current.Session["BPVShoppingCart"];
}
else
{
List<shoppingCartItem> shoppingCart = new List<shoppingCartItem>();
HttpContext.Current.Session.Add("BPVShoppingCart", shoppingCart);
return shoppingCart;
}
}
set
{
HttpContext.Current.Session["BPVShoppingCart"] = value;
}
}

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<shoppingCartItem> 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<shoppingCartItem> 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<shoppingCartItem> 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<shoppingCartItem> 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<shoppingCartItem> 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<shoppingCartItem> 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:

<?xml version="1.0" standalone="yes"?>
<configuration>
<system.web>
<httpHandlers>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</httpHandlers>
<compilation debug="true"/></system.web>
</configuration>

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

This is done by specifying a keyword query like 9:”folder/subfolder”. In this case the searchproperty 9 contains the path of the item.

While this worked well on our development environments and most of the browsers we tested on, a some browsers it failed. My colleague Arthur discovered it had something to do with the language setting of the browser. When we used Dutch (nl-NL) as preferred language the standard core search results web part didn’t return any items when using a query with a “/” in the conditions.

If you execute a KeyWordQuery or FullTextSqlQuery in your own code you have the possibility to specify a culture to use in the search. Unfortunately the core search results web part doesn’t provide you with an option to do this easily. In the end I came up with a “hack” to make this work. Just change the preferred languages the browser sends with each request in the OnInit of a webpart that inherits from the standards core results web part like so:

protected override void OnInit(EventArgs e)
{
	if (!string.IsNullOrEmpty(CultureOverrideTo))
	{
		if (this.Page.Request.UserLanguages.Length > 0)
			this.Page.Request.UserLanguages[0] = “en-US”;
	}

	base.OnInit(e);
}

Note: Because this modifies the current request this can have some consequences on other web parts on your page. So use it with care.

UPDATE:

This same behavior can also occur in custom search code. To fix this, simply specify the Culture of your KeyWordQuery or FullTextSqlQuery.

Bookmark to:

MOSS Search and browser languages is a post from: Peter Gerritsen's blog

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(“<table><tr>”);
updatePanel.AddLiteral(“<td></td><td>Ma</td><td>Di</td><td>Wo</td><td>Do</td><td>Vr</td></tr><tr>”);
updatePanel.AddLiteral(“<td>Ochtend</td><td>”);

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