Passing Values Between Server and Client Sides

• Oct 06, 2023
• 3 minutes to read

DevExpress ASP.NET MVC Extensions provide two special members that allow you to pass data from the server to the client side: the JSProperties property and the CustomJSProperties event.

How to Access Server Data on the Client Side

Each of these two members - the JSProperties property or the CustomJSProperties event - allows you to pass a collection of name/value pairs from the server side to the client side (but not vice versa). The only requirement is that property names must begin with the ‘cp‘ prefix - to avoid rewriting a control’s base properties. The following value types are supported:

• null
• DBNull
• ValueType
• string
• IDictionary
• IEnumerable

JSProperties Property

The JSProperties property is a collection of property names and values for which you can declare temporary client properties. A property can be accessed on the client side once it is declared.

You can modify the JSProperties collection from any place in code where you have access to an MVCx[ExtensionName] object (for instance, MVCxButton, MVCxGridView).

Refer to the following section for more information about MVCx[ExtensionName] objects: Accessing the Wrapped ASP.NET Web Forms Control

Declaration

Razor

@Html.DevExpress().Menu(settings => {
    settings.Name = "myMenu";
    // ... 
    settings.PreRender = (sender, e) => {
      //Specify a custom property on the server side.
      ((MVCxMenu)sender).JSProperties["cpMyAttribute1"] = "1";
      ((MVCxMenu)sender).JSProperties.Add("cpMyAttribute2", "2");
    };
}).Bind(Model).GetHtml()

JavaScript

function MyFunction() {
    //After a property has been specified, you can access its value on the client side.
    var i1 = myMenu.cpMyAttribute1;
    var i2 = myMenu.cpMyAttribute2;
}

Example

How to Send a JSON Object to the Client using the JSProperties Property

Since a JSON object has a text format, you can use the JSProperties property ( or CustomJSProperties event) to send it as a string to the client side. Then, you can parse the string to get the object.

Razor

@Html.DevExpress().GridView(settings => {
    settings.Name = "myGrid";
    // ... 
    settings.PreRender = (sender, e) => {
      ((MVCxGridView)sender).JSProperties["cpJSON"] = "{ \"x\": \"Hello, \", \"y\": \"World!\" }";
        };
}).Bind(Model).GetHtml()

JavaScript

function ReadJSON() {
    var obj = JSON.parse(myGrid.cpJSON);
    alert(obj.x + obj.y);
}

CustomJSProperties Event

The CustomJSProperties event fires each time a control callback or page postback is sent to the server side. This event enables you to declare temporary client properties via the event parameter’s CustomJSPropertiesEventArgs.Properties property (a collection of property names and values). A property becomes accessible on the client after it is declared.

Example

C#

settings.CustomJSProperties = (s, e) => {
    var grid = s as MVCxGridView;
    e.Properties["cpVisibleRowCount"] = grid.VisibleRowCount;
    e.Properties["cpFilteredRowCountWithoutPage"] = GetFilteredRowCountWithoutPage(grid);
};

JavaScript

function GetSelectedFilteredRowCount() {
  return grid.cpFilteredRowCountWithoutPage + grid.GetSelectedKeysOnPage().length;
}

Refer to the ASP.NET MVC GridView - Select All Rows online demo to review the full code sample.