AngularJS, ASP.Net MVC, JavaScript, jQuery, jQuery AJAX, MVC WebAPI

Add Request Header for REST API Calling with AngularJS & jQuery

In the Web World , We always call REST APIs from our Web Applications .

When We call REST APIs through jQuery or AngularJS , they added few default Request Headers .

But many a time , we need to pass Custom Request Headers for different purposes.

A Common scenario is for Authentication we need to pass Customer Request header .

But how we can add this ?

Lets see the below samples :::

for jQuery , we can easily add Request Headers when we do AJAX Calling .

$.ajax({
            type: "POST",
            url: '/api/test',
            data: myObj,
            headers: { 'Custom-Header': 'Value'},
            success: function (resp) {
                alert(resp);
            },
            error: function (x, y, z) {
                alert(x);
            }
        });

In AngularJS , If we use $http for REST API calling , we can add Request Header like below , after we create AngularJS Module , we can do :::

myModule.run(['$route', '$http', function ($route, $http) {
            $http.defaults.headers.common.CustomeHeader = 'Value';
        }]);

Thanks

Advertisements
Standard
AngularJS, ASP.Net, HTML5, HTTP & HTTPS, JavaScript, jQuery, jQuery AJAX

How HTTPS Works : Part1

I wanted to write a basic article on How HTTPS works , then I got this below article , so am gonna share his Article here . Hope , all will enjoy this one .

http://blog.hartleybrody.com/https-certificates/

And I will write more on HTTPS in Part2,3… etc …

Cheers 🙂

Standard
ASP.Net, C#, 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
ASP.Net, C#, 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