0

MVC アプリケーションで分数を表示および編集しようとしています。以前の WPF では、コンバーターの概念を使用して double を取得し、それをユーザーの分数としてフォーマットしてから、ユーザーの入力を取得して分数に戻していました。Razorビューでこれを行う最良の方法は何ですか?

4

2 に答える 2

1

思ったより大変だったことを認めます。それが最善の方法であるかどうかはまだわかりませんが、うまくいきます。

私は非常に単純なモデルを定義しました:

public class MyModel
{
    [DataType("Fraction")] //It's important to define DataType
    public double MyDouble { get; set; }
}

ここに私の単純なコントローラーがあります：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        MyModel ViewModel = new MyModel { MyDouble = 0.06 };
        return View(ViewModel);
    }

    [HttpPost]
    public ActionResult Index(MyModel model)
    {
        // Update db.
        // Do what you want to do.
        return View(model);
    }
}

インデックス ビュー (\Views\Home\Index.cshtml):

@model MvcApplication1.Models.MyModel
@{ViewBag.Title = "Index";}

@Html.DisplayFor(m => m.MyDouble)
<br />
@using (Html.BeginForm("Index", "Home"))
{
    @Html.EditorFor(m => m.MyDouble)
    <input type="submit" value="Submit" />
}
<script type="text/javascript">
    function fraction_changing(hiddenFieldId, numeratorId, denominatorId) {
        var numeratorValue = document.getElementById(numeratorId).value;
        var denominatorValue = document.getElementById(denominatorId).value;
        var hiddenField = document.getElementById(hiddenFieldId);
        hiddenField.value = numeratorValue / denominatorValue;
    }
</script>

上記の Javascript コードについては、わずか 1 分でわかります。

表示テンプレートもとても簡単です。Fraction クラス( Syed Mehroz Alamによる) を使用して、double 値を Fraction に変換しました。

ご存知のように、テンプレート (部分ビュー) は、"Views" フォルダーの下の "DisplayTemplates" および "EditorTemplates" フォルダーに配置する必要があります。他のすべてのビューが使用できるように、それらを「Views\Shared\」に配置することを好みます。

Fraction.cshtml (\Views\Shared**DisplayTemplates\Fraction.cshtml**)

@using Mehroz // Fraction class lives in Mehroz namespace
@inherits System.Web.Mvc.WebViewPage<double>
@{
    Fraction fraction = new Fraction(Model);
}
@fraction.Numerator / @fraction.Denominator

ここで、テンプレートの編集というトリッキーな部分を見てみましょう。

ここに Fraction.cshtml があります (\Views\Shared**EditorTemplates\Fraction.cshtml**)

@using Mehroz
@inherits System.Web.Mvc.WebViewPage<double>
@{
    Fraction fraction = new Fraction(Model);
    string numeratorStr = fraction.Numerator.ToString();
    string denominatorStr = fraction.Denominator.ToString();

    string unifier = Guid.NewGuid().ToString().Replace('-', '_');
    string hiddenFieldElementId = string.Format("hiddenField{0}", unifier);
    string numeratorElementId = string.Format("numerator{0}", unifier);
    string denominatorElementId = string.Format("denominator{0}", unifier);
    string onchangingFunctionSyntax = 
        string.Format("fraction_changing('{0}', '{1}', '{2}')", 
                            hiddenFieldElementId, 
                            numeratorElementId, 
                            denominatorElementId);
}

@Html.HiddenFor(m => m, new { id = hiddenFieldElementId })

@Html.TextBox("Numerator", numeratorStr,
                        new { id = numeratorElementId, onchange = onchangingFunctionSyntax })  /
@Html.TextBox("Denominator", denominatorStr,
                        new { id = denominatorElementId, onchange = onchangingFunctionSyntax })

このテンプレートが実際に行うことは次のとおりです。

  1. double 値 (そのモデル) を Fraction のインスタンスに変換します。
  2. 分数の分子と分母の値を個別のテキスト入力で表示します。
  3. double 値の再計算 (Javascript による)

Javascript コードは によって要素を取得するために一意の ID を必要とするため、document.getElementById(id)編集テンプレートは関連する要素に対してこれらの一意の ID を生成する必要があります。

コードはこちらからダウンロードできます: http://sdrv.ms/MlyDI2

于 2012-06-21T18:20:45.180 に答える
0

問題を解決する最善かつ最もクリーンな方法は、表示/編集テンプレートを作成することです。これについての素晴らしい記事は次のとおりです。

DisplayFor と EditorFor をオーバーライドして MVC のカスタム出力を作成する

于 2012-06-21T14:41:09.480 に答える