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

نمایش تصویر بارگیری هنگام مکالمه های PostBack در ASP.Net
0 0
نمایش تصویر بارگیری هنگام مکالمه های PostBack در ASP.Net

با سلام در این مقاله چگونگی نمایش تصویر بارگیری هنگام انجام کارهای سنگین در صفحه Load و صفحه ارسال در ASP.Net با استفاده از jQuery و JavaScript را توضیح خواهیم داد.
 
بانک اطلاعات
برای این مقاله ، از جدول مشتریان از بانک اطلاعات Northwind استفاده می کنیم. می توانید از طریق لینک زیر پایگاه داده 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
برای پس زمینه modal باید CSS زیر را در بخش HEAD صفحه قرار دهید.

<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>

نمایش تصویر پیشرفت بارگیری در Page Load و PostBack
کد JavaScript و jQuery زیر یک پس زمینه modal ایجاد کرده و هنگام ارسال فرم HTML ، تصویر بارگذاری را نشان می دهد. بنابراین هر بار که از کنترل مانند دکمه ، LinkButton و غیره استفاده شود ، PostBack پنجره 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

 گرفتن رکورد ها از پایگاه داده
در زیر کد ساده ای وجود دارد که کلیه مشتریان را از جدول Customers در پایگاه داده Northwind بارگذاری کرده و آن را در GridView در کلیک btnSubmit نمایش می دهد . از آنجا که ما این فرضیه را به عنوان یک فرایند طولانی سنگین فرض می کنیم ، موضوع را اضافه کردیم.  در رویداد btnSubmitclick ما Thread.Sleep را اضافه کردیم
در Page_Load متوجه خواهید شد که به راحتی می توانیم جاوا اسکریپت راه اندازی شده را ثبت کنیم که یک رویداد jQuery است که به محض بارگیری سند روی دکمه btnSubmit کلیک می کند. این کار به صورت عمدی انجام شده است تا تصویر پیشرفت بارگذاری را در صفحه Load نیز نمایش دهد.
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 استفاده کنید.

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