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

わんくま同盟

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

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

■90093 / 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);


編集キー/

前の記事(元になった記事) 次の記事(この記事の返信)
←Re[7]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer →Re[9]: TextBoxForでHttppost時の通貨書式→数値変換 /WebSurfer
 
上記関連ツリー

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
              └ TextBoxForでHttppost時の通貨書式→数値変換 / ジョディー (19/02/08(Fri) 02:29) #90093 ←Now
                └ 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 解決済み

上記ツリーを一括表示 / 上記ツリーをトピック表示
 
上記の記事へ返信