Web.Config for Using Ajax Tool Kit

If you use VS 2008 to create a Ajax web site, that’s fine. As VS 2008 will create web.config for you. But if you still use VS 2005, you will have to edit the web.config by youself.

So I post a web.config for reference.

<?xml version="1.0"?>
<configuration>
	<configSections>
		<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
			<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
				<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
				<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
					<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>
					<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
					<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
				</sectionGroup>
			</sectionGroup>
		</sectionGroup>
	</configSections>
	<system.web>
		<pages>
			<controls>
				<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
			</controls>
		</pages>
		<!--
          Set compilation debug="true" to insert debugging
          symbols into the compiled page. Because this
          affects performance, set this value to true only
          during development.
    -->
		<compilation debug="true">
			<assemblies>
				<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
				<add assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71E9BCE111E9429C"/>
				<add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
				<add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/></assemblies>
		</compilation>
		<httpHandlers>
			<remove verb="*" path="*.asmx"/>
			<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
			<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
			<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
		</httpHandlers>
		<httpModules>
			<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
		</httpModules>
	</system.web>
	<runtime>
		<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
			<dependentAssembly>
				<assemblyIdentity name="System.Web.Extensions" publicKeyToken="31BF3856AD364E35" culture="neutral"/>
				<bindingRedirect oldVersion="1.0.61025.0" newVersion="3.5.0.0"/>
			</dependentAssembly>
			<dependentAssembly>
				<assemblyIdentity name="System.Web.Extensions" publicKeyToken="31BF3856AD364E35" culture="neutral"/>
				<bindingRedirect oldVersion="2.0.0.0" newVersion="3.5.0.0"/>
			</dependentAssembly>
		</assemblyBinding>
	</runtime>
	<system.web.extensions>
		<scripting>
			<webServices>
				<!-- Uncomment this line to customize maxJsonLength and add a custom converter -->
				<!--
      <jsonSerialization maxJsonLength="500">
        <converters>
          <add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>
        </converters>
      </jsonSerialization>
      -->
				<!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->
				<!--
        <authenticationService enabled="true" requireSSL = "true|false"/>
      -->
				<!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved
           and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and
           writeAccessProperties attributes. -->
				<!--
      <profileService enabled="true"
                      readAccessProperties="propertyname1,propertyname2"
                      writeAccessProperties="propertyname1,propertyname2" />
      -->
			</webServices>
			<!--
      <scriptResourceHandler enableCompression="true" enableCaching="true" />
      -->
		</scripting>
	</system.web.extensions>
	<system.webServer>
		<validation validateIntegratedModeConfiguration="false"/>
		<modules>
			<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
		</modules>
		<handlers>
			<remove name="WebServiceHandlerFactory-Integrated"/>
			<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
			<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
			<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
		</handlers>
	</system.webServer>
</configuration>

PageRequestManagerParserErrorException “error parsing near ‘”

I had this problem when I use Ajax updatePanel.
Most often this error appears when we use Response.Write to modify rendered output, I am not aware of this error with load balancing, but just check, may it will be the reson:

1) check if you have the code that calls Respose.Write in code behind(just search for it in solution)

2) check if you have tag in markup

3) if you found one of above, replace them with literals and assign text to that literals in OnPrerender event of the page, it should solve the issue.

If you dont have Response.Write calls in the code, try to look at this article to find more:

http://weblogs.asp.net/leftslipper/archive/2007/02/26/sys-webforms-pagerequestmanagerparsererrorexception-what-it-is-and-how-to-avoid-it.aspx

Create a Ajax WebPart for SharePoint

Today, I followed Abdulla’s example to create a Ajax Webpart. It works very well. One thing really struggle me is I add Web Extenstion 3.5 instead of 1.06.

First of all you need to add
· System.Web
· System.Web.Extensions (v1.06)
· System.Web.Extensions.Design (v1.06)
. Syste.Data

Modify the SharePoint Web.Config file. http://msdn.microsoft.com/en-us/library/bb861898.aspx
The below is the c# code

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;
using System.Data;
using System.Data.SqlClient;

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;
using System.ComponentModel;

namespace SharePointAjaxWebPart
{
    [Guid("579e8377-d57c-4b5e-98c1-1001c20301cc")]
    public class MyAjaxWebPart : System.Web.UI.WebControls.WebParts.WebPart
    {

    private GridView _grdSearch;
    private TextBox _txtSearch;
    private Button _btnSearch;
    private Label _lblMsg;
    private UpdatePanel _updatePanel;
    private UpdateProgress _updateProgress;
    private static readonly object EventSubmitKey = new object();

    public MyAjaxWebPart()
    {
        this.ExportMode = WebPartExportMode.All;
    }

    [WebBrowsable(true), Personalizable(PersonalizationScope.Shared), Category("AbdHaq Property")]
    public string LoadingImageURL {
        get {
            object _obj = ViewState["LoadingImageURL"];
            if (_obj == null) {
                return string.Empty;
            }
            else {
                return (string)ViewState["LoadingImageURL"];
            }

        }
        set { ViewState["LoadingImageURL"] = value; }
    }
    public event EventHandler Submit {
        add { Events.AddHandler(EventSubmitKey, value); }
        remove { Events.RemoveHandler(EventSubmitKey, value); }
    }

    private void _btnSearch_Click(object source, EventArgs e)
    {

        _grdSearch.Visible = false;

        System.Threading.Thread.Sleep(1500);

        ////Create DataTable Structure
        DataTable Dtable = new DataTable("tmpTable");
        ////User_ID Col
        Dtable.Columns.Add("User_ID", typeof(int));
        Dtable.Columns["User_ID"].AutoIncrement = true;
        Dtable.Columns["User_ID"].AutoIncrementSeed = 1;
        ////User_Name Col
        Dtable.Columns.Add("User_Name", typeof(string));
        ////User_Department Col
        Dtable.Columns.Add("User_Department", typeof(string));

        DataRow dr = default(DataRow);

        dr = Dtable.NewRow();
        dr["User_Name"] = "Abdulla Abdelhaq";
        dr["User_Department"] = "Technical";
        Dtable.Rows.Add(dr);

        dr = Dtable.NewRow();
        dr["User_Name"] = "Noura Ahmad";
        dr["User_Department"] = "Technical";
        Dtable.Rows.Add(dr);

        dr = Dtable.NewRow();
        dr["User_Name"] = "Oday Mohammad";
        dr["User_Department"] = "Production";
        Dtable.Rows.Add(dr);

        string _searchFor = "%";

        if (_txtSearch.Text != string.Empty) {
            _searchFor = _txtSearch.Text;
        }

        DataView dtView = new DataView(Dtable);
        dtView.RowFilter = "User_Name LIKE '%'+'" + _searchFor + "'+'%'";

        if (dtView.Count > 0) {
            _grdSearch.Visible = true;
            _grdSearch.AutoGenerateColumns = true;
            _grdSearch.DataSource = dtView;
            _grdSearch.DataBind();
            _lblMsg.Text = string.Empty;
        }
        else {
            _lblMsg.Text = "<font color='red'>Sorry, No Data Found!.</font>";
            _grdSearch.Visible = false;
        }

    }

    protected override void CreateChildControls()
    {
        Controls.Clear();

        _updatePanel = new UpdatePanel();
        {
            _updatePanel.ID = "UpdatePanel1";
            _updatePanel.ChildrenAsTriggers = true;
            _updatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
        }

        _updateProgress = new UpdateProgress();
        _updateProgress.ID = "UpdateProgress1";

        string _templateHTML = null;
        if (LoadingImageURL == string.Empty) {
            _templateHTML = "<span>Loading ...</span>";
        }
        else {
            _templateHTML = "<div><img alt='Loading...' src='" + LoadingImageURL.Trim() + "'/></div>";
        }

        _updateProgress.ProgressTemplate = new ProgressTemplate(_templateHTML);

        _updateProgress.AssociatedUpdatePanelID = _updatePanel.ClientID;

        this.Controls.Add(_updatePanel);

        _grdSearch = new GridView();
        _grdSearch.ID = "GrdSearch";

        _txtSearch = new TextBox();
        _txtSearch.ID = "txtSearch";

        _btnSearch = new Button();
        _btnSearch.Text = "Search";
        _btnSearch.ID = "BtnSearch";

        _lblMsg = new Label();
        _lblMsg.ID = "lblMsgError";

        _btnSearch.Click += _btnSearch_Click;

        _updatePanel.ContentTemplateContainer.Controls.Add(_txtSearch);
        _updatePanel.ContentTemplateContainer.Controls.Add(_btnSearch);
        _updatePanel.ContentTemplateContainer.Controls.Add(_grdSearch);
        _updatePanel.ContentTemplateContainer.Controls.Add(_lblMsg);
        _updatePanel.ContentTemplateContainer.Controls.Add(_updateProgress);

    }

    protected override void OnInit(EventArgs e)
    {

        base.OnInit(e);

        //get the existing ScriptManager if it exists on the page
        ScriptManager _AjaxManager = ScriptManager.GetCurrent(this.Page);
        if (_AjaxManager == null) {

            //create new ScriptManager and EnablePartialRendering
            _AjaxManager = new ScriptManager();
            _AjaxManager.EnablePartialRendering = true;

            //Fix problem with postbacks and form actions (DevDiv 55525)
            Page.ClientScript.RegisterStartupScript(this.GetType(), this.ID, "_spOriginalFormAction = document.forms[0].action;", true);

            //tag:"form" att:"onsubmit" val:"return _spFormOnSubmitWrapper()"
            //blocks async postbacks after the first one
            //not calling "_spFormOnSubmitWrapper()" breaks all postbacks
            //returning true all the time, somewhat defeats the purpose of the
            //_spFormOnSubmitWrapper() which is to block repetitive postbacks,
            //but it allows MS AJAX Extensions to work properly

            if ((this.Page.Form != null)) {
                string formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"];
                if (!string.IsNullOrEmpty(formOnSubmitAtt) & formOnSubmitAtt == "return _spFormOnSubmitWrapper();") {
                    this.Page.Form.Attributes["onsubmit"] = "_spFormOnSubmitWrapper();";
                }
                //add the ScriptManager as the first control in the Page.Form
                this.Page.Form.Controls.AddAt(0, _AjaxManager);

            }
        }

    }

    protected override void RenderContents(System.Web.UI.HtmlTextWriter writer)
    {
        _updatePanel.RenderControl(writer);
    }
}
//Class for Building progress tempales
public class ProgressTemplate : ITemplate
{
    private string template;

    public ProgressTemplate(string temp)
    {
        template = temp;
    }

    public void InstantiateIn(Control container)
    {
        LiteralControl ltr = new LiteralControl(this.template);
        container.Controls.Add(ltr);
    }

}

}

The full tutorial is here

Calling UserControl’s Event in ASP .NET Page By AJAX

If you have a usercontrol which has a button click event and you want to raise a postback like the button is clicked.

User Control code to declare a global variable in javdsciprt for Postback

    Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)
        MyBase.OnLoad(e)

        Dim sm As ScriptManager = ScriptManager.GetCurrent(Me.Page)
        ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "ClientID", String.Format("var logoutClientId = '{0}$LogoutLink';", Me.ClientID.Replace("_", "$")), True)

    End Sub

    Public Sub LogoutLink_Click(ByVal sender As Object, ByVal e As EventArgs) Handles LogoutLink.Click
        Page.LogoutCurrentUser("Sucessfully logged out.")
    End Sub

The below javascipt is to logout when a full postback raised.

window.onunload = function(){ unloadPageAndError();}

var loader = function(sender, args) {
    if(!args.get_isPartialLoad()){
        PageMethods.CheckLogin(function(result){
            if(result)
            {
                unloadPageAndError();
            }
        },
        function(error)
        {
            unloadPageAndError();
        }
        );
    }
}

var unloadPageAndError = function()
{
    <strong>__doPostBack(logoutClientId,'')</strong>
}

Sys.Application.add_load(loader);

Below is a Web Method in your web page, you need to enable your scriptmanger.enablepagemethod = true

    <System.Web.Services.WebMethod()> _
    Public Shared Function CheckLogin() As Boolean
        Return UserContext() Is Nothing
    End Function

EnablePageMethods

You cannot call server-side code ‘directly’ from client-side code. That is because by design, the server side code executes at server side and client side code at the client. However there are some workarounds. To call serverside code from javascript, you will need to use AJAX, and the easiest way out, is to use the ASP.NET AJAX Extensions.
One option while using Microsoft ASP.NET AJAX is to call ASP.NET Web services (.asmx files) from the browser by using client script. The script can call a webservice containing server-based methods (Web methods) and invoke these methods without a postback and without refreshing the whole page. However this approach could be overkill sometimes, to perform the simplest of tasks. Moreover the logic needs to be kept in a separate .asmx file. We need something that is more ‘integrated’ with our solution.
The option we are going to use in this article involves PageMethods. A PageMethod is basically a public static method that is exposed in the code-behind of an aspx page and is callable from the client script. PageMethods are annotated with the [WebMethod] attribute. The page methods are rendered as inline JavaScript.

Troubleshooting: ‘PageMethods Is ‘Undefined’’ error

1. Try setting EnablePageMethods=”true” in the script manager tag

2. Don’t add the javascript references or code in the section. Add it to the tag.

3. Page methods needs to be static in code behind.

Code

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PageMethod</title>
    <script type="text/jscript">
    function GetUser(){
        var oUser={
            ID : "007",
            Name : "jeff"
        };
        return oUser;
    }

    function CallServer(){
        var oUser = GetUser();
        PageMethods.GetServerUser(oUser, CallServerResult);
    }

    function CallServerResult(result){
        alert('Server:\n'+'ID:'+result.ID+'\nName:'+result.Name);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
            </asp:ScriptManager>
            <input type="button" value="執行 PageMethod" onclick="CallServer()" />

            </div>
    </form>
</body>
</html>

    <System.Web.Services.WebMethod()> _
    Public Shared Function GetServerUser(ByVal Value As TUserData) As TUserData
        Value.ID = "012"
        Value.Name = "tony"
        Return Value
    End Function

<Serializable()> _
Public Class TUserData
    Dim FID As String = String.Empty
    Dim FName As String = String.Empty

    Public Property ID() As String
        Get
            Return FID
        End Get
        Set(ByVal value As String)
            FID = value
        End Set
    End Property

    Public Property Name() As String
        Get
            Return FName
        End Get
        Set(ByVal value As String)
            FName = value
        End Set
    End Property
End Class

A good article is here

http://www.dotnetcurry.com/ShowArticle.aspx?ID=109&AspxAutoDetectCookieSupport=1

AJAX References

//String Builder
function WriteTankToTable(tank) {

var sbBody = new Sys.StringBuilder(‘

‘);
for(x=0;x<tank.length;x++) {
sbBody.append(‘
‘);
sbBody.append(‘

‘);
sbBody.append(‘

‘);
sbBody.append(‘

‘);
sbBody.append(‘

‘);
sbBody.append(‘

‘);
}
sbBody.append(‘

‘ + x + ‘

‘ + tank[x].get_fName() + ‘

‘ + tank[x].get_lName() + ‘

‘ + tank[x].get_email() + ‘

‘);

endTime = new Date().getTime();

sb = new Sys.StringBuilder(‘Start : ‘ + startTime);
sb.append(‘
‘);
sb.append(‘End : ‘ + endTime);
sb.append(‘
‘);
sb.append(‘Total : ‘ + (endTime – startTime));
sb.append(‘
‘);
sb.append(‘Loaded : ‘ + tank.length + ‘ ‘ + Object.getTypeName(tank[0]) );
sb.append(‘

---

‘);

sb.append( sbBody.toString() );

WriteToResults( sb.toString() );
tank = null;
}

function WriteToResults(value) {
var results = $get(‘results’);
results.innerHTML = value;
}

****************
A Web page can contain only one ScriptManager control, either directly on the page
or indirectly inside a nested or parent component. The ScriptManagerProxy control
lets you add scripts and services to content pages and to user controls if the master
page or host page already contains a ScriptManager control.
****************

****************
*Load Control
****************

//code behind
protected void Page_Load( object sender, EventArgs e )
{
TimeLabelButton timeControl =
LoadControl( “/usercontrols/TimeLabelButton.ascx” ) as TimeLabelButton;

NewControlPlaceHolder.Controls.Clear();

NewControlPlaceHolder.Controls.Add( timeControl);
}

****************
*AJAX Extensions
****************

• document.getelementById = $get : used for html elements
• $find = used for behaviors
• $addHandler = easy way to add function delegates to controls
• $addHandlers = add an array of delegates
• $removeHandler = remove a single handler from an event
• $clearHandlers = remove all handlers from an event. (be careful)

Debug AJAX

• Web.Config <compilation debug=”true”>
• ScriptManger ScriptMode=”debug”
• ScriptManager uses debug setting first from ScriptMode=”Debug” attribute, then from Web.Config
• ScriptManger output ignores the @Page Debug attribute

• Confirm IE is in debug mode – Tools Options | Advanced

• Setup http://localhost as a trusted site (on Vista)

• Debug | Windows | Script Explorer (Might not be on, use Tools | Customize, and add
  it to the Debug Windows menu) (Use Ctrl+Alt+N as Keyboard Shortcut)
• debugger keyword
• Sys.Debug

so in the code

    <script language="javascript" type="text/javascript">

        function noDebugger() {
            alert('not here');
            return true;
        }

        function catchDebugger() {
            debugger;
            alert('can break here');
            return true;
        }        

    </script>

    <h1>Debugger; in JavaScript</h1>

    <input type="button" onclick="noDebugger();" value="No Debugger" />
    <br />
    <input type="button" onclick="catchDebugger();" value="Catch Debugger" />

HoverMenuExtender

Today, I spent time on using AJAX HoverMenuExtender to display details for  Listview items.

I got problem when declare HoverMenu at design time, so I created them on Databound event.

So on the html page

…

<ItemTemplate>

<asp:HyperLink ID=”lblTitle” runat=”server”/>
                                                <asp:Panel CssClass=”detailsPanel” ID=”PopupPanel” runat=”server” style=”display:none;”>
                                                    <asp:Label ID=”lblHighlight” runat=”server” Text=”Label”></asp:Label>
                                                </asp:Panel>

</ItemTemplate>

So on the code behind databound method:

                HoverMenuExtender titleHme = new HoverMenuExtender();
                HyperLink titleLnk = e.Item.FindControl(“lblTitle”) as HyperLink;
                Label hightlightLabel = e.Item.FindControl(“lblHighlight”) as Label;

                    titleHme.PopupControlID = PopupPanel.ID;
                    titleHme.TargetControlID = titleLnk.ID;
                    titleHme.PopupPosition = HoverMenuPopupPosition.Right;
                    titleHme.ID = “hmeTitle”;
                    titleHme.OffsetX = 5;
                    e.Item.Controls.Add(titleHme);

Be careful Literal control cannot be used as Target control