How to display data on Asp.net web form without postback? using JSON, JQuery.ajax and WebMethod

To display data on web form without postback, we will use JSON, JQuery $.ajax, WebMethod and JavascriptSerializer. Sometime we need some data to be displayed when user wants it. Without user request, we don't want to show that data on aspx page. In this situation, we should give one button, so whenever user wants it, he will click and get the result.

How do we achieve this? just follows the steps:

Step 1: Create a project with Asp.net empty web application. and add "Default.aspx" page.

Step 2: In Default.aspx page, add following code.

<!DOCTYPE html>

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

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script> 
             function getRandomNumber() {
                 
                $.ajax({

                    url: "Default.aspx/getRandomNumber",
                    data: '',
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (mydata) {

                        var i = JSON.parse(mydata.d);
                        $("#lblRandomNumber").text(i);
                         
                    }
                });
            }  
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnRandomNumber" runat="server" 
                OnClientClick="javascript:getRandomNumber(); return false;"   
                Text="Get Random Number" />
            <asp:Label ID="lblRandomNumber" runat="server" ></asp:Label>
        </div>
    </form>
</body>
</html>

Step 3: Now, In Default.aspx.vb page, add following code.

Imports System.Web.Services
Imports System.Web.Script.Serialization
Imports System.Web.Script.Services

Public Class _Default
    Inherits System.Web.UI.Page
     
    <WebMethod> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
    Public Shared Function getRandomNumber() As String

        Dim s As String = New Random().Next(100).ToString()
        Dim ser As New JavaScriptSerializer()
        Dim jsonString = ser.Serialize(s)
        Return jsonString
    End Function
     
End Class

Step 4: Now run it, and click on "get random number" button to get the random number without postback.

How to convert JSON string to Javascript object?

You can convert JSON String to JavaScript Object Using JSON.parse method of JavaScript.

<script>
   //Json string
   var customer = '{"Name":"John","City":"NJ"}';
   var customers = '[{"Name":"John","City":"NJ"},{"Name":"Miller","City":"PA"}]';

   //Converting Json to Javascript Object
   var Customer = JSON.parse(customer);
   var Customers = JSON.parse(customers);

   //Result
   alert(Customer.Name);
   alert(Customers[1].Name);

</script>

How to redirect parent window on particular page when we close the modal popup window? using JQuery or Javascript (NOT on reload or post back)

I was looking for JQuery solution which will fire only when I close a modal popup window. I found some JQuery examples but none of them gave me correct JQuery solution. What I was looking is that whenever I close the modal popup Window, it prompts with message before closing and redirect to particular page. So I got the following JQuery solution, But the issue in this solution is that it will fire on both event "close" and "reload or post back". This is wrong. I want a JQuery solution which should work only on closing a modal popup window, not on reload or post back.

     $(window).unload(function() {
           //redirection code here
           alert('your message');   
     });

So after some research, I made it and solved the issue with following. I hope this will help you as well.

     $(window).unload(function(event) {
        if (event.target.readyState=='complete') {

            alert('Closing Window and redirecting...');
            var opener = window.dialogArguments;
            opener.parent.location = '../YourRedirected.aspx?id=<%=Record_ID %>';
            top.window.close();

        }
        else {
            alert('Reloading Window');
        }   
     });

How to make checkboxlist required on clientside using validator in ASP.Net?

You can do that by using CustomValidator.

Here is the simple code:

<script> 

function ValidateChkBxLst(source, args) {

var chkListModules = 
document.getElementById('<%= chkBxLst.ClientID%>');
var chkListinputs = chkListModules.getElementsByTagName("input");
for (var i = 0; i < chkListinputs.length; i++) { 
if (chkListinputs[i].checked) {
args.IsValid = true;
return; 
} 
} 
args.IsValid = false; 
}
</script> 

<asp:checkboxlist id="chkBxLst" repeatcolumns="3" 
repeatdirection="Vertical" runat="server"/>

<asp:customvalidator clientvalidationfunction="ValidateChkBxLst" 
errormessage="CheckBox List" id="cvList" runat="server" 
text="Please select at least one checkbox." />

Here I have created "CustomValidator" which is pointing to "ValidateChkBxLst" Javascript function to validate it clientside without postback. Isn't it simple?

Thanks