JavaScript, jQuery, jQuery AJAX

How to Call ASMX WebService using HTTP GET with jQuery AJAX

By Default , WebMethod of ASMX is not allowed to be called using HTTP GET . So we will see a short demo here . Our HTML Markup of the aspx page is :

<asp:DropDownList ID="DropDownList2" runat="server" Width="150">
           <asp:ListItem Text="Select" Value="-1" />
        </asp:DropDownList>

We will fill this DropDown By calling ASMX Service’s WebMethod using HTTP GET with jQuery Ajax . My Client Code is like below :::

var DropDownList2 = $("#<%= DropDownList2.ClientID %>");
         

         $.ajax({
                type: "GET",
                url:"<%=ResolveUrl("~/MyWebService.asmx") %>/GetAllProjectName",
                data:"{}",
                contentType:"application/json; charset=utf-8",
                dataType:"json",
                success: function(response){
                        var projects = response.d;
                        $.each(projects,function(index,project){
                            DropDownList2.append('<option value="'+ project.ProjectId +'" >' + project.ProjectName + '</option>');                        
                        });
                 }
         });

My Server side code of the WebService is :::

[WebMethod]
         [ScriptMethod(UseHttpGet = true)]
         public List<ProjectOfEmployee> GetAllProjectName()
         {
             return GetProjectName();   
         }

Remember to add the below part of course

[ScriptMethod(UseHttpGet = true)]

Otherwise , It will give 500 Internal Server Error .

So now you are done 🙂 Cheers

Standard
JavaScript, jQuery, jQuery AJAX

jQuery Ajax in Action with ASP.Net aspx Page

Most of the time , We call our custom WebServices/REST Services/Third Party REST APIs from any jQuery AJAX based HTTP Verb . But we can also call direct ASP.Net Form Page( which is aspx page ) using jQuery AJAX .

Here is how we can call ASPX page from another ASPX page’s AJAX Method.

For this example , I have used two ASPX page –

1.AjaxCheckPage.aspx ::: From this page I am gonna call another ASPX Page
2.jQueryAjaxData.aspx ::: This Page will be called by jQuery AJAX

HTML Markup of my AjaxCheckPage.aspx is like below :

<input type="button" id="ajaxButton" value="Load Data using jQuery Ajax" />   

     <div id="divResult"></div>

Ajax calling code of this Page is —

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

        $("#ajaxButton").click(function () {

            $.ajax({

                type: "POST",
                url: "jQueryAjaxData.aspx",
                data: "a=2&b=3",
                success: function (data) {
                    $("#divResult").text(data);
                }

            });

        });
    
    </script>

So Now , am doing like – If any Data comes from jQueryAjaxData.aspx , that means after successful , am binding the data to the DIV :

Now lets go another Page jQueryAjaxData.aspx from which the Data is gonna come .

protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Form["a"] != null && Request.Form["b"] != null)
            {
                int a = int.Parse(Request.Form["a"]);
                int b = int.Parse(Request.Form["b"]);
                int sum = a + b;
                
                Response.Write("The Sum is : " + sum);
            }
        }

jQuery Ajax in Action with ASP.Net aspx Page

jQuery Ajax in Action with ASP.Net aspx Page

So you can see , when I click the button then It request a POST to jQueryAjaxData.aspx page and am also passing Form Data as you can see it inside the picture above .

So , this is how , we can call ASPX page from jQuery AJAX POST .

Cheers 🙂

Standard
AngularJS, HTML5, JavaScript

HTML5 DragDrop -Part 1 : With HTML5 , JavaScript

In The Current World of Web , Drag and Drop on the Browser has been a required Feature for many People . And YES Its much easy with HTML5 Drap&Drop . In my Example , I used HTML5 DragDrop with the help of jQuery and JavaScript .

My My App has been developed on AngularJS framework.

DragDrop

Here is my HTML Code :::

<body>
        
        <h1 style="color: blueviolet">Drag a number and Drop that to Recycle Bin</h1><br/>

        <div ng-controller="IndexCtrl">
            <ul class="unstyled">
                <li ng-repeat="tile in tiles">
                    <img id="{{$index}}" height="50" width="50" draggable="true" ondragstart="drag(event)" src="{{tile.imgUrl}}" />
                    <br /><br />
                </li>
            </ul>

            <div id="dropHere" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin-top: 150px" class="bottom">
                <img height="100" width="105" src="Images/RecycleBin.png" />
            </div>
        </div>
    </body>

This is the Source of my Numbers which lies on my AngularJS Controller’s Scope .

$scope.tiles = [
        { text: '1', imgUrl: setting.imageUrl + 'orderedList1.png' },
        { text: '2', imgUrl: setting.imageUrl + 'orderedList2.png' },
        { text: '3', imgUrl: setting.imageUrl + 'orderedList3.png' },
        { text: '4', imgUrl: setting.imageUrl + 'orderedList4.png' },
        { text: '5', imgUrl: setting.imageUrl + 'orderedList5.png' }
    ];

And The Implementations of the HTML5 DragDrop Events are as follows :::

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var nodeToRemove = $("#" + data)[0];
    ev.target.appendChild(nodeToRemove);
}

After Dragging each Number , We can see in the DOM that every Item is going inside the Recycle Bin Node like below :

DragDOM

But If our Site needs massive this kind of thing , The DOM will become more heavy , so if our Requirements does not need those Dropped Items in the future , We can just remove the Item , by this our DOM will have less weight .

ev.target.removeChild(nodeToRemove);

In Part 2 of this Article, Drag&Drop will be done by AngularJS Directive .

Cheers

Standard