0

我正在尝试在 MVC 应用程序中显示和编辑分数。以前在 WPF 中，我使用转换器的概念来获取双精度并将其格式化为用户的分数，然后获取用户输入并将其转换回分数。在 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 代码。

显示模板也很简单。我刚刚使用Fraction 类（由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 })

这个模板真正做的是：

  1. 将 double 值（其模型）转换为 Fraction 的实例。
  2. 在单独的文本输入中显示分数的分子和分母值。
  3. 重新计算双精度值（通过 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 回答