WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

要求の中断による処理のキャンセル (MVC5)

by WebSurfer 12. July 2021 10:30

.NET Framework 版の ASP.NET Web アプリで、クライアントによる要求の中断を検出してサーバー側の処理をキャンセルする話を書きます。(ASP.NET Core の場合は先の記事「要求の中断による処理のキャンセル (CORE)」を見てください)

要求の中断

クライアントによる要求の中断とは、上の画像の赤丸印の中のブラウザの ✕ ボタンをクリックするとか Esc キーを押す、Ajax を使っての要求の場合は XMLHttpRequest.abort() メソッドを実行することを意味します。

ASP.NET 4.5 以降には HttpResponse.ClientDisconnectedToken プロパティが追加されています。このプロパティで取得できる CancellationToken によって、クライアントが要求の中断操作を行った場合に操作を取り消す通知を配信できます。(ASP.NET Core の HttpContext.RequestAborted プロパティと同様)

ただし、ASP.NET 4.5 以降という条件以外にも、上に紹介した Microsoft のドキュメントに書いてあるように IIS 7.5 以降の統合モードでのみサポートされているということですので注意してください

Visual Studio 2019 を使って、以下のコードを [デバッグ(D)] ⇒ [デバッグの開始(S)] で IIS 10 Express で実行して検証してみました。検証に使用したブラウザは Edge v91.0.864.67, Chrome v91.0.4472.124, Firefox v89.0.2, IE11, Opera v77.0.4054.203 で、いずれもクライアントによる要求の中断によってサーバー側での処理の中断が確認できました。

using System;
using System.Web.Mvc;
using System.Threading.Tasks;
using System.Diagnostics;

namespace Mvc5App2.Controllers
{
    public class HomeController : Controller
    {

        // ・・・中略・・・

        public async Task<ActionResult> Cancel()
        {
            var token = Response.ClientDisconnectedToken;

            Debug.WriteLine($"start: {DateTime.Now:ss.fff}");
            await Task.Delay(5000, token);
            Debug.WriteLine($"end: {DateTime.Now:ss.fff}");
            return View();
        }
    }
}

ASP.NET Core MVC と違ってアクションメソッドの引数に CancellationToken を追加しても ClientDisconnectedToken プロパティで取得される CancellationToken はバインドされないので注意してください。なので、上のコードのようにする必要があります。(引数に追加すると CancellationToken がバインドされますが、それは ClientDisconnectedToken プロパティで取得できるものとは別物のようで要求の中断による通知は出ません)

上のコードの Task.Delay(5000, token) では渡した token を Deley メソッドの中で継続的に観察しているようで、このメソッドが実行が開始された後でもそれから 5 秒以内ならブラウザで要求を中断すると TaskCanceledException がスローされて処理が終わります。

ただし、Entity Framework を使ってデータベースにアクセスして処置を行うときに使う ToListAsync とか SaveChangesAsync などや、HttpClient の SendAsync とか PostAsync なども同様かどうかは調べてなくて分かりません。今後の検討課題ということで・・・

Tags: , , ,

ASP.NET

数字と他の文字混在の列のソート

by WebSurfer 22. May 2021 19:44

以下のように数字とその他の文字が混在している列がある SQL Server のテーブルを ASP.NET Web Forms アプリの GridView に表示し、数字だけの行とその他の行を分けてソートする方法を書きます。

SQL Server のテーブル

元の話は Teratail のスレッド「gridviewで数値と文字列が混在している際に数値の大小順に並べ替えたい」のものです。それは Access を使った場合ですが、SQL Server で同様なことを行います。

昇順降順のソートだけでなく、GridView + SqlDataSource に組み込まれている選択、ページング、データの編集・更新機能も働くようにするのが条件です。

例えば、上の画像のテーブルの Name フィールドを、数字だけの行とその他の行を分けて昇順にソートするには、ISNUMERIC (Transact-SQL)CAST (Transact-SQL) を ORDER BY 句に使って以下のようにすることで可能です。

ORDER BY によるソート

まず、ORDER BY ISNUMERIC([Name]) DESC で数字だけの行が先に来るように並び替え(数字の場合は 1、それ以外は 0 になるので DESC を付与しています)、その結果を CAST WHEN ... END ASC で数字の場合は FLOAT に変換しそれ以外は 0 にしてから昇順 (ASC) に並べ替え、さらにその結果を [Name] ASC で普通に文字列として昇順 (ASC) に並べ替えを行っています。

(上に紹介した ISNUMERIC のドキュメントの説明に "有効な数値データ型は次のとおりです・・・" とあって、その中に文字列型はありません。しかし、上の画像の通り、自分の開発環境にある SQL Server 2012 で試した限りは nvarchar でも判定してくれました。公式ドキュメントに nvarchar でもよいと書いてないのは不安要素ではありますが)

GridView + SqlDataSource を使ってテーブルのレコード一覧を表示する場合、単純に文字列としてソーティングを行うなら GridView の AllowPaging プロパティを true に設定するだけで、GridView + SqlDataSource に組み込まれた機能を使って一行もコードを書かずにソート機能を実装可能です。

ちなみに、GridView + SqlDataSource に備わっているデフォルトのソート機能というのは以下のようになっています。

  1. GridView の AllowPaging プロパティを true に設定するとヘッダがリンクボタンになる。
  2. リンクボタンのクリックによってポストバックが起こる。
  3. サーバー側ではそれを受けて SQL Server から SqlDataSource 経由でデータを取得。(その時、SqlDataSource の SelectCommand プロパティに設定した SELECT クエリがそのまま SQL Server に発行されます。ORDER BY 句を付与して発行されるわけではありません。リンクボタンをクリックするたび毎回ポストバックが発生し、その都度 SQL Server にクエリが発行される点にも注意してください)
  4. 取得したデータから DataView を作って、その Sort プロパティにクリックされたリンクボタンのある列の SortExpression を設定。(SortExpression はデフォルトではその列の列名すなわち DataView の列名と同じになっています)
  5. それによりソートされた結果を GirdView に表示する。
  6. 同じリンクボタンを再度クリックすると、上記 2 ~ 4 と同じプロセスが実行されるが、昇順降順が切り替わる。(上記 4 で ASC, DESC を切り替えて付与しているようです)

なので、例えば、上の 2 つ目の画像の ORDER BY 句つき SELECT クエリを SqlDataSource の SelectCommand プロパティに設定すると、初期画面ではレコード一覧は 2 つ目の画像のとおり表示されますが、ヘッダのリンボタンをクリックすると上の 4 の結果、すなわち単純に文字列としてソーティングした結果が表示されます。

それでは要件を満足できず、全ての列のヘッダのリンクボタンのクリックで上の 2 つ目の画像のように数字だけの行とその他の行を分けてソートし、さらにクリックするたびに昇順降順を切り替えたり、ページングや編集操作を行ってもソーティング結果に破綻が無いようにするにはかなり手を加える必要があります。

そのあたりを考えてサンプルコードを書いてみました。そのコードを下にアップしておきます。ポイントは、コード内のコメントにも書きましたのでそれを見てください。(手抜きでスミマセン)

.aspx.cs

using System;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class GridViewSorting : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // ポストバック前の SELECT クエリを ViewState に保持しておき、
            // Load イベントで SqlDataSource.SelectCommand に設定する。
            // これをしないとページングなどでポストバックしたときソート
            // されなくなってしまう
            string selectQuery = (string)ViewState["CurrectSelectQuery"];
            if (!string.IsNullOrEmpty(selectQuery))
            {
                SqlDataSource1.SelectCommand = selectQuery;
            }
        }

        // GridView で AllowPaging="True" とし、CommandName="Sort" と設定
        // されているヘッダの LinkButton をクリックすると Sorting イベント
        // が発生する。そのハンドラで SqlDataSource.SelectCommand の書き換
        // えを行う。        
        protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
        {
            GridView gv = (GridView)sender;
            string exp = e.SortExpression;
            string dir = "";

            // ISNUMERIC(exp) は exp が数字の場合 1 に、それ以外は 0 になる。
            // 昇順で数字の行が先に来るようにするには ORDER BY ISNUMERIC(exp)
            // に DESC を、降順の場合は ASC を付与するために使う
            string dirRev = "";

            // GridView に独自属性 CurrentSortField, CurrentSortDir が
            // 追加してある。それにポストバック前のソート対象フィールドと昇順
            // 降順の情報を保持しておく。それと、e.SortExpression の情報を元
            // に SELECT クエリの ORDER BY 句を組み立てる
            if (gv.Attributes["CurrentSortField"] != null &&
                gv.Attributes["CurrentSortDir"] != null)
            {
                // ユーザーが同じヘッダの LinkButton を繰り返しクリックした
                // 場合は昇順降順を切り替える
                if (exp == gv.Attributes["CurrentSortField"])
                {
                    if (gv.Attributes["CurrentSortDir"] == "ASC")
                    {
                        dir = "DESC";
                        dirRev = "ASC"; 
                        gv.Attributes["CurrentSortDir"] = "DESC";
                    }
                    else
                    {
                        dir = "ASC";
                        dirRev = "DESC";
                        gv.Attributes["CurrentSortDir"] = "ASC";
                    }
                }
                // 初期画面から LinkButton クリック、または前と違う LinkButton
                // をクリックした場合
                else
                {
                    gv.Attributes["CurrentSortField"] = exp;
                    dir = "ASC";
                    dirRev = "DESC";
                    gv.Attributes["CurrentSortDir"] = "ASC";
                }
            }

            // SELECT クエリの ORDER BY 句の組み立て、
            // SqlDataSource.SelectCommandプロパティ への設定
            SqlDataSource1.SelectCommand = "SELECT [ID], [Name], [Note] FROM [TestTable] " +
                $"ORDER BY ISNUMERIC([{exp}]) {dirRev}, " +
                $"CASE WHEN ISNUMERIC([{exp}]) = 1 THEN CAST([{exp}] AS FLOAT) ELSE 0 END {dir}, " +
                $"[{exp}] {dir}";

            // SELECT クエリを ViewState に保持
            ViewState["CurrectSelectQuery"] = SqlDataSource1.SelectCommand;

            // 組み込みのソーティングをキャンセルする
            e.Cancel = true;

            // 編集モードに入ったままページングすると編集する行がズレてしまうので
            // ここで編集モードを解除
            gv.EditIndex = -1;
        }

        // 上の Sorting イベントのハンドラでソーティングをキャンセルすると
        // SortedAscendingHeaderStyle, SortedDescendingHeaderStyle
        // プロパティを使ってヘッダに ↑ とか ↓ の画像などの CSS を設定し
        // ても適用されない。なので、以下のようなコードを書いてソート対象
        // にしたヘッダに動的に css を適用する
        protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            string field = GridView1.Attributes["CurrentSortField"];

            if (e.Row.RowType == DataControlRowType.Header &&
                !string.IsNullOrEmpty(field))
            {
                LinkButton lb = e.Row.FindControl(field) as LinkButton;

                if (lb != null)
                {
                    if (GridView1.Attributes["CurrentSortDir"] == "ASC")
                    {
                        lb.CssClass = "sortasc-header";
                    }
                    else if (GridView1.Attributes["CurrentSortDir"] == "DESC")
                    {
                        lb.CssClass = "sortdesc-header";
                    }
                }
            }
        }
    }
}

.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="GridViewSorting.aspx.cs" 
    Inherits="WebApplication1.GridViewSorting" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>GridView Sorting</title>
    <style type="text/css">
        .sortasc-header {
            background: url(img/sort-asc.png) right center no-repeat;
        }

        .sortdesc-header {
            background: url(img/sort-desc.png) right center no-repeat;
        }

        th a
        {
            padding-right: 20px;
        } 
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:TestDatabaseConnectionString %>" 
            DeleteCommand="DELETE FROM [TestTable] WHERE [ID] = @ID" 
            InsertCommand="INSERT INTO [TestTable] ([Name], [Note]) VALUES (@Name, @Note)" 
            SelectCommand="SELECT [ID], [Name], [Note] FROM [TestTable]" 
            UpdateCommand="UPDATE [TestTable] SET [Name] = @Name, [Note] = @Note WHERE [ID] = @ID">
            <DeleteParameters>
                <asp:Parameter Name="ID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="Name" Type="String" />
                <asp:Parameter Name="Note" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="Name" Type="String" />
                <asp:Parameter Name="Note" Type="String" />
                <asp:Parameter Name="ID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>

        <%--GridView に独自属性 CurrentSortField, CurrentSortDir 
            を追加。それにも ViewState は有効で、ポストバック前のソート
            対象フィールドと昇順降順の情報を保持できる--%>
        <asp:GridView ID="GridView1" runat="server" 
            AllowPaging="True" 
            AllowSorting="True" 
            AutoGenerateColumns="False" 
            DataKeyNames="ID" 
            DataSourceID="SqlDataSource1" 
            CurrentSortField=""
            CurrentSortDir=""
            OnRowCreated="GridView1_RowCreated" 
            OnSorting="GridView1_Sorting">
            <Columns>
                <asp:CommandField ShowDeleteButton="True" 
                    ShowEditButton="True" ShowSelectButton="True" />
                <asp:TemplateField HeaderText="ID" 
                    InsertVisible="False" SortExpression="ID">
                    <EditItemTemplate>
                        <asp:Label ID="Label1" runat="server" 
                            Text='<%# Eval("ID") %>'></asp:Label>
                    </EditItemTemplate>
                    <HeaderTemplate>
                        <asp:LinkButton ID="ID" runat="server" 
                            CommandName="Sort" CommandArgument="ID">
                            ID
                        </asp:LinkButton>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" 
                            Text='<%# Bind("ID") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name" SortExpression="Name">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" 
                            Text='<%# Bind("Name") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <HeaderTemplate>
                        <asp:LinkButton ID="Name" runat="server" 
                            CommandName="Sort" CommandArgument="Name">
                            Name
                        </asp:LinkButton>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" 
                            Text='<%# Bind("Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Note" SortExpression="Note">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" 
                            Text='<%# Bind("Note") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <HeaderTemplate>
                        <asp:LinkButton ID="Note" runat="server" 
                            CommandName="Sort" CommandArgument="Note">
                            Note
                        </asp:LinkButton>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" 
                            Text='<%# Bind("Note") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

上のコードを実行し、ヘッダの Name をクリックすると以下のようになります。

ソート結果

Tags: , , , ,

ASP.NET

ReportViewer にハイパーリンク設定

by WebSurfer 23. November 2020 18:23

ASP.NET Web Forms アプリ用の ReportViewer のテキストにハイパーリンクを設定する方法を備忘録として書いておきます。LocalReport の場合ですので注意してください。ServerReport で同じことができるかは不明です。

ReportViwer にハイパーリンク設定

上の画像は Product Name 列のテキストがハイパーリンクとなるように設定したものです。上から 3 番目の Aniseed Syrup をマウスでポイントして、それに設定したリンク先が画面の左下に表示されています。

ReportViewer のハイパーリンクの設定方法は以下の Microsoft のドキュメントに説明があります。

ドキュメントにある「プロパティ」とか「アクション」は何かと言うと、Visual Studio で .rdlc ファイルを開いてテキストボックスを右クリックすると出てくるメニューの[テキストボックスのプロパティ...]で表示される「テキストボックスのプロパティ」ダイアログと[アクション]タブのことです。

テキストボックスのプロパティ

そのダイアログで[URL に移動する(U)]を選択すると、テキストをクリックしたときの遷移先の URL を入力する[URL の選択(S)]テキストボックスが現れます。

テキストボックスに http または https から始まる絶対 URL を入力すると、ブラウザに表示されたとき、テキストがその URL へのハイパーリンクとして設定されます。相対 URL では無視されますので注意してください

.aspx ファイルの ReportViewer のコードの LocalReport 要素に EnableHyperlinks="True" を設定するのを忘れないようにしてください。忘れると "レポート 'Report1' にハイパーリンクが含まれます。このレポートの EnableHyperlinks プロパティが設定されていません" というエラーになります。

フィールドのデータに URL を含めてそれをリンク先として設定することもできます。また、上の画像のダイアログの[fx」をクリックすると表示されるダイアログで以下のように式を入力することもできます。

式の設定

上の画像で、式は C# の文字列の結合の場合と似ていますが、C# と違って ToString() を付けないと URL が設定されないので注意してください。エラーも出ず設定が無視されます。

最後に、ハイパーリンクのスタイルですが、下の画像のように、color: Black; text-decolation: none; が設定されています。

ハイパーリンクの CSS

なので、何もしなければ文字の色は他のテキストと同じ黒で、マウスをポイントしても何も変わりません。変えたい場合は以下のような CSS を追加すれば可能です。

<style type="text/css">
    a {
        text-decoration: none !important;
        color: #5C80B1 !important;
    }

    a:hover {
        text-decoration:underline !important;
    }
</style>

この記事の一番上の画像は上の CSS を適用したものです。色が他のテキストと違っていますし、マウスをポイントするとアンダーラインが表示されるのが分かりますでしょうか。

Tags: ,

ASP.NET

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  July 2021  >>
MoTuWeThFrSaSu
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

View posts in large calendar