C# と VB.NET の質問掲示板

わんくま同盟

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

ツリー一括表示

TextBoxForでHttppost時の通貨書式→数値変換 /ジョディー (19/01/31(Thu) 00:19) #90016
Re[1]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer (19/01/31(Thu) 07:11) #90018
Re[1]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer (19/01/31(Thu) 18:05) #90035
  ├ Re[2]: TextBoxForでHttppost時の通貨書式→数値変換 /ジョディー (19/01/31(Thu) 22:54) #90037
  │└ Re[3]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer (19/02/01(Fri) 09:51) #90043
  └ Re[2]: TextBoxForでHttppost時の通貨書式→数値変換 /ジョディー (19/01/31(Thu) 23:05) #90038
    └ Re[3]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer (19/02/01(Fri) 10:47) #90045
      └ Re[4]: TextBoxForでHttppost時の通貨書式→数値変換 /ジョディー (19/02/01(Fri) 18:15) #90058 解決済み
        └ Re[5]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer (19/02/01(Fri) 18:31) #90059
          └ Re[6]: TextBoxForでHttppost時の通貨書式→数値変換 /ジョディー (19/02/06(Wed) 23:52) #90083
            └ Re[7]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer (19/02/07(Thu) 11:22) #90085
              ├ Re[8]: TextBoxForでHttppost時の通貨書式→数値変換 /ジョディー (19/02/07(Thu) 23:07) #90092
              └ Re[8]: TextBoxForでHttppost時の通貨書式→数値変換 /ジョディー (19/02/08(Fri) 02:29) #90093
                └ Re[9]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer (19/02/08(Fri) 12:20) #90095
                  └ Re[10]: TextBoxForでHttppost時の通貨書式→数値変換 /ジョディー (19/02/08(Fri) 21:02) #90103 解決済み
                    └ Re[11]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer (19/02/10(Sun) 16:07) #90123 解決済み


親記事 / ▼[ 90018 ] ▼[ 90035 ]
■90016 / 親階層)  TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ ジョディー (1回)-(2019/01/31(Thu) 00:19:52)

分類:[ASP.NET (C#)] 

2019/02/01(Fri) 18:03:49 編集(投稿者)
2019/01/31(Thu) 23:09:55 編集(投稿者)

<pre><pre>はじめまして、ジョディーと申します。
半年前の未経験状態から、自宅でAsp.Net MVC Webアプリを独学中です。
何分初心者ですので、質問の言葉が不適切な場合もあろうかと思いますが、
ご不明点、不足な点がございましたら、ご指摘くださいませ。

■質問概要:

ブラウザに通貨型書式でGet表示された状態で、Httppostする際、
Decimal型ではないとバリデーションエラーになってしまいます。
Model定義通りに"\"や","を除いたDecimalで返したいのですが、
それらの文字を除くコードを追加しないといけないのでしょうか?
それとも書式設定の仕方が悪いのでしょうか?
具体的な内容を以下に示します。
ご指導のほど、よろしくお願い致します。

■開発環境:

Windows10
Visual Studio2017community version 15.9.4
(SQLServer: MSSQLLOCALDB)

Microsoft Edge(InternetExproler11でも同様の事象でした。)

Asp.Net MVC で開発

■事象詳細
VSからアプリを実行し、ブラウザが開きます。
そして、データベースに保存済の情報がGetされます。
Priceはdecimal型で保存されています。
ブラウザ表示は、Viewの書式設定「TextBoxForに"{0:c}"」で通貨表示できます。
他の情報も同様に表示できます。

ここで、他の変数(例:"ContractDate"を編集して、「保存」ボタンを押して、HttpPostしようとすると、
クライアントサイドバリデーションでエラーとなってしまいます。

もちろん、"\"や","がない、ベタな数値に直してやれば、保存できます。が、修正の必要がないPriceをイチイチ修正しなければなりません。

■ソースコード抜粋

レスに再掲しましたので、当該部から削除しました。

[ □ Tree ] 返信 編集キー/

▲[ 90016 ] / 返信無し
■90018 / 1階層)  Re[1]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ WebSurfer (1734回)-(2019/01/31(Thu) 07:11:43)
Controller のコードも書いてください。それをベースにスキャフォールディング機能を使って view を生成したのではないのですか?

あと、コードを書き込む場合は、「図表モード」を使ってください。インデントされて見やすくなりますので。可能であれば、上の質問も「図表モード」で書き直してください。
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90016 ] / ▼[ 90037 ] ▼[ 90038 ]
■90035 / 1階層)  Re[1]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ WebSurfer (1738回)-(2019/01/31(Thu) 18:05:12)
No90016 (ジョディー さん) に返信

Controller のコードが不明、Model と View のコードの整合がとれてないなど不明な点が
ありますが、分かる範囲で回答しておきます。

> Model定義通りに"\"や","を除いたDecimalで返したいのですが、
> それらの文字を除くコードを追加しないといけないのでしょうか?

それは自分が知る限り無理なので(少なくとも、現実的ではないので)、

(1) DisplayFor 等を使った表示の場合のみ書式設定を行い、

(2) 編集操作に入ってテキストボックスに値を表示する場合は書式設定しない(または、"{0:F0}"
  などの書式設定に留め、数字として不正な文字は表示されないようにする)。

・・・としてはいかがですか? ASP.NET Web Forms アプリで使う GridView などではそれがデフ
ォルトの動きです。

どうしてもテキストボックスに表示する文字列も \12,345,678 のようにしたいということであれば、
decimal 型ではなく string 型として扱い、検証はデータアノテーション属性を付与して正規表現
で行なうということも考えられますが、DB のフィールドの型が money 型でしょうから、サーバー
側での取り扱いを考えると現実的ではなさそうです。

ユーザーとしても、編集する際にいちいち \ とか , を入力するのは煩わしいはずで、喜んではくれ
ないのでは?
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90035 ] / ▼[ 90043 ]
■90037 / 2階層)  Re[2]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ ジョディー (2回)-(2019/01/31(Thu) 22:54:42)
2019/01/31(Thu) 23:10:50 編集(投稿者)
2019/01/31(Thu) 23:09:08 編集(投稿者)
2019/01/31(Thu) 23:07:43 編集(投稿者)
<pre><pre>2019/01/31(Thu) 23:07:17 編集(投稿者)

<pre><pre>ジョディーです。図表モードでソースコードを記載してみました。
これでよろしいでしょうか?
ソースコードは長いので、パラメータを一部に絞ったソースコードの抜粋を以下に示します。
抜粋する難しさを痛感しております。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace Contract.Models
{
    public class Keiyaku
    {
        public int ID { get; set; }

    [Display(Name = "契約日")]
    public DateTime ContractDate { get; set; }
    [Column("money")]
    [Display(Name = "価格")]
    public decimal Price { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using Contract.DAL;
using Contract.Models;

namespace Contract.Controllers
{
    public class ContractController : Controller
    {
        private KeiyakuContext db = new KeiyakuContext();

        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Keiyaku keiyaku = db.Keiyaku.Find(id);
            if (keiyaku == null)
            {
                return HttpNotFound();
            }
            return View(keiyaku);
        }

        // POST: Contract/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "ID,ContractDate,Price")] Keiyaku keiyaku)
        {
            if (ModelState.IsValid)
            {
                db.Entry(keiyaku).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(keiyaku);
        }
        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

@model Contract.Models.Keiyaku

・・・
<h2>編集</h2>

@using (Html.BeginForm())
{
<div>
    <dl class="dl-horizontal">
    <dt>詳細情報</dt>
    <dd>

        <th>契約日</th>
        <td>@Html.TextBoxFor(model => model.Keiyaku.ContractDate, "{0:yyyy/MM/dd}")</td>
        @Html.ValidationMessageFor(model => model.Keiyaku.ContractDate)

        <th>価格</th>
        <td>@Html.TextBoxFor(model => model.Keiyaku.Price,"{0:c}")</td>
        @Html.ValidationMessageFor(model => model.Keiyaku.Price)
    </dd>
<div>
<input type="submit" name="save" value="保存" formmethod="post" />
</div>
<p>
    @Html.ActionLink("一覧に戻る", "Index")
</p>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}


以上です。よろしくお願い致します。
</pre></pre></pre></pre>

[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90037 ] / 返信無し
■90043 / 3階層)  Re[3]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ WebSurfer (1739回)-(2019/02/01(Fri) 09:51:05)
No90037 (ジョディー さん) に返信

> 図表モードでソースコードを記載してみました。
> これでよろしいでしょうか?
> ソースコードは長いので、パラメータを一部に絞ったソースコードの抜粋を以> 下に示します。
> 抜粋する難しさを痛感しております。

「図表モード」での対応ありがとうございました。

ただ、依然として Model と View のコードの整合がとれてないようです。「抜粋」の際に
間違っただけで、実際はちゃんと動いていると理解して良いのですよね?
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90035 ] / ▼[ 90045 ]
■90038 / 2階層)  Re[2]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ ジョディー (3回)-(2019/01/31(Thu) 23:05:43)
2019/02/01(Fri) 17:59:02 編集(投稿者)

No90035 (WebSurfer さん) に返信
>
> それは自分が知る限り無理なので(少なくとも、現実的ではないので)、

EXCELのように、編集画面ながら、表示モードでは\#,###、編集モードでは"\"と","なし、
のように切り替えられたらなあと思った次第でしたが簡単には無理なのですね。。。残念です。


[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90038 ] / ▼[ 90058 ]
■90045 / 3階層)  Re[3]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ WebSurfer (1740回)-(2019/02/01(Fri) 10:47:57)
No90038 (ジョディー さん) に返信

引用は必要最小限にとどめてください。見難くなるので。

> EXCELのように、編集画面ながら、表示モードでは\#,###、編集モードでは"\"と","なし、
> のように切り替えられたらなあと思った次第でしたが簡単には無理なのですね。。。残念です。

Excel と同じようにはできません。(JavaScript 等を使っていろいろ細工したら分かりませ
んが)

ASP.NET MVC は、ブラウザと Web サーバーとの間で HTTP 通信を行う Web アプリで、全てを
ユーザーの PC 内で処理する excel などのアプリとは違うということは認識してますか?

なので、前のレスで書いたように、

(1) DisplayFor 等を使った表示の場合のみ書式設定を行い、

(2) 編集操作に入ってテキストボックスに値を表示する場合は書式設定しない(または、"{0:F0}"
  などの書式設定に留め、数字として不正な文字は表示されないようにする)。

・・・とするのが現実的なところと思います。

スキャフォールディング機能を使って CRUD 可能なアプリを作ると Index (一覧表示), Create,
Delete, Edit, Details というアクションメソッドとそれに対応するビューができますが、上記
(1) が Index, Delete, Details で、上記 (2) が Create, Edit とするということです。


もっと Excel に近くしたいということであれば、ASP.NET MVC ではなく、ASP.NET Web Forms
アプリの GridView か LIstView を使ってはいかが?

GridView で以下の画像(画像を直接貼れないので URL を書いておきます)ようにできます。
2 行目は[編集]ボタンをクリックして編集モードにした行ですが、違いを見てください。

http://surferonwww.info/BlogEngine/image.axd?picture=2019%2f1%2fGridViewFormatted.jpg

[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90045 ] / ▼[ 90059 ]
■90058 / 4階層)  Re[4]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ ジョディー (4回)-(2019/02/01(Fri) 18:15:26)
No90045 (WebSurfer さん) に返信
> ■No90038 (ジョディー さん) に返信

> Excel と同じようにはできません。(JavaScript 等を使っていろいろ細工したら分かりませ
> んが)

やはり、JavaScriptになりますよね。

> もっと Excel に近くしたいということであれば、ASP.NET MVC ではなく、ASP.NET Web Forms
> アプリの GridView か LIstView を使ってはいかが?

GridViewもListViewも連表形式で、単票カード式にできないと思い、避けていました。
ご紹介頂いたサンプル画面のように、表示モードと編集モードで書式が変わる方法を期待しておりましたが、別の方法を考えてみます。
お忙しいところ、ご指導ありがとうございました。
解決済み
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90058 ] / ▼[ 90083 ]
■90059 / 5階層)  Re[5]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ WebSurfer (1744回)-(2019/02/01(Fri) 18:31:35)
No90058 (ジョディー さん) に返信

> やはり、JavaScriptになりますよね。

その言葉を聞くと、思い違いをしているように思えますけど?

JavaScript で対応できる方法があれば、教えていただきたいです。
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90059 ] / ▼[ 90085 ]
■90083 / 6階層)  Re[6]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ ジョディー (5回)-(2019/02/06(Wed) 23:52:56)
No90059 (WebSurfer さん) に返信
> ■No90058 (ジョディー さん) に返信
>
> JavaScript で対応できる方法があれば、教えていただきたいです。

WebSurfer様、お世話になっております。

こちらのサイトで、javascript でのカンマ区切り表示の方法を発見しました。
https://webllica.com/add-comma-as-thousands-separator/
この方法により、ブラウザに表示されたとき、window.onload、フォーカスアウト(Blur)つまり表示のときは、
3桁カンマ区切り表示になり、フォーカスイン(focus)のときは、カンマなしで入力ができるようになりました。

ですが、ここで新たな問題が発生しております。
submit、Form送信の際に、カンマ区切りを除去して、サーバに送信しなくてはいけないのですが、
検証でひっかかってしまって、送信できない状況に陥っております。

そこで、下記のページを発見したのですが、解決に至っておりません。。。
http://oboe2uran.hatenablog.com/entry/2014/07/04/120126

具体的な適用方法がわからず困っております。(カテゴリを変更して新規に質問登録した方がよろしいでしょうか?)


[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90083 ] / ▼[ 90092 ] ▼[ 90093 ]
■90085 / 7階層)  Re[7]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ WebSurfer (1745回)-(2019/02/07(Thu) 11:22:26)
No90083 (ジョディー さん) に返信

> そこで、下記のページを発見したのですが、解決に至っておりません。。。
> http://oboe2uran.hatenablog.com/entry/2014/07/04/120126

記事は詳しくは読んでませんが、submit する直前に input 要素の value 属性の値を、例えば
\1,000 から 1000 に書き換えるということでしょうか?

で、解決に至らないということは具体的にどういうことか書いてないので分かりませんが(質問
するならその辺はきちんと書いてくださいね)、たぶん、書き換える前に ASP.NET MVC に実装さ
れているクライアントサイドでの検証がかかってしまうのが問題なのではないかと想像してます。

その想像が当たっているとすると、自分が思いつく手段は:

(1) 書き換えのために質問者さんが追加したスクリプトの動作と、ASP.NET MVC のスクリプトの
  動作に整合が取れるように、どちらかもしくは両方のスクリプトを書き直して対応できない
  か検討する。

  ただし、そもそも書き直すことで課題に対応できるかどうかは自分は分かりません。質問者
  さんが検討して可能であると判断されたらその方向に進んでみてはいかが。

(2) クライアント側での検証を無効にする。価格以外の入力もあるでしょうから、これは現実的
  ではないとは思いますが。

(3) 先のレスで述べたように、decimal 型ではなく string 型として扱い、検証はデータアノテ
  ーション属性を付与して正規表現で行なう。

・・・ぐらいです。

自分がやるとすると (3) かなぁ・・・という感じです。

(深く考えてませんので、あくまで「感じ」です。先にも書きましたが、DB のフィールドの型が
money 型でしょうから、サーバー側での取り扱いを考えると現実的ではないかもしれません)
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90085 ] / 返信無し
■90092 / 8階層)  Re[8]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ ジョディー (6回)-(2019/02/07(Thu) 23:07:10)
No90085 (WebSurfer さん) に返信
> ■No90083 (ジョディー さん) に返信
>
> 記事は詳しくは読んでませんが、submit する直前に input 要素の value 属性の値を、例えば
> \1,000 から 1000 に書き換えるということでしょうか?
>
> で、解決に至らないということは具体的にどういうことか書いてないので分かりませんが(質問
> するならその辺はきちんと書いてくださいね)、たぶん、書き換える前に ASP.NET MVC に実装さ
> れているクライアントサイドでの検証がかかってしまうのが問題なのではないかと想像してます。

WebSurfer様、早速のご回答ありがとうございます。
ご推察の通り、検証にかかってしまうのです。
クライアントサイドだと思うのですが、確証が持てず、またスクリプトの作りこみが悪いためかのかもしれず、
切り分けにも知識不足のため、具体的な事象として記載することを見送っておりました。
javascriptも初めてなので苦労しております。

ご提案いただいた(1)で実現できるよう、簡素化したアプリを作って、問題点を確認してみます。
アプリができましたら、生のソースコードを掲載致したいと存じます。
ご迷惑をおかけいたしますが、引き続きご指導お願いします。
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90085 ] / ▼[ 90095 ]
■90093 / 8階層)  Re[8]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ ジョディー (7回)-(2019/02/08(Fri) 02:29:25)
No90085 (WebSurfer さん) に返信
まずは、以下の通り、3桁区切りの表示はできるようになりましたが
検証にひっかかってしまい、submit(From送信)できません。


■Model: Part.cs
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace Contract.Models
{
    public class Part
    {
        public int ID { get; set; }

        [StringLength(50)]
        public string Name { get; set; }

        [Column("money")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }
    }
}

■Context: PartContext.cs
using System.Data.Entity;

namespace Contract.Models
{
    public class PartContext : DbContext
    {
        public PartContext() : base("PartContext")
        {
        }
        public DbSet<Part> Parts { get; set; }
    }
}

■Contorollers:PartController.cs
using Contract.Models;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;

namespace Contract.Controllers
{
    public class PartController : Controller
    {
        private PartContext db = new PartContext();

        // GET: Part
        public ActionResult Index()
        {
            return View(db.Parts.ToList());
        }

        //省略 GET: Part/Details/5

        //省略 GET: Part/Create

        //省略 POST: Part/Create

        // POST: Part/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "ID,Name,Price")] Part part)
        {
            if (ModelState.IsValid)
            {
                db.Entry(part).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(part);
        }

        //省略 GET: Part/Delete/5

        //省略 POST: Part/Delete/5

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

■View: _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <script src="~/Scripts/myScript.js"></script>
</body>
</html>

■View: Edit.cshtml
@model Contract.Models.Part
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ID)

        <div class="form-group">
            @Html.LabelFor(model => model.Name)
            <div>
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Price)
            <div>
                @Html.EditorFor(model => model.Price,"{0:c}", new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Price, "数値にしてください", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div>
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

■Scripts:myScript.js (準拠 https://webllica.com/add-comma-as-thousands-separator/)

//**** 画面表示完了後に、契約金額の表示をコンマ区切りとする ****
window.onload = function () {
    elm.value = addFigure(document.getElementById("Price").value);
};

// * 数値の3桁カンマ区切り
// * 入力値をカンマ区切りにして返却
// * [引数]   numVal: 入力数値
// * [返却値] String(): カンマ区切りされた文字列
// */
function addFigure(numVal) {
    // 空の場合そのまま返却
    if (numVal === '') {
        return '';
    }
    // 全角から半角へ変換し、既にカンマが入力されていたら事前に削除
    numVal = toHalfWidth(numVal).replace(/,/g, "").trim();
    // 数値でなければそのまま返却
    if (!/^[+|-]?(\d*)(\.\d+)?$/.test(numVal)) {
        return numVal;
    }
    // 整数部分と小数部分に分割
    var numData = numVal.toString().split('.');
    // 整数部分を3桁カンマ区切りへ
    numData[0] = Number(numData[0]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    // 小数部分と結合して返却
    return numData.join('.');
}

///**
// * カンマ外し
// * 入力値のカンマを取り除いて返却
// * [引数]   strVal: 半角でカンマ区切りされた数値
// * [返却値] String(): カンマを削除した数値
// */
function delFigure(strVal) {
    return strVal.replace(/,/g, "");
}

///**
// * 全角から半角への変換関数
// * 入力値の英数記号を半角変換して返却
// * [引数]   strVal: 入力値
// * [返却値] String(): 半角変換された文字列
// */
function toHalfWidth(strVal) {
    // 半角変換
    var halfVal = strVal.replace(/[!-〜]/g,
        function (tmpStr) {
            // 文字コードをシフト
            return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
        });
    return halfVal;
}

///**
// * 処理を適用するテキストボックスへのイベント設定
// * Blur : カンマ区切り処理実施
// * Focus : カンマ削除処理実施
// */
var elm = document.getElementById('Price');

elm.addEventListener('blur',
    function () {
        this.value = addFigure(this.value);
    }, false);

elm.addEventListener('focus',
    function () {
        this.value = delFigure(this.value);
    }, false);


[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90093 ] / ▼[ 90103 ]
■90095 / 9階層)  Re[9]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ WebSurfer (1747回)-(2019/02/08(Fri) 12:20:25)
No90093 (ジョディー さん) に返信

質問者さんが No90083 で書いた、

> そこで、下記のページを発見したのですが、解決に至っておりません。。。
> http://oboe2uran.hatenablog.com/entry/2014/07/04/120126

・・・ No90093 のコードには含まれてなくて、ユーザーが価格テキストボックスに、例え
ば 1000 と入力すると \1,000 に書き換えるスクリプトまでしか実装されてないように見
えますが違いますか?

で、今の問題は、\1,000 に書き換えられてしまうので、クライアント側の検証に引っか
かっているということですか?

「下記のページを発見」のスクリプトは実装してない(できない?)とすると、その先に
は進めないと思いますけど。

実装できないのであれば、諦めて私が No90085 で書いた (2), (3) など別の方向に進むし
かなさそうだと思います。

「下記のページを発見」のスクリプトが実装できたとしても(即ち、submit する直前に
input 要素の value 属性の値を、例えば \1,000 から 1000 に書き換えることができた
としても)、書き換える前に ASP.NET MVC に実装されているクライアントサイドでの検
証がかかってしまうのではないかと思います。(onchange で検証がかかるはずなので)

そうすると、私が No90085 で書いた (1) に戻って、質問者さんが追加したスクリプトの
動作と、ASP.NET MVC のスクリプトの動作に整合が取れるように、どちらかもしくは両方
のスクリプトを書き直して対応できないか検討する・・・という話になると思います。

ASP.NET MVC のスクリプトというのは、質問者さんのコードの View にある、

@Scripts.Render("~/bundles/jqueryval")

でレンダリングされる 2 つの jQuery のスクリプトファイルにありますが、2 つ合わせ
て 1,600 行を超えます。

自分はそれを見て考える気はおきません。だから No90085 で、

> ただし、そもそも書き直すことで課題に対応できるかどうかは自分は分かりません。質問者
> さんが検討して可能であると判断されたらその方向に進んでみてはいかが。

> 自分がやるとすると (3) かなぁ・・・という感じです。

・・・と書きました。
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90095 ] / ▼[ 90123 ]
■90103 / 10階層)  Re[10]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ ジョディー (8回)-(2019/02/08(Fri) 21:02:34)
No90095 (WebSurfer さん) に返信
> ■No90093 (ジョディー さん) に返信

いつもありがとうございます。

> ・・・ No90093 のコードには含まれてなくて、ユーザーが価格テキストボックスに、例え
> ば 1000 と入力すると \1,000 に書き換えるスクリプトまでしか実装されてないように見
> えますが違いますか?
>
> で、今の問題は、\1,000 に書き換えられてしまうので、クライアント側の検証に引っか
> かっているということですか?

おっしゃるとおりです。

>
> 実装できないのであれば、諦めて私が No90085 で書いた (2), (3) など別の方向に進むし
> かなさそうだと思います。
>
> 「下記のページを発見」のスクリプトが実装できたとしても(即ち、submit する直前に
> input 要素の value 属性の値を、例えば \1,000 から 1000 に書き換えることができた
> としても)、書き換える前に ASP.NET MVC に実装されているクライアントサイドでの検
> 証がかかってしまうのではないかと思います。(onchange で検証がかかるはずなので)
>

>>自分がやるとすると (3) かなぁ・・・という感じです。

ありがとうございます。
やはりクライアントサイドの検証にひっかかってる感じですよね?
まだまだ勉強中の身ですので、頑張ってみます。

ここからは、時間がかかりそうですので、ひとまず、解決済と致します。

大変ご親切にご指導頂き、ありがとうございました。
解決済み
[ 親 90016 / □ Tree ] 返信 編集キー/

▲[ 90103 ] / 返信無し
■90123 / 11階層)  Re[11]: TextBoxForでHttppost時の通貨書式→数値変換
□投稿者/ WebSurfer (1758回)-(2019/02/10(Sun) 16:07:56)
Terateil のスレッドでこの先の話に進展がありますので興味のある方は見てください。スレッド、
URL は以下の通りです。

3桁コンマ区切り数字をコンマ無しでFrom送信したい
https://teratail.com/questions/173554
解決済み
[ 親 90016 / □ Tree ] 返信 編集キー/


管理者用

- Child Tree -