Tuesday, November 11, 2014

How to call an ASP.NET c# method using javascript

PageMethod an easier and faster approach for Asp.Net AJAX We can easily improve user experience and performance of web applications by unleashing the power of AJAX. One of the best things which I like in AJAX is PageMethod.

PageMethod is a way through which we can expose server side page's method in java script. This brings so many opportunities we can perform lots of operations without using slow and annoying post backs.

In this post I am showing the basic use of ScriptManager and PageMethod. In this example I am creating a User Registration form, in which user can register against his email address and password. Here is the markup of the page which I am going to develop:-

<body>

    <form id="form1" runat="server">

    <div>

        <fieldset style="width: 200px;">

            <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label>

            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

            <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>

            <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>

        </fieldset>

        <div>

        </div>

        <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" />

    </div>

    </form>

</body>

</html>

To setup page method, first you have to drag a script manager on your page.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

</asp:ScriptManager>

Also notice that I have changed EnablePageMethods="true. This will tell ScriptManager that I am going to call Page Methods from client side.

Now Next step is to Create a Server Side function. Here is the function which I created, this function validates user's input:-

[WebMethod]

public static string RegisterUser(string email, string password)

{

    string result = "Congratulations!!! your account has been created.";

    if (email.Length == 0)//Zero length check

    {

        result = "Email Address cannot be blank";

    }

    else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks

    {

        result = "Not a valid email address";

    }

    else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks

    {

        result = "Not a valid email address";

    }

    else if (password.Length == 0)

    {

        result = "Password cannot be blank";

    }

    else if (password.Length < 5)

    {

        result = "Password canonot be less than 5 chars";

    }

    return result;

}

To tell script manager that this method is accessible through javascript we need to ensure two things. First this method should be 'public static'. Second there should be a [WebMethod] tag above method as written in above code.

Now I have created server side function which creates account. Now we have to call it from client side. Here is how we can call that function from client side:-

<script type="text/javascript">

    function Signup() {

        var email = document.getElementById('<%=txtEmail.ClientID %>').value;

        var password = document.getElementById('<%=txtPassword.ClientID %>').value;

        PageMethods.RegisterUser(email, password, onSucess, onError);

        function onSucess(result) {

            alert(result);

        }

        function onError(result) {

            alert('Cannot process your request at the moment, please try later.');

        }

    }

</script>

To call my server side method Register user, ScriptManager generates a proxy function which is available in PageMethods. My server side function has two paramaters i.e. email and password, after that parameters we have to give two more function names which will be run if method is successfully executed (first parameter i.e. onSucess) or method is failed (second parameter i.e. result).

Now every thing seems ready, and now I have added OnClientClick="Signup();return false;" on my Signup button. So here complete code of my aspx page :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

        </asp:ScriptManager>

        <fieldset style="width: 200px;">

            <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label>

            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

            <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>

            <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>

        </fieldset>

        <div>

        </div>

        <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" OnClientClick="Signup();return false;" />

    </div>

    </form>

</body>

</html>

<script type="text/javascript">

    function Signup() {

        var email = document.getElementById('<%=txtEmail.ClientID %>').value;

       var password = document.getElementById('<%=txtPassword.ClientID %>').value;

        PageMethods.RegisterUser(email, password, onSucess, onError);

        function onSucess(result) {

            alert(result);

        }

        function onError(result) {

            alert('Cannot process your request at the moment, please try later.');

        }

    }

</script>

Thursday, November 6, 2014

Class not registered exception - SharePoint 2013

Hi All,

We got below error when trying to use SPSecurity.RunWithElevatedPrivileges in console application

Retrieving the COM class factory for component with CLSID {BDEADF26-C265-11D0-BCED-00A0C90AB50F} failed due to the following error: 80040154 Class not registered (Exception from HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG)).

The code is shown below:

using Microsoft.SharePoint;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SampleComnsoleApp
{
    class Program
    {
        
        static void Main(string[] args)
        {
            bool quiet = false;
            SPSecurity.RunWithElevatedPrivileges(delegate()
            {
                (new Program()).Run(quiet);
            });
        }
        private void Run(bool quiet)
        {

        }
    }
}

Resolution:
The console application is running under 32 bit processor. Just change it to 64 bit.
To do this:

Right click on Console Application
Select Properties
Under Build Tab, change Platform Target to x64
Rerun the application and hopefully the error should go away now !

Tuesday, October 28, 2014

Accept only numbers in a APS.NET Textbox using JavaScript

Client side validations become very important when submitting data on a web page. Here is a practical scenario. We have an input box and it must accept only numbers, and it should not allow other characters as input. We will validate the contents of the input box at the client side before calling a post back event.

The Markup and Script

<html>
<head></head>
<body>

    <div>
        Enter only Numbers: <asp:TextBox ID="txtNumbers" value="" runat="server" 
            onkeypress="javascript:return isNumber (event)" ></asp:TextBox>
    </div>
    
</body>

<script>

    // WRITE THE VALIDATION SCRIPT IN THE HEAD TAG.
    
    function isNumber(evt) {
        var iKeyCode = (evt.which) ? evt.which : evt.keyCode
        if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
            return false;

        return true;
    }    
    
</script>
</html>

Overview

In the head tag we have the JavaScript block with a function named as “isNumber()”, which takes a Keyboard event as parameter. The parameter will be checked against “Ascii KeyCodes”.

Ascci stands for “American Standard Code for Information Interchange”.

Check KeyCode

Individual key events will be checked for each character entered in the textbox.
The code “var iKeyCode = (evt.which) ? evt.which : evt.keyCode” works like a conditional “if…else”. This piece of code can also be written in this way.

Var iKeyCode;
If (evt.which)
 iKeyCode = evt.which;
Else
 iKeyCode = evt.keyCode; // KEYWORDS ARE CASE SENSITIVE.

The value in iKeyCode will be checked against a range of Ascii codes to make sure it’s a number (numeric value). The function will return “true” or “false” based on the entered value. No value will be displayed on the “textbox” control if the condition is returned as “false”.

The input control in the body tag accepts the user entered values, which calls the JavaScript function “isNumber()” on its “onkeypress” event. So every time a user tries to enter a value other than numbers, the field won’t accept the value.

Thanks

Ziad Sowan

Monday, October 27, 2014

Implement Ajax Control Toolkit with SharePoint 2013

Hi All

After Painstaking research, I managed to make AjaxControlToolkit and especially Update Panel working with SharePoint 2013 using the following steps:

1- Download Ajax Control Toolkit 4.5 from
http://ajaxcontroltoolkit.codeplex.com/releases/view/112805

2- Add (AjaxControlToolkit and AjaxMin dlls) reference to your project.

3- Register AjaxControlToolkit and AjaxMin namespaces in SharePoint package Designer.

To Open package Designer see below image

To register AjaxControlToolkit and AjaxMin as safe controls see below two images

4- Add AjaxToolkit Assembly under assemblies node in Web.Config file of your web application. below line should be added

5- Replace the default ScriptManager in your masterpage with the ToolkitScriptManager

First add below line in head section of the master page

<%@ Register assembly="AjaxControlToolkit, Version=4.5.7.1005, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" namespace="AjaxControlToolkit" tagprefix="asp" %>

Second Remove default script manger then add below ToolkitScriptManager line, make sure its placed inside form section of master page

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">

</asp:ToolkitScriptManager>

6- Final step and very important step that's make ajax Update panel control work with sharepoint 2013 , move SPWebPartManager from head section to form section

Finally it should look like below :

<SharePoint:SharePointForm onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}" runat="server">

<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">
<WebPartPages:SPWebPartManager runat="Server"/>
</SharePoint:AjaxDelta>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">

</asp:ToolkitScriptManager>

Note: to use ajax in your webpart add below line in the top of your webpart design

<%@ Register Assembly="AjaxControlToolkit, Version=4.5.7.1005, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Thanks

Happy AJAX

Ziad Sowan

Tuesday, February 11, 2014

Your Guide to Building a Windows Phone 8 App

Here are the resources to building your first application on Windows Phone:

To get started:

SharePoint 2010 , Application Development Exam

Last week i passed TS: Microsoft SharePoint 2010, Application Development Exam with score 800/1000.
Current i am preparing for SharePoint 2013 , Core Solution Exam.

Search This Blog