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