CustomJSProperties珍藏版。目的是減小客戶端的代碼數量，可是又能將服務器數據傳輸給客戶端。關鍵是：數據是實時更新的！！！！

時間 2019-11-19

標籤 customjsproperties 珍藏目的減小客戶端的代碼數量可是又能服務器數據傳輸客戶端關鍵數據實時更新欄目職業生涯简体版

原文原文鏈接

[這是幫助文檔的說明]html

CustomJSProperties Event
The CustomJSProperties event fires each time a control callback or page postback is sent to the server side. The
event enables you to declare temporary client properties using the event parameter's
CustomJSPropertiesEventArgs.Properties property, which is a collection of property names and their values. Once
declared, a property can be accessed on the client.
Note
Typically, using the JSProperties property will be more convenient and efficient than handling the
CustomJSProperties event, which is primarily declared for backward compatibilityexpress

Last month, I was creating a sample with the ASPxGridView when I needed to access the PageIndex property from the client side. The PageIndex property holds the current page index number. I needed to use the PageIndex for a client side function. Unfortunately, this property was only available on the server side. I used my keen insight to come up with the perfect suggestion to enhance the product: Just open up a bunch of server properties on the client side! Luckily, someone smarter than me (Andrew the ASPxGridView Architect) saw what a horrible idea that really was and came up with this enhancement that works better and does more...服務器

A new method allows you to expose almost any server side property to the client side.jsp

Using an ingenious technique which creates temporary client properties so that the client side is not weighed down with extra HTML or JavaScript if it's not needed.ide

【有一種方法能夠向客戶端提供服務器的任何屬性，目的是使得客戶端比較小，僅僅下載須要的代碼，目的是提高速度】post

The CustomJSProperties event enables you to declare temporary client properties. Once declared, these properties can be accessed from the client side. To add a new property, use the event parameter's http://documentation.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxGridViewClientJSPropertiesEventArgstopic property (this represents a collection of property names and their values).this

For example, to expose the PageIndex property, first override the CustomJSProperties event and add your custom property to expose to the client side: idea

protected void ASPxGridView1_CustomJSProperties(object sender, 
   DevExpress.Web.ASPxGridView.ASPxGridViewClientJSPropertiesEventArgs e) 
{
   e.Properties["cpPageIndex"] = ASPxGridView1.PageIndex;
}

That's it, your done. Now you're free to call this property from the client side:spa

<input id="Button2" type="button" value="Active Page" 
   onclick="alert(grid.cpPageIndex)" />

To avoid rewriting the ASPxGridView’s base properties, prefix the client side property name with "cp" for custom property (e.g. cpPageIndex).code

Here is a sample project that shows how it’s done: [CustomJSProperties.zip]

Thanks.

Mehul Harry (DevExpress)Web Program Manager

Email: mharry@devexpress.com

Twitter: @Mehulharry

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomJSProperties.aspx.cs" Inherits="CustomJSProperties" %>

<%@ Register assembly="DevExpress.Web.v17.2, Version=17.2.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/App_Data/nwind.mdb" 
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [City], [Country] FROM [Customers]">
        </asp:AccessDataSource>
    
        <dx:ASPxGridView ID="ASPxGridView2" runat="server" AutoGenerateColumns="False" 
            DataSourceID="AccessDataSource1" KeyFieldName="CustomerID" 
            ClientInstanceName="grid" 
            oncustomjsproperties="ASPxGridView2_CustomJSProperties">
            <Columns>
                <dx:GridViewDataTextColumn FieldName="CustomerID" ReadOnly="True" 
                    VisibleIndex="0">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="CompanyName" VisibleIndex="1">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="ContactName" VisibleIndex="2">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="City" VisibleIndex="3">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="Country" VisibleIndex="4">
                </dx:GridViewDataTextColumn>
            </Columns>
        </dx:ASPxGridView>
        <dx:ASPxButton ID="ASPxButton2" runat="server" EnableTheming="True" 
            Text="查詢當前頁碼" Theme="Material">
            <clientsideevents click="function(s, e) {
    alert(grid.cpPageIndex);
}" />
        </dx:ASPxButton>
        <br />
    
    </div>
    </form>
</body>
</html>

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class CustomJSProperties : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    
    //實時提供服務器變量
    protected void ASPxGridView2_CustomJSProperties(object sender, DevExpress.Web.ASPxGridViewClientJSPropertiesEventArgs e)
    {
        e.Properties["cpPageIndex"] = ASPxGridView2.PageIndex + 1;
    }
}