توضیحات و دانلود

نمایش تصویر پیشرفت بارگذاری هنگام بارگذاری صفحه یا PostBack در ASP.Net
0 0
نمایش تصویر پیشرفت بارگذاری هنگام بارگذاری صفحه یا PostBack در ASP.Net

با سلام در این مقاله نمایش تصویر پیشرفت بارگذاری هنگام بارگذاری صفحه یا PostBack در ASP.Net با استفاده از jQuery و جاوا اسکریپت را نشان خواهیم داد .
 
بانک اطلاعاتی
برای این مقاله از جدول مشتریان پایگاه Northwind SQL Server استفاده می کنیم. شما می توانید پایگاه داده Northwind را با استفاده از لینک زیر دانلود کنید
دانلود Northwind پایگاه داده
کد HTML
کد HTML شامل یک DropDownList، یک دکمه و یک کنترل GridView می باشد. بر روی دکمه btnSubmit اطلاعات در GridView بارگذاری می شود. همچنین HTML DIV وجود دارد که برای نمایش تصویر پیشرفت بارگیری استفاده می شود.

Country: <asp:DropDownList ID="ddlCountries" runat="server">
    <asp:ListItem Text="All" Value="" />
    <asp:ListItem Text="USA" Value="USA" />
    <asp:ListItem Text="Brazil" Value="Brazil" />
    <asp:ListItem Text="France" Value="France" />
    <asp:ListItem Text="Germany" Value="Germany" />
</asp:DropDownList>
<asp:Button ID="btnSubmit" runat="server" Text="Load Customers"
    OnClick="btnSubmit_Click" />
<hr />
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
        <asp:BoundField DataField="City" HeaderText="City" />
    </Columns>
</asp:GridView>
<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />
</div>

 Modal پس زمینه CSS
شما باید CSS زیر را در بخش HEAD از صفحه برای پس زمینه Modal قرار دهید.

<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>

نمایش تصویر پیشرفت بارگیری در صفحه بارگذاری و PostBack
کد جاوا اسکریپت و کد جی کوئری زیر یک پس زمینه Modal ایجاد می کند و زمانی که فرم HTML نشان داده می شود تصویر بارگیری نمایش داده می شود. بنابراین هر بار که کنترل مانند دکمه، LinkButton، و غیره پنجره Modal را با بارگذاري پیشرفته نمایش می دهد .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }
    $('form').live("submit", function () {
        ShowProgress();
    });
</script>

فضاهای نام
شما باید فضای نامهای زیر را وارد کنید
C #

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

گرفتن سوابق از پایگاه داده
در کد زیر تمام مشتریان را از جدول مشتریان پایگاه داده Northwind  بارگذاری می کند و آن را در GridView بر روی btnSubmit کلیک می کند. از آنجا که ما این را به عنوان فرآیند طولانی مدت سنگین فرض می کنیم، موضوع اضافه شده را در رویداد کلیک btnSubmit اضافه کردیم .
در صفحه Page_Load متوجه خواهید شد که من به سادگی ثبت نام یک جاوا اسکریپت را راه اندازی می کنیم که یک رویداد handler  جی کوئری است که بلافاصله پس از بارگذاری سند، دکمه btnSubmit کلیک می کند. برای نشان دادن پیشرفت تصویر بارگیری در صفحه بارگذاری انجام شده است.
C #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
        ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
    }
}
 
protected void btnSubmit_Click(object sender, EventArgs e)
{
    // Add Fake Delay to simulate long running process.
    System.Threading.Thread.Sleep(5000);
    LoadCustomers();
}
 
private void LoadCustomers()
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT * FROM Customers WHERE Country = @Country OR @Country = ''";
    SqlCommand cmd = new SqlCommand(query);
    cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value);
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Customers");
                gvCustomers.DataSource = ds;
                gvCustomers.DataBind();
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim script As String = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });"
        ClientScript.RegisterStartupScript(Me.GetType, "load", script, True)
    End If
End Sub
 
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
    ' Add Fake Delay to simulate long running process.
    System.Threading.Thread.Sleep(5000)
    LoadCustomers()
End Sub
 
Private Sub LoadCustomers()
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT * FROM Customers WHERE Country = @Country OR @Country = ''"
    Dim cmd As SqlCommand = New SqlCommand(query)
    cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value)
    Dim con As SqlConnection = New SqlConnection(strConnString)
    Dim sda As SqlDataAdapter = New SqlDataAdapter
    cmd.Connection = con
    sda.SelectCommand = cmd
    Dim ds As DataSet = New DataSet
    sda.Fill(ds, "Customers")
    gvCustomers.DataSource = ds
    gvCustomers.DataBind()
End Sub

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :