javascript/css files

1. mvcct.odata.js
2. mvcct.controls.query.js

Asp.net Core Mvc Controls Toolkit offers friendly user interfaces to issue queries in OData format to the server. More specifically, the query tag helper generates query windows the user may open with toolbar buttons, and the query-inline tag helper generates in-line query forms.

Common attributes of query and query-inline tag helpers

type: QueryWindowType (enum: Filtering, Sorting, Grouping, Back)

Obligatory. Specifies the query functionality of the window: Filtering, Sorting, Grouping. Often this is the only property used for the query tag helper since all other settings are inherited from the query button ancestor tag helper. The Back value is adequate just for buttons. It specifies a button to return back to the previous query. Back buttons work only when queries get results with ajax . Changing page is not considered a different query so the back button doesn't go back to a previous page but directly to the last page visited of the previous query. This way, for instance, user may group data, click a detail button, browse all detail pages, and then with a single click he/she may return to the grouping page, and possibly select a different detail.

row-collection-name: string

A name that identifies the collection of RowTypes that must be used to generate the query window. In the case of the query tag helper RowTypes are inherithed from the control where the query buttons are placed in, and this attribute may be used to override them. In the case of the query-inline tag helper this attribute is obligatory and must contain the name of a RowType collection exported by the control containing the queried items(for instance a grid) with the rows-cache-key="RowTypeCollectionName" attribute.

window-template: string

The optional name of a partial view containing the layout template for the query window. The default layout template for the query-inline tag helper is this one, while the default template for the query tag helper is this one.

override-url: string, override-ajax-id: string

Usually, queries are issued to an url specified in the QueryDescription object containing the current query. If the url is followed by some spaces and then by an identifier id, an ajax call is issued and the html returned by the server replaces the content of the html node whose id is id.
These settings override the settings contained in the QueryDescription object.

source-for: ModelExpression

This attribute makes sense only for client providers (at moment no query provider is available) that query data from a JavaScript array. It is the property containing the array to query.

client-custom-processor-for: ModelExpression

This attribute makes sense only for client providers (at moment no query provider is available). The name of a property containing a setting object that specifies a custom processing of the data received by the server.

Important: localization of all strings in the query windows is performed with the type contained in the RowType localization-type attibute of the main RowType used to render the window fields. Thus, for instance, if the RowType comes from a grid they are localized with the localization-type specified in the grid tag helper (that contains also all information about the main RowType).

query and query-inline toolbars

Query windows may contain toolbars. For the query tag helper toolbars must be defined together with the toolbars of the tag helper where the query buttons are placed in, while query-inline toolbars must be defined as content of the tag helper itself.
The query window default layout templates support the following toolbar types: LayoutStandardPlaces.HeaderFilter, LayoutStandardPlaces.FooterFilter, LayoutStandardPlaces.SubmitBarFilter, LayoutStandardPlaces.HeaderSorting, LayoutStandardPlaces.FooterSorting, LayoutStandardPlaces.SubmitBarSorting, LayoutStandardPlaces.HeaderGrouping, LayoutStandardPlaces.FooterGrouping, LayoutStandardPlaces.SubmitBarGrouping
When at least a submit bar is provided, it is assumed that the submit button is rendered inside that toolbar, so the default submit and reset buttons are not rendered. Therefore, the developer must provide a button with data-operation="reset-form" that works as reset button and a button with
data-operation="server-query-filter query/server-query-sorting query/server-query-grouping query" that works as submit button.
Where "query" is a placeholder for the name of the property containing the QueryDescription object.

query tag helper specific attributes

play with it live

button-localization-type: Type

The type used to localize all query button strings.

button-text, button-title: string

Custom button text and html title. Both default texts and custom texts are localized with button-localization-type.

button-icon: string

Name of a css class containing the definition of a custom button icon.

button-css: string

A custom css class for the query button.

window-header: string

A custom header for the query window that opens when clicking the query button. Both default headers and the custom header are not automatically localized. Accordingly, the user must provide strings that have already been localized.

button-template: string

The optional name of a partial view containing the layout template for the query button. The default layout template is this one.

query-inline tag helper specific attributes

play with it live

asp-for: ModelExpression

Obligatory. The property containing the QueryDescription object with the current query.

collection-for: ModelExpression

Obligatory. The property containing the IEnumerable with the result of the query.

grouping-type: Type

Obligatory. The type of the ViewModel containing grouped items. This type must be either the same ViewModel used for standard items, or a subclass of it that for each property PropertyN whose occurrences might be counted in an aggregation, adds a new property called PropertyNCount.