Remove From My Forums

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

Question
0

Sign in to vote

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

Answered by:

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

Question

Answers