Question

我正在尝试在MVC应用程序中显示和编辑分数。以前在WPF中我使用converter的概念来获取double并将其格式化为用户的一部分，然后获取用户输入并将其转换回一小部分。在Razor视图中执行此操作的最佳方法是什么？

Answer 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代码。

显示模板也很简单。我刚用Fraction class（按Syed Mehroz Alam）将双值转换为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 })

这个模板真正做的是：

将double值（其模型）转换为Fraction的实例。
在单独的文本输入中显示分数的分子和分母值。
重新计算双值（通过Javascript）

由于Javascript代码需要唯一ID才能通过document.getElementById(id)获取元素，因此我们的编辑模板必须为相关元素生成这些唯一ID。

您可以在此处下载代码：http://sdrv.ms/MlyDI2

Answer 2

解决问题的最佳和最干净的方法是开发显示/编辑模板。这是一篇很好的文章：

Overriding DisplayFor and EditorFor to create custom outputs for MVC

如何在MVC / Razor视图中显示和编辑分数

2 个答案: