Bind Step Progress Bar from database using jQuery AJAX in ASP.Net

Hi Waghmare,

Check this example. Now please take its reference and correct your code.

HTML

<style type="text/css">
    .progress
    {
        width: 100%;
        list-style: none;
        list-style-image: none;
        margin: 20px 0 20px 0;
        padding: 0;
    }
            
    .progress li
    {
        float: left;
        text-align: center;
        position: relative;
    }
            
    .progress .name
    {
        display: block;
        vertical-align: bottom;
        text-align: center;
        margin-bottom: 1em;
        color: black;
        opacity: 0.3;
    }
            
    .progress .step
    {
        color: black;
        border: 3px solid silver;
        background-color: silver;
        border-radius: 50%;
        line-height: 1.2;
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
        z-index: 0;
    }
            
    .progress .step span
    {
        opacity: 0.3;
    }
            
    .progress .active .name, .progress .active .step span
    {
        opacity: 1;
    }
            
    .progress .step:before
    {
        content: "";
        display: block;
        background-color: silver;
        height: 0.4em;
        width: 50%;
        position: absolute;
        bottom: 0.6em;
        left: 0;
        z-index: -1;
    }
            
    .progress .step:after
    {
        content: "";
        display: block;
        background-color: silver;
        height: 0.4em;
        width: 50%;
        position: absolute;
        bottom: 0.6em;
        right: 0;
        z-index: -1;
    }
            
    .progress li:first-of-type .step:before
    {
        display: none;
    }
            
    .progress li:last-of-type .step:after
    {
        display: none;
    }
            
    .progress .done .step, .progress .done .step:before, .progress .done .step:after, .progress .active .step, .progress .active .step:before
    {
        background-color: yellowgreen;
    }
            
    .progress .done .step, .progress .active .step
    {
        border: 3px solid yellowgreen;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=btnStatus]').on('click', function () {
            var id = $('[id*=txtOrderId]').val();
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetStatus",
                data: '{orderId: "' + id + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $('ol li').removeClass();
                    var status = response.d;
                    var i;
                    $('ol li').each(function (index, item) {
                        if ($(this).find('.name').html() == status) {
                            i = index;
                        }
                    });
                    $('ol li').each(function (index, item) {
                        if (i == index) {
                            $(this).addClass("active");
                        } else if (i > index) {
                            $(this).addClass("done");
                        } else {
                            $(this).removeClass;
                        }
                    });
                }, failure: function (response) {
                    alert(response.responseText);
                }, error: function (response) {
                    alert(response.responseText);
                }
            });
            return false;
        });
    });
</script>
<asp:TextBox runat="server" ID="txtOrderId" Text="10001" />
<asp:Button ID="btnStatus" Text="Check Status" runat="server" />
<br />
<ol class="progress">
    <li><span class="name">Placed</span> <span class="step"><span>1</span></span> </li>
    <li><span class="name">Ready for Ship</span> <span class="step"><span>2</span></span></li>
    <li><span class="name">Order Shipped</span> <span class="step"><span>3</span></span></li>
    <li><span class="name">In Transit</span> <span class="step"><span>4</span></span></li>
    <li><span class="name">Order Delivered</span> <span class="step"><span>5</span></span></li>
    <li><span class="name">Return / Exchnage</span> <span class="step"><span>6</span></span></li>
</ol>

Namespaces

C#

using System.Data;
using System.Web.Services;

VB.Net

Imports System.Data
Imports System.Web.Service

Code

C#

private static DataTable OrderMaster()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("OrderId", typeof(int));
    dt.Columns.Add("OrderStatus", typeof(int));
    dt.Rows.Add(10001, 5);
    dt.Rows.Add(10002, 3);
    return dt;
}

private static DataTable OrderStatus()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("StatusId", typeof(int));
    dt.Columns.Add("Status", typeof(string));
    dt.Rows.Add(1, "Placed");
    dt.Rows.Add(2, "Ready for Ship");
    dt.Rows.Add(3, "Order Shipped");
    dt.Rows.Add(4, "In Transit");
    dt.Rows.Add(5, "Order Delivered");
    dt.Rows.Add(6, "Return / Exchnage");
    return dt;
}

[WebMethod]
public static string GetStatus(string orderId)
{
    string status = (from om in OrderMaster().AsEnumerable()
                        join os in OrderStatus().AsEnumerable() on om["OrderStatus"] equals os["StatusId"]
                        where om["OrderId"].ToString() == orderId
                        select os["Status"]).FirstOrDefault().ToString();
    return status;
}

VB.Net

Private Shared Function OrderMaster() As DataTable
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("OrderId", GetType(Integer))
    dt.Columns.Add("OrderStatus", GetType(Integer))
    dt.Rows.Add(10001, 5)
    dt.Rows.Add(10002, 3)
    Return dt
End Function

Private Shared Function OrderStatus() As DataTable
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("StatusId", GetType(Integer))
    dt.Columns.Add("Status", GetType(String))
    dt.Rows.Add(1, "Placed")
    dt.Rows.Add(2, "Ready for Ship")
    dt.Rows.Add(3, "Order Shipped")
    dt.Rows.Add(4, "In Transit")
    dt.Rows.Add(5, "Order Delivered")
    dt.Rows.Add(6, "Return / Exchnage")
    Return dt
End Function

<WebMethod()>
Public Shared Function GetStatus(ByVal orderId As String) As String
    Dim status As String = (From om In OrderMaster().AsEnumerable()
                            Join os In OrderStatus().AsEnumerable() On om("OrderStatus") Equals os("StatusId")
                            Where om("OrderId").ToString() = orderId
                            Select os("Status")).FirstOrDefault().ToString()
    Return status
End Function

Screeenshot