@page
@using C1.Web.Mvc.Grid
@model FlexGridModel
@{
    var optionsModel = (ControlOptions)ViewData["DemoOptions"];
    ViewData["DemoSettings"] = true;
}

@section Scripts{
    <script>
    function collectingQueryData(sender, e) {
        if (e.extraRequestData == null) {
            e.extraRequestData = {};
        }

        @foreach (var menuName in optionsModel.Options.Keys.Select(ControlOptions.ToOptionName))
        {
        <text>
        e.extraRequestData["@(menuName)"] = '@(optionsModel.Options[menuName].CurrentValue)';
        </text>
        }
    }
    </script>
}

@Html.AntiForgeryToken()

<c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true"
              sorting-type="@((AllowSorting)Enum.Parse(typeof(AllowSorting), optionsModel.Options["Allow Sorting"].CurrentValue))"
              selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))">
    <c1-flex-grid-column binding="ID"
                         is-visible="@(string.Compare(optionsModel.Options["Column Visibility"].CurrentValue, "show", true) == 0)"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start"
                         format="@(optionsModel.Options["Formatting"].CurrentValue == "On" ? "MMM d yy" : "")"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End"
                         format="@(optionsModel.Options["Formatting"].CurrentValue == "On" ? "HH:mm" : "")"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"
                         width="@optionsModel.Options["Column Resize"].CurrentValue"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    <c1-items-source initial-items-count="100" read-action-url="@Url.Page("FlexGrid", "Bind")" query-data="collectingQueryData"></c1-items-source>
</c1-flex-grid>



@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}

@section Summary{
    <p>This view shows basic features of FlexGrid razor Pages.</p>
}

@section Description{
    <p>
        Steps for getting started with the FlexGrid control in Razor Pages:
    </p>
    <ol>
        <li>Add handler <b>OnPostBind</b> to page model for model binding.</li>
        <li>Add token <b>@@Html.AntiForgeryToken()</b> in Razor page view.</li>
        <li>Initialize the FlexGrid control in Razor page view using <b>&lt;c1-flex-grid&gt;&lt;/c1-flex-grid&gt;</b> tag.</li>
        <li>Set value of read-action-url attribute as @@Url.Page("FlexGrid", "Bind"). Here, "FlexGrid" is the page name and "Bind" is the handler name without prefix.</li>
    </ol>
}

using System.Data.SqlClient;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesExplorer.Models;
using Microsoft.AspNetCore.Http;
using C1.Web.Mvc;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc.Serialization;
using System.Linq;
using Microsoft.Extensions.Primitives;
using System;

namespace RazorPagesExplorer.Pages
{
    public class FlexGridModel : PageModel
    {
        private readonly ControlOptions _gridDataModel = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Items",new OptionItem{Values = new List<string> {"5", "50", "500", "5000", "50000", "100000", "500000", "1000000"},CurrentValue = "500"}},
                {"Allow Sorting", new OptionItem {Values = new List<string> {"None", "SingleColumn","MultiColumn"}, CurrentValue = "None"}},
                {"Selection",new OptionItem{Values = new List<string> {"None", "Cell", "CellRange", "Row", "RowRange", "ListBox","MultiRange"},CurrentValue = "Cell"}},
                {"Formatting", new OptionItem {Values = new List<string> {"On", "Off"}, CurrentValue = "Off"}},
                {"Column Visibility",new OptionItem {Values = new List<string> {"Show", "Hide"}, CurrentValue = "Show"}},
                {"Column Resize", new OptionItem {Values = new List<string> {"100", "150"}, CurrentValue = "100"}}
            }
        };

        private void SetDemoOptions(IFormCollection collection)
        {
            _gridDataModel.LoadPostData(collection);
            ViewData["DemoOptions"] = _gridDataModel;
        }

        public void OnGet(IFormCollection collection)
        {
            SetDemoOptions(collection);
        }

        public void OnPost(IFormCollection collection)
        {
            SetDemoOptions(collection);
        }

        public ActionResult OnPostBind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
        {
            var extraData = requestData.ExtraRequestData
                 .ToDictionary(kvp => kvp.Key, kvp => new StringValues(kvp.Value.ToString()));
            var data = new FormCollection(extraData);
            _gridDataModel.LoadPostData(data);
            var model = Sale.GetData(Convert.ToInt32(_gridDataModel.Options["items"].CurrentValue));
            return JsonConvertHelper.C1Json(CollectionViewHelper.Read(requestData, model));
        }
    }
}