Ajax

• 下载源码 - 458.27 KB

引言

撰写本文的目的是为了在实现中使用 Ajax Control Toolkit。在这里，我尝试使用 ObjectDataSource 创建一个三层架构。在一个应用程序中，假设我们想要在客户端编辑和删除 GridView 行。因此，在这里，我介绍了使用 Ajax Control Toolkit 进行客户端数据修改的最简单方法。

背景

早些时候，我也遇到了很多问题，并且无法解决在更新面板更新后如何处理任何事情。 所以我计划尽快写一个演示。 请随时发布任何评论、错误或改进建议。

关键场景

使用

• Ajax Control Toolkit
• 三层架构
• ObjectDataSource 
• JavaScript

三层架构的实现 

现在让我们开始在真实世界的应用程序中做一些事情。创建一个名为 *DBClass.cs* 的数据库层，我们将在其中定义各种字段和方法

在 *DBClass.cs* 类文件下，创建以下内容

public class DBClass
{
    private SqlConnection con = new SqlConnection();
    private SqlCommand com = new SqlCommand();
    private SqlDataAdapter da = new SqlDataAdapter();

    public DBClass()
	{
		//
		// Default Constructor
		//
	}
    private void setConnectionState()
    {
        if (con.State == System.Data.ConnectionState.Open)
        {
            con.Close();
        }
        con.ConnectionString = ConfigurationSettings.AppSettings["sqlCon"];
        con.Open();
    }

    public SqlCommand setCommand(string SP_Name)
    {
        setConnectionState();
        com = new SqlCommand(SP_Name, con);
        com.CommandType = System.Data.CommandType.StoredProcedure;
        return com;
    }

    public SqlDataAdapter setAdapter(string SP_Name)
    {
        setConnectionState();

        da = new SqlDataAdapter(SP_Name, con);
        da.SelectCommand.CommandType = System.Data.CommandType.StoredProcedure;
        return da;
    }
}

现在创建一个 *Client.cs*，我们将在其中定义各种字段、属性和方法

在 *Client.cs* 类文件下，创建以下字段

    private int CustomerID;
    private string CompanyName;
    private string ContactName;
    private string ContactTitle;
    private string Address;
    private string City;
    private string PostalCode;
    private string Country;
    private string Phone;
    private string Fax;

//create the following constructor:

    public Client()
	{
		//
		// Default constructor
		//
	}

    public Client(int customerID, string companyName, string contactName,
                  string contactTitle, string address, string city, string postalCode, 
                  string country, string phone,string fax)
    {
        this.CustomerID = customerID;
        this.CompanyName = companyName;
        this.ContactName = contactName;
        this.ContactTitle = contactTitle;
        this.Address = address;
        this.City = city;
        this.PostalCode = postalCode;
        this.Country = country;
        this.Phone = Phone;
        this.Fax = fax;
    }

//create properties for each class field like the following:

    public int customerID
    {
        get
        {
            return this.CustomerID;
        }
        set
        {
            this.CustomerID = value;
        }
    }

//create method for class like the following

    [DataObjectMethod(DataObjectMethodType.Select)]
    public static DataSet GetAllClient()
    {
        DataSet ds = new DataSet();
        try
        {
            DBClass db = new DBClass();
            SqlDataAdapter da = db.setAdapter("GetAllCustomers");
            da.Fill(ds);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
      
        return ds;
    }

    [DataObjectMethod(DataObjectMethodType.Fill)]
    public static DataSet ClientLoadByID(int CustomerID)
    {
        DataSet ds = new DataSet();
        try
        {
            DBClass db = new DBClass();
            SqlDataAdapter da = db.setAdapter("GetCustomerByID");
            da.SelectCommand.Parameters.Add
		(new SqlParameter("@CustomerID", CustomerID));
            da.Fill(ds);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
        return ds;
    }

   [DataObjectMethod(DataObjectMethodType.Delete)]
    public static bool ClientDelete(int CustomerID)
    {

        try
        {
            DBClass db = new DBClass();
            SqlCommand com = db.setCommand("DeleteCustomerByID");
            com.Parameters.Add(new SqlParameter("@CustomerID", CustomerID));
            com.ExecuteNonQuery();
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
        return true;
    }

    [DataObjectMethod(DataObjectMethodType.Update)]
    public static bool ClientUpdate(Client cust)
    {
        try
        {
            DBClass db = new DBClass();
            SqlCommand com = db.setCommand("CustomerUpdate");
            com.Parameters.Add(new SqlParameter("@CustomerID", cust.CustomerID));
            com.Parameters.Add(new SqlParameter("@CompanyName", cust.companyName));
            com.Parameters.Add(new SqlParameter("@ContactName", cust.contactName));
            com.Parameters.Add(new SqlParameter("@ContactTitle", cust.contactTitle));
            com.Parameters.Add(new SqlParameter("@Address", cust.address));
            com.Parameters.Add(new SqlParameter("@City", cust.city));
            com.Parameters.Add(new SqlParameter("@PostalCode", cust.postalCode));
            com.Parameters.Add(new SqlParameter("@Country", cust.country));
            com.Parameters.Add(new SqlParameter("@Phone", cust.phone));
            com.Parameters.Add(new SqlParameter("@Fax", cust.fax));
            com.ExecuteNonQuery();
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
        return true;
    }

AjaxComponentArtStyle.aspx

此页面包含两个更新面板。在第一个更新面板中，我有 GridView，在第二个更新面板中，我有一个 DetailsView。

ASP.NET UpdatePanel 控件使您能够构建丰富的、以客户端为中心的 Web 应用程序。通过使用 UpdatePanel 控件，您可以刷新页面的选定部分，而不是通过回发刷新整个页面。这被称为执行部分页面更新。 包含 ScriptManager 控件和一个或多个 UpdatePanel 控件的 ASP.NET 网页可以自动参与部分页面更新，而无需自定义客户端脚本。

ScriptManager

ScriptManager 控件管理 Microsoft ASP.NET AJAX 页面的客户端脚本。默认情况下，ScriptManager 控件会将 Microsoft AJAX 库的脚本注册到页面。这使客户端脚本能够使用类型系统扩展并支持诸如部分页面呈现和 Web 服务调用之类的功能。

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
   <div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
           <asp:GridView ID="gvCustomers" runat="server" DataSourceID="odsCustomerList">

           // Here we will add columns and template column fields             

           </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
   </div>
</form>

ObjectDataSource

ASP.NET ObjectDataSource 控件表示具有数据检索和更新功能的中层对象。ObjectDataSource 控件充当数据绑定控件（例如 GridView、FormView 或 DetailsView 控件）的数据接口。您可以使用这些控件来显示和编辑 ASP.NET 网页上中层业务对象中的数据。

在这里，我使用了两个 ObjectDataSource 来填充 GridView 和 DetailsView

<asp:ObjectDataSource ID="odsCustomerList" runat="server" TypeName="Client" 
             SelectMethod="GetAllClient" DeleteMethod="ClientDelete">             
</asp:ObjectDataSource>
        
<asp:ObjectDataSource ID="odsCustomerDetail" runat="server" TypeName="Client" 
           DataObjectTypeName="Client" OnSelecting="OdsCustomerDetail_Selecting" 
           SelectMethod="ClientLoadByID" UpdateMethod="ClientUpdate">            
</asp:ObjectDataSource>

ModalPopupExtender

它在屏幕上弹出一个模式窗体，其中包含您想要看到的任何内容，提示用户执行一些操作。

<ajax:ModalPopupExtender ID="mdlPopup" runat="server"
          TargetControlID="btnShowPopup" 
          PopupControlID="pnlPopup" CancelControlID="btnClose"
          BackgroundCssClass="modalBackground" />

DetailsView 

DetailsView 控件显示来自数据源的单个记录，其中每个数据行表示记录中的一个字段。它通常与 GridView 控件结合使用，用于主/详细信息方案。

<asp:DetailsView ID="dvCustomerDetail" runat="server"
          DataSourceID="odsCustomerDetail" CssClass="detailgrid" 
          GridLines="None" DefaultMode="Edit" AutoGenerateRows="false"
          Visible="false" Width="100%">
    <Fields>
     
    // Here we will add Bound field and template field to edit a row

    </Fields>
</asp:DetailsView>

Progress Bar

  <ajax:UpdatePanelAnimationExtender ID="UPAnimation" runat="server"
        TargetControlID="updatePanel">
                <Animations>
                    <OnUpdating>
                        <Parallel duration="0">
                            <%-- place the update progress div over the
                                gridview control --%>
                            <ScriptAction Script="onUpdating();" />  
                         </Parallel>
                    </OnUpdating>
                    <OnUpdated>
                        <Parallel duration="0">
                            <%--find the update progress div and place it
                                over the gridview control--%>
                            <ScriptAction Script="onUpdated();" /> 
                        </Parallel> 
                    </OnUpdated>
                </Animations>
            </ajax:UpdatePanelAnimationExtender>            
          
            <asp:Panel ID="Panel1" runat="server" CssClass="progress_bar"
                style="display:none;">
                <div class="container">
                    <div class="header">      Loading, please wait...</div>
                    <div class="body"><br />
                        <img src="Images/Indicater.gif" />
                    </div>
                </div>
            </asp:Panel>

Using the Code

要使用此代码，请下载相关的 zip 文件并创建一个名为 AjaxDB 的数据库，并在其中运行给定的脚本。 然后为应用程序创建一个虚拟目录，并在 web.config 中更改您的服务器，如下所示： 

  <appSettings>
    <add key="sqlCon"
    value="data source=SARFARAZ-0923B2\SQLEXPRESS;initial catalog=AjaxDB;
     integrated security=True"/>
  </appSettings>

历史

• 2009 年 3 月 5 日：初始发布

关于作者

Ashish Singh Parihar 在印度中央邦印多尔 IPS 学院完成了计算机应用硕士学位。 他目前在印多尔的一家 S/W 公司担任团队负责人超过 1 年。 他有超过 2 年的经验。 他还拥有理学士 (PCM) 学士学位。 他喜欢使用微软技术。 他从 C 开始，然后是 C++，然后转移到 .NET 1.1，然后是 .NET 2.0。 他目前正在使用 C#、ASP.NET、企业应用程序块、活动目录、WSS（Windows SharePoint Server）、DotNetNuke。 他喜欢用 C# 编程。 他也是微软 Web 开发金牌认证技术专家。 他的爱好包括听音乐和开发自己的小型工具和实用程序。