AJAX Method Of jQuery AJAX In ASP.NET Web Forms | Learn ASP.NET Web Forms

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ajax_method.WebForm1" %>


<!DOCTYPE html>


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

<head runat="server">

    <title></title>

    <style>

        #loader{

            display:none;

        }

    </style>

</head>

<body>

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

        <div>

            <input type="text" placeholder="Enter your name" id="uname"/>

            <br/><br/>

            <input type="text" placeholder="Enter your surname" id="surname"/>

            <br/><br/>

            <input type="button" value="Submit" id="btn"/>

            <br/>

            <h2 id="result"></h2>

            <div id="loader">

                <img src="images/Spinner-3.gif" height="100" width="100"/>

            </div>

        </div>

    </form>

    <script src="scripts\jquery-3.7.1.min.js"></script>

    <script>

        $(document).ready(function () {

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

                var uname = $("#uname").val();

                var surname = $("#surname").val();

                if (uname == "" || surname == "") {

                    alert("All fields are required..!!");

                }

                else

                {

                    $.ajax({

                        url: "WebForm1.aspx/GetData",

                        type: "POST",

                        contentType: "application/json",

                        data: JSON.stringify({ uname: uname, surname: surname }),

                        dataType: "json",

                        beforeSend: function () {

                            //$("#loader").show();

                            $("#result").text("Processing..");

                        },

                        success: function (result, status, xhr) {

                            $("#result").text(result.d);

                            //$("#loader").hide();

                            //alert(status);

                            //alert(xhr);

                        },

                        error: function (xhr, status, result) {

                            alert(xhr);

                            alert(status);

                            $("#result").text(result.d);

                        },

                        //"complete" will run for both situations: success and error

                        //complete: function (xhr, status) {

                        //    alert(status);

                        //}

                    });

                }

            });

        });

    </script>

</body>

</html>

ABOVE FILE IS WebForm1.aspx

















using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace ajax_method
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        static string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        //"WebMethod" is a Web Service which handle ajax request or serve ajax request
        //In C#, we can call only static variable in static method, we can't call instance variable

        [WebMethod]
        public static string GetData(string uname,string surname)
        {
            //Thread.Sleep(3000);
            //return "Your name is : " + uname + " and Your surname is : " + surname;

            SqlConnection con = new SqlConnection(cs);
            string query = "INSERT INTO person(uname,surname) VALUES(@uname,@surname)";
            SqlCommand cmd = new SqlCommand(query,con);
            cmd.Parameters.AddWithValue("@uname",uname);
            cmd.Parameters.AddWithValue("@surname",surname);
            con.Open();
            int a = cmd.ExecuteNonQuery();
            con.Close();
            if (a > 0)
            {
                Thread.Sleep(3000); /*3000 milliseconds = 3 seconds*/
                return "Data has been inserted successfully.";
            }
            else
            {
                return "Data insertion failed.";
            }
        }
    }
}
ABOVE FILE IS WebForm1.aspx.cs















<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  https://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.7.2" />
    <httpRuntime targetFramework="4.7.2" />
    <pages>
      <namespaces>
        <add namespace="System.Web.Optimization" />
      </namespaces>
      <controls>
        <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
      </controls>
    </pages>
  </system.web>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Antlr3.Runtime" publicKeyToken="eb42632606e9261f" />
        <bindingRedirect oldVersion="0.0.0.0-3.5.0.2" newVersion="3.5.0.2" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Web.Infrastructure" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-13.0.0.0" newVersion="13.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-1.6.5135.21930" newVersion="1.6.5135.21930" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <system.codedom>
    <compilers>
      <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701" />
      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" />
    </compilers>
  </system.codedom>
<connectionStrings>
<add name="dbcs" connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=D:\DotNet\ajax_method\ajax_method\App_Data\Database1.mdf;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>
</configuration>
ABOVE FILE IS Web.config














CREATE TABLE [dbo].[person]
(
[Id] INT NOT NULL PRIMARY KEY IDENTITY,
[uname] VARCHAR(50) NOT NULL,
[surname] VARCHAR(50) NOT NULL
)

IF THERE IS ANY ERROR APPEARING IN WEB BROWSER CONSOLE THEN WE HAVE TO CHANGE AS SHOWN BELOW FILE :
WE HAVE TO CHANGE IN App_Start\RouteConfig.cs FILE AS SHOWN BELOW :
WE HAVE TO CHANGE  RedirectMode.Permanent  TO  RedirectMode.Off  AS SHOWN BELOW:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Routing;
using Microsoft.AspNet.FriendlyUrls;

namespace ajax_method
{
    public static class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            var settings = new FriendlyUrlSettings();
            //settings.AutoRedirectMode = RedirectMode.Permanent;
            settings.AutoRedirectMode = RedirectMode.Off;
            routes.EnableFriendlyUrls(settings);
        }
    }
}















Comments

Post a Comment

Popular posts from this blog

Range Validator Control In ASP.NET Web forms | Form Validation | ASP.NET Web forms

Image
 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace VALIDATION_CONTROLS {     public partial class VALIDATION_FORM : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {         }         protected void Button1_Click(object sender, EventArgs e)         {             Page.ClientScript.RegisterStartupScript(this.GetType(),"Scripts","<script>alert('YOUR FORM HAS BEEN SUBMITTED !!')</script>");         }     } } Above File is VALIDATION_CONTROLS\VALIDATION_FORM.aspx.cs
Read more

Query String In ASP.NET Web Forms | State Management | ASP.NET | Web Forms

Image
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="QueryStringDemo_Practice.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title>     <style type="text/css">         .auto-style1{             width:400px;         }         .auto-style2 {             width: 129px;         }     </style> </head> <body>     <form id="form1" runat="server">         <div>             <table cellpadding="4" cellspacing="4" class="auto-style1">                 <tr>                     <td class="auto-style2"...
Read more

Validation Summary Control In ASP.NET Web forms | Form Validation | ASP.NET

Image
 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace VALIDATION_CONTROLS {     public partial class VALIDATION_FORM : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {         }         protected void Button1_Click(object sender, EventArgs e)         {             Page.ClientScript.RegisterStartupScript(this.GetType(),"Scripts","<script>alert('YOUR FORM HAS BEEN SUBMITTED !!')</script>");         }     } } Above File is VALIDATION_CONTROLS\VALIDATION_FORM.aspx.cs
Read more