ASP.NET MVC で二重サブミットを防止したい

ASP.NET MVC で二重サブミットを防止したい

フォームなんかでボタンをうっかりダブルクリックしちゃって二重に投稿されてしまうのを防ぎたい。 クリックしたらボタンを無効にできればなお良し。

単純に JavaScript でボタンクリックされたら無効にするイベントハンドラ書けばいいと思ってたら、クライアントバリデーションに失敗したときボタンが押せなくなって困った。

なので今のところ

$(function () {
    $("form").on("submit", function (e) {
        var $form = $(this);
        // クライアントバリデーションに成功したら submit を無効にする
        if ($form.valid()) {
            $(this).find("[data-disable-with]").each(function () {
                var $button = $(this);
                var text = $button.attr("data-disable-with");
                $button.val(text);
                $button.prop("disabled", true);
            });
        }
    });
});

な感じでクライアントバリデーションに成功したらボタンを無効にするようにしている。Rails をマネして、data-disable-with 属性でボタンを無効にしたとき、ボタンのタイトルも変更できるようにもしてみた。

ビューでは

<input type="submit" value="ログイン" class="btn btn-lg btn-primary btn-block" data-disable-with="ログイン中..." />

という風に使っている。

 

元ネタ https://tnakamura.hatenablog.com/entry/2015/07/30/double-submit-protection

 

pdf.jsを使用するとPDFの画質が悪い

 pdf.jsを使用するとPDFの画質が悪い

scale'属性を1から2に変更しただけで、品質が大幅に向上しました。

pdfDoc.getPage(1)
  .then(function (page) {
       var canvas = document.getElementById('myCanvas');
       var ctx = canvas.getContext('2d');

       var viewport = page.getViewport(2); // 2 is the 'scale' attr
       canvas.height = viewport.height;
       canvas.width = viewport.width;

       var renderContext = {
              canvasContext: ctx,
              viewport: viewport
       };

       page.render(renderContext);
});

 

ASP.NETでビルド構成別にWeb.configを変更する方法

 ASP.NETでビルド構成別にWeb.configを変更する方法

 変更箇所が一つの場合

<add key="test1" value="devlocal"　xdt:Transform="Replace" xdt:Locator="Match(name)"/>

Syste.webまるごとの場合

 <system.web xdt:Transform="Replace">
    <!-- 認証の設定 -->
    <authentication mode="Forms">
      <forms loginUrl="~/Account/LoginStaff" timeout="2880" />
    </authentication>
    <compilation debug="true" targetFramework="4.6.1" />
    <httpRuntime targetFramework="4.6.1" enableVersionHeader="false" />
    <customErrors mode="Off" />
    <sessionState mode="StateServer" timeout="120" />
    <pages>
      <namespaces>
        <add namespace="Kendo.Mvc.UI" />
      </namespaces>
    </pages>
    <globalization culture="ja-JP" uiCulture="ja" />
  </system.web>
</configuration>

 

変更箇所に　xdt:Transform="Replace"　を追加

TelerikのDocumentコンポーネントを使って Excelファイルを操作する。

 TelerikのDocumentコンポーネントを使って Excelファイルを操作する。

            Telerik.Windows.Documents.Spreadsheet.Model.Workbook workbook;
            var formatProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx.XlsxFormatProvider();

            using (Stream input = new FileStream(iTemplate, FileMode.Open)) {
                workbook = formatProvider.Import(input);
            }

            var worksheet = workbook.Worksheets[0];

 

こんな感じで操作可能

PDF.jsで日本語が表示されない件

 PDF.jsで日本語が表示されない件

Javascript側で cMapUrl = "../Scripts/PDFjs/web/cmaps/";

cmapUrlを設定しているのに cmapがリンクしないとエラー表示されて日本語が表示されなかった。

 理由：IIS側で bcmapのMINEが無かったからリンク出来なかった。

対応 IISのMINEに

    <mimeMap fileExtension=".bcmap" mimeType="application/octet-stream" />

を追加することでリンク可能となり、日本語表示されました。

 

PDFを直リンクしない(ダウンロードしない)で表示する方法

 PDFを直リンクしない(ダウンロードしない)で表示する方法

１．html5標準のembedを使用する

例

<embed style="position:absolute; left: 30px; top: 50px;"
       width="100%" height="100%"
       type="application/pdf"
       src="data:application/pdf;base64,---ココにbase64文字列---" />

 

２．PDF.jsを利用

例

https://mozilla.github.io/pdf.js/examples/
 上記のHello World using base64 encoded PDF を使用しました。

 １の場合、Android以外はOKでした。

仕方なく２のPDF.jsを使用しましたが、PDF.jsがCJKに対応していないので

PDFにフォントを埋め込んで対応しました。

 

サーバ側でPDFファイルをBase64に変換する。

 using (var fs = new System.IO.FileStream(Pdffile, System.IO.FileMode.Open, System.IO.FileAccess.Read)) {
                // ファイルをバイト配列に変換
                byte[] bs = new byte[fs.Length];
                fs.Read(bs, 0, bs.Length);
                fs.Close();

                // base64形式に変換
                string base64str = System.Convert.ToBase64String(bs);
                ViewBag.Base64 = base64str;
            } 

Razorで @ViewBag.Base64でデータを流し込みます。

 

PDFを直リンク させると誰でも見れるので、PDFファイルをbase64に変換後

pdf.jsでクライアント側で表示するようにしました。