locked
Particular Page Content Refresh on button click in asp.net without using ajax update panel RRS feed

  • Question

  • User1152553138 posted

    How to refresh particular content on button click like below without full page reloading in asp.net. 

    Note: I don't want to use ajax update panel

    JQuery/ Ajax will be fine ...

    Like this https://ibb.co/djUBcK

    Thursday, September 20, 2018 5:21 AM

Answers

  • User283571144 posted

    Hi Ashraf007,

    According to your description, I suggest you could add show loading div logic in button click event.

    After the ajax successed, you could hide the loading div.

    More details, you could refer to below codes:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="AzurePublishTest.test2" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".animationLoading").hide();
    
                $("#Button1").click(function () {
                    $(".animationLoading").show();  
                    $(".showTable").hide()
                $.ajax({
                    url: "test2.aspx/GetInfo",
                    type: "POST",
                    data: '{}',
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var jsonObj1 = JSON.parse(data.d);
                        console.log(data);
                        console.log(jsonObj1);
                        console.log(data.d.length);
                        var employeeTable = $('#tblEmployee tbody');
                        employeeTable.empty();
                        for (var i = 0; i < jsonObj1.length; i++) {
                            employeeTable.append('<tr><td>' + jsonObj1[i].Eid + '</td><td>'
                                + jsonObj1[i].Ename + '</td><td>' + jsonObj1[i].age + '</td><td>' + jsonObj1[i].sex + '</td></tr>');
                        }
                         $(".animationLoading").hide();$(".showTable").show();
                    },
                    error: function (err) {
                         $(".animationLoading").hide();$(".showTable").show();
                        alert(err);
                    }
                })
             
                });
            })
    
        </script>
            <style>
            body {
                margin: 90px auto;
                width: 500px;
                background-color: #e9eaed;
            }
    
            .animationLoading {
                background: #fff;
                border: 1px solid;
                border-color: #e5e6e9;
                border-radius: 3px;
                display: block;
                height: 324px;
                width: 494px;
                padding: 12px;
            }
    
            @keyframes animate {
                0% {
                    background-position: -468px 0
                }
    
                100% {
                    background- 0
                }
            }
    
            #container {
                width: 100%;
                height: 30px;
            }
    
            #one, #two, #three, #four, #five, #six {
                ;
                background-color: #CCC;
                height: 6px;
                animation-name: animate;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
                background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
                background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
                -webkit-background-size: 800px 104px;
            }
    
            #one {
                left: 0;
                height: 40px;
                width: 40px;
            }
    
            #two {
                left: 50px;
                top: -33px;
                width: 25%;
            }
    
            #Three {
                left: 50px;
                top: -20px;
                width: 15%;
            }
    
            #four {
                left: 0px;
               top: 30px;
                width: 80%;
            }
    
            #five {
                left: 0px;
                top: 45px;
                width: 90%;
            }
    
            #six {
                left: 0px;
                top: 60px;
                width: 50%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
    
           <div class="animationLoading">
                <div id="container">
                    <div id="one"></div>
                    <div id="two"></div>
                    <div id="three"></div>
                </div>
                <div id="four"></div>
                <div id="five"></div>
                <div id="six"></div>
            </div>
            <input id="Button1" type="button" value="button" />
            <div class="showTable">
                <div class="container">
                    <table id="tblEmployee" class="table table-bordered">
                        <thead class="bg-primary text-white">
                            <tr>
                                <th>Eid</th>
                                <th>Ename</th>
                                <th>age</th>
                                <th>sex</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    Code-behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    using System.Web.Services;
    using System.Web.Script.Serialization;
    public class EmployeesInfo
            {
                public string Eid { get; set; }
                public string Ename { get; set; }
                public string age { get; set; }
                public string sex { get; set; }
            }
            [WebMethod]
            public static string GetInfo()
            {
                List<EmployeesInfo> employeelist = new List<EmployeesInfo>();
                
                string constr = ConfigurationManager.ConnectionStrings["EmployeeManagementConnectionString"].ConnectionString;
                using(SqlConnection con=new SqlConnection(constr))
                {
                    string query = "SELECT * FROM tb_info";
                    SqlCommand cmd = new SqlCommand(query,con);
                    con.Open();
                    SqlDataReader sdr = cmd.ExecuteReader();
                    while (sdr.Read())
                    {
                        EmployeesInfo employeeInfo = new EmployeesInfo();
                        employeeInfo.Eid = sdr["Eid"].ToString();
                        employeeInfo.Ename = sdr["Ename"].ToString();
                        employeeInfo.age = sdr["age"].ToString();
                        employeeInfo.sex = sdr["sex"].ToString();
                        employeelist.Add(employeeInfo);
                    }
                }
                JavaScriptSerializer js = new JavaScriptSerializer();
                return js.Serialize(employeelist);
            }

    Result:

    Best Regards,

    Bradno

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 20, 2018 8:08 AM