我正在尝试在 MVC 应用程序中显示和编辑分数。以前在 WPF 中,我使用转换器的概念来获取双精度并将其格式化为用户的分数,然后获取用户输入并将其转换回分数。在 Razor 视图中执行此操作的最佳方法是什么?
2 回答
我承认这比我想象的要难。我仍然不确定这是否是最好的方法,但它确实有效。
我定义了一个超级简单的模型:
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 })
这个模板真正做的是:
- 将 double 值(其模型)转换为 Fraction 的实例。
- 在单独的文本输入中显示分数的分子和分母值。
- 重新计算双精度值(通过 Javascript)
因为 Javascript 代码需要唯一的 ID 来获取元素document.getElementById(id)
,所以我们的编辑模板必须为相关元素生成这些唯一的 ID。
你可以在这里下载代码:http: //sdrv.ms/MlyDI2
解决您的问题的最佳和最简洁的方法是开发一个显示/编辑模板。这是一篇关于它的好文章: