Jun 17, 2010

Using jQuery in ASP.Net AJAX Applications with out page refresh

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>

    <script src="jquery-1.2.6.js" type="text/javascript"></script>
   <script src="_scripts/jquery-1.2.6.js" type="text/javascript"></script>

        <script language="javascript">

            $(document).ready(function() {

                $("#txtNoOfMales").change(function() {

                    var ticketRequired = this.value;

                    var options = {

                        type: "POST",

                        url: "CallServerWithParameters.aspx/GetAvailableTicketsForMales",

                        data: "{no:" + ticketRequired + "}",

                        contentType: "application/json; charset=utf-8",

                        dataType: "json",

                        success: function(response) {

                            if (response.d != "") {

                                alert(response.d);

                                $("#txtNoOfMales").focus();

                            }

                        }

                    };

                    //Call the PageMethods

                    $.ajax(options);



                });



                $("#txtNoOfFemales").change(function() {

                    var ticketRequired = this.value;

                    var options = {

                        type: "POST",

                        url: "CallServerWithParameters.aspx/GetAvailableTicketsForFemales",

                        data: "{no:" + ticketRequired + "}",

                        contentType: "application/json; charset=utf-8",

                        dataType: "json",

                        success: function(response) {

                            if (response.d != "") {

                                alert(response.d);

                                $("#txtNoOfFemales").focus();

                            }

                        }

                    };

                    //Call the PageMethods

                    $.ajax(options);



                });



            });

        </script>



   
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
<div>

    No of Male Tickets:<asp:TextBox ID="txtNoOfMales" runat="server"></asp:TextBox>

    No of Female Tickets:<asp:TextBox ID="txtNoOfFemales" runat="server" ></asp:TextBox>

    </div>
       



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




code behind

.cs





using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Services;

namespace jquery
{
    public partial class CallServerWithParameters : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]

        public static string GetAvailableTicketsForMales(int no)
        {

            string result = "";

            int NoOfTicketsAvailable = 10;

            if (no > NoOfTicketsAvailable)
            {

                result = "Only " + NoOfTicketsAvailable.ToString() + " Male ticket(s) avaialable. Please enter a lower number!";

            }

            return result;

        }

        [WebMethod]

        public static string GetAvailableTicketsForFemales(int no)
        {



            string result = "";

            int NoOfTicketsAvailable = 10;

            if (no > NoOfTicketsAvailable)
            {

                result = "Only " + NoOfTicketsAvailable.ToString() + " Female ticket(s) avaialable. Please eneter a lower number!";

            }

            return result;

        }
    }
}

No comments:

Post a Comment