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

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

解决问题的最佳和最干净的方法是开发一个显示/编辑模板。 下面是一篇关于它的好文章：

---

我承认这比我想象的要难。我仍然不确定这是否是最好的方法，但它是有效的

我定义了一个超级简单的模型：

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 mvcapapplication1.Models.MyModel
@{ViewBag.Title=“Index”；}
@DisplayFor（m=>m.MyDouble）


@使用（Html.BeginForm（“索引”、“主页”））
{
@EditorFor（m=>m.MyDouble）
}
函数分数_变化（hiddenFieldId、数值、分母）{
var numeratorValue=document.getElementById（numeratorId）.value；
var denominorvalue=document.getElementById（denominorId）.value；
var hiddenField=document.getElementById（hiddenFieldId）；
hiddenField.value=数值/分母值；
}

您将在一分钟内了解上述Javascript代码

显示模板也很简单。我刚刚用（By）将双精度值转换成分数

正如您所知，模板（部分视图）应该放在“视图”文件夹下的“DisplayTemplates”和“EditorTemplates”文件夹中。我更喜欢将它们放在“视图\共享”中，这样所有其他视图都可以使用它

Fraction.cshtml（\Views\Shared**DisplayTemplates\Fraction.cshtml**）

@使用Mehroz//分数类存在于Mehroz命名空间中
@继承System.Web.Mvc.WebViewPage
@{
分数=新分数（模型）；
}
@分数。分子/@分数。分母

现在让我们看一看棘手的部分，即编辑模板

下面是Fraction.cshtml（\Views\Shared**EditorTemplates\Fraction.cshtml**）

@使用Mehroz
@继承System.Web.Mvc.WebViewPage
@{
分数=新分数（模型）；
字符串numeratorStr=分数.Numerator.ToString（）；
字符串分母tr=分数.分母.ToString（）；
字符串unifier=Guid.NewGuid（）.ToString（）.Replace（“-”，“"”）；
string hiddenFieldElementId=string.Format（“hiddenField{0}”，unifier）；
string NumeratorRelementId=string.Format（“分子{0}”，unifier）；
string denominorelementid=string.Format（“分母{0}”，unifier）；
字符串onchangingFunctionSyntax=
格式（“分数_变化（'{0}'，'{1}'，'{2}'）”，
hiddenFieldElementId，
NumeratorRelementId，
分母元素）；
}
@HiddenFor（m=>m，new{id=hiddenFieldElementId}）
@文本框（“分子”，分子tr，
新的{id=numeratorementid，onchange=onchangingFunctionSyntax}）/
@文本框（“分母”，分母TR，
新的{id=denominorelementid，onchange=onchangingFunctionSyntax}）

此模板的真正作用是：

将双精度值（其模型）转换为分数实例

在单独的文本输入中显示分数的分子和分母值

重新计算双精度值（通过Javascript）

由于Javascript代码需要唯一Id才能通过

document.getElementById（Id）

获取元素，因此我们的编辑模板必须为相关元素生成这些唯一Id

---

您可以在此处下载代码：

您是如何尝试写出它们的？如何将它们写出到视图并读回服务器是我要问的问题。我有一个分数类，我可以从中编写一个字符串来将它们放入视图中，但是读回它们却不那么清楚。您是否尝试过@Html.Raw（Model.Field）或@Model.Field？这并不是因为我认为不让模型绑定器完成工作被认为是一种糟糕的做法。好吧，至少它是有效的。一旦你找到更好的方法，你可以在以后替换它，但不考虑模型绑定。如果您在输入中进行更改并将其发回，它是否正确地将值绑定回一个double？我必须承认，这肯定比我使用App_代码助手将其从我的分数函数中放入一个字符串，并给它一个适当的名称，id。。。。然后编写了一个自定义模型绑定器来截取DefaultModelBinder并填充分数无法绑定的空白。@PITaylor-它在我的笔记本电脑上工作（Win 7、ASP.NET 4、MVC 3、VS2012 SP1）。然后自己测试。@PlTaylor-顺便说一句，如果您有可能更改模型，我强烈建议为您的模型使用

Fraction

类型的属性，让这种痛苦消失吧！我总是害怕将我的.Net web应用程序的一部分依赖于一段Javascript

@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>

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

@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 })