Thursday, January 19, 2017

Ajax request handling from Entity Database: Visual Studio + JQuery



Ajax request handling from Entity Database.
Open Visual Studio:
View → Server Explorer




Create a ADO.Net Entity Data Model:







public partial class WebForm1 : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {
           Employee_JanEntities context = new Employee_JanEntities();
           var data = context.Employees.ToList();


           string str = "<table border='6' cellpadding='6' cellspacing='6' height='200' width='200' >";
           foreach (var item in data)
           {
               str += "<tr><td>" + item.Id + "</td><td>" + item.Name
                   + "</td><td>" + item.Address + "</td><td>";
           }
           str += "</table>";
           Response.Write(str);
           Response.End();
       }
   }


Add a HTML Page with following Code:




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>


   <script type="text/javascript">       
       function CallAjax()
       {            
           var xmlHTTP = new XMLHttpRequest();
           xmlHTTP.onreadystatechange = function () {


               if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
                   document.getElementById("result").innerHTML = xmlHTTP.responseText;
               }
           }
           xmlHTTP.open("GET", "WebForm1.aspx", true);
           xmlHTTP.send();
       }
       </script>
</head>
<body>
<input id="Button1" type="button" onclick="CallAjax()" value="Click here to Load Values" />
<div id="result"></div>
</body>
</html>



---------------------------------------------------------------------------------------------Serialize Example



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        $(document).ready(function () {
            $('form').submit(function () {
                var JSdata = $(this).serializeArray();
                var myData = JSON.stringify(JSdata);
                alert(myData);
                $.each(JSdata,function(i,data1){
                    alert(data1.name + "------>" + data1.value);
                }); return false// false is Dont post Data;

            });
        });

    </script>
</head>
<body>
    <form>
        <input type="text" name="first"/>
        <input type="text" name="last" />
        <input type="submit" value="Submit" />
    </form>
</body>

-------------------------------------------------------------------------------------------------------------

Namespace in Jquery:
 in .js file:

var NewNameSpace = window.NewNameSpace || {}

NewNameSpace.NewTest = function () {
    var call = function () {
        alert('Test');
    };
    return {
        NewFunction:call
    };
}();

in Html Page:

<body>    
    <h2 onclick="NewNameSpace.NewTest.NewFunction()">Click here</h2>      
</body>

No comments:

Post a Comment

JMeter Simple Controller

  Simple Controller is just a  container  for user request.