更好的方式来显示月份日历的模型并与用户交互
Pav*_*lev 5 javascript c# ajax asp.net-mvc asp.net-mvc-3
我解决了我的任务,但我不喜欢它的工作原理.它对我来说太沉重了.如果你可以建议我一个更好的方法来做同样的事情那就太棒了!
所以这是我的痛苦:)我在SQL DB中有一个表,其中包含业务数据的图表,它们由单独的部门开发,他们随机添加它们(至少从我的角度来看).年份范围是1995-2012(3),但这两个日期应该是灵活的,因为每个月都会出现新数据,他们会尝试为过去添加更多数据.
现在它看起来像这样:
为了实现这个目标,我创建了这个模型:
using System;
using System.Collections.Generic;
namespace MvcApplication1.Models
{
[Serializable]
public class MonthlyModel
{
public int TypeId { get; set; }
public List<YearDTO> Items { get; set; }
}
[Serializable]
public class YearDTO
{
public DateTime Year { get; set; }
public MonthDTO January { get; set; }
public MonthDTO February { get; set; }
public MonthDTO March { get; set; }
public MonthDTO April { get; set; }
public MonthDTO May { get; set; }
public MonthDTO June { get; set; }
public MonthDTO July { get; set; }
public MonthDTO August { get; set; }
public MonthDTO September { get; set; }
public MonthDTO October { get; set; }
public MonthDTO November { get; set; }
public MonthDTO December { get; set; }
}
[Serializable]
public class MonthDTO
{
public DateTime start { get; set; }
public DateTime end { get; set; }
public int priceTypeId { get; set; }
public bool IsEnabled { get; set; }
public bool IsSelected { get; set; }
}
}
这里是Controller,其中包含GetMethod以显示上面显示的View和Post方法以使此模型重新解析它并创建其他视图与图表.
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using MvcApplication1.Models;
namespace MvcApplication1.Controllers
{
public class HistoricalController : Controller
{
[HttpGet]
public ActionResult Monthly()
{
int typeId = -1;
try
{
typeId = Convert.ToInt32(RouteData.Values["id"]);
}
catch (Exception)
{
}
MonthlyModel mm;
if (Session[String.Format("MonthlySelect{0}", typeId)] != null)
{
mm = (MonthlyModel)Session[String.Format("MonthlySelect{0}", typeId)];
}
else
{
mm = GetMonthlyModel(typeId);
}
return View(mm);
}
private MonthlyModel GetMonthlyModel(int typeId)
{
MonthlyModel mm = new MonthlyModel();
var list = ChartManager.GetAvailableMonthlyCharts(typeId, 1, 3, new DateTime(1995, 1, 1), DateTime.Today);
foreach (Tuple<DateTime, DateTime, bool, int> val in list)
{
var start = val.Item1;
var end = val.Item2;
var exists = val.Item3;
var pti = val.Item4;
var items = mm.Items ?? (mm.Items = new List<YearDTO>());
int idx = items.FindIndex(f => f.Year.Year == start.Year);
if (idx == -1)
{
items.Add(new YearDTO { Year = new DateTime(start.Year, 1, 1) });
idx = items.FindIndex(f => f.Year.Year == start.Year);
}
switch (start.Month)
{
case 1:
items[idx].January = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 2:
items[idx].February = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 3:
items[idx].March = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 4:
items[idx].April = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 5:
items[idx].May = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 6:
items[idx].June = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 7:
items[idx].July = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 8:
items[idx].August = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 9:
items[idx].September = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 10:
items[idx].October = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 11:
items[idx].November = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
case 12:
items[idx].December = new MonthDTO { start = start, end = end, priceTypeId = pti, IsEnabled = exists, IsSelected = false };
break;
}
}
mm.metalId = typeId;
return mm;
}
[HttpPost]
public ActionResult MonthlyCharts(MonthlyModel model)
{
List<ChartDTO> list = new List<ChartDTO>();
foreach (YearDTO dto in model.Items)
{
var val = dto.January;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.February;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.March;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.April;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.May;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.June;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.July;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.August;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.September;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.October;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.November;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
val = dto.December;
if (val.IsSelected) list.Add(ChartManager.GetChart(val.start, val.end, model.metalId, 1, val.priceTypeId));
}
Session[String.Format("MonthlySelect{0}", model.metalId)] = model;
ModelState.Clear();
return View(list);
}
}
}
最后一部分实际上是一个表示此复选框字段的视图:
@model MvcApplication1.Models.MonthlyModel
@{
ViewBag.Title = "Monthly charts ";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>@(ViewBag.Title)</h2>
<div id="choice-container">
@using (Html.BeginForm("MonthlyCharts", "Historical", FormMethod.Post))
{
@Html.TextBox("metalId", Model.metalId, new { @type = "hidden" })
<table>
<tr>
<th> Year</th>
<th> January</th>
<th> February</th>
<th> March</th>
<th> April</th>
<th> May</th>
<th> June</th>
<th> July</th>
<th> August</th>
<th> September</th>
<th> October</th>
<th> November</th>
<th> December</th>
<th> </th>
</tr>
@for (int i = 0; i < Model.Items.Count(); i++)
{
<tr>
<td>
@Html.Label("Items[" + i + "].Year", Model.Items[i].Year.ToString(@"yyyy"))
@Html.TextBox("Items[" + i + "].Year", Model.Items[i].Year, new { @type = "hidden" })
</td>
<td>
<div align=center class="editor-field">
@if (Model.Items[i].January.IsEnabled)
{
@Html.CheckBox("Items[" + i + "].January.IsSelected", Model.Items[i].January.IsSelected, new { @class = "chk" })
}
else
{
@Html.CheckBox("Items[" + i + "].January.IsSelected", Model.Items[i].January.IsSelected, new { @disabled = "disabled" })
}
@Html.TextBox("Items[" + i + "].January.IsEnabled", Model.Items[i].January.IsEnabled, new { @type = "hidden" })
@Html.TextBox("Items[" + i + "].January.start", Model.Items[i].January.start, new { @type = "hidden" })
@Html.TextBox("Items[" + i + "].January.end", Model.Items[i].January.end, new { @type = "hidden" })
@Html.TextBox("Items[" + i + "].January.priceTypeId", Model.Items[i].January.priceTypeId, new { @type = "hidden" })
</div>
</td>
@*
.... 11 times ....
*@
</tr>
}
</table>
<input type="submit" class="button" value="Get the image"/>
}
</div>
因此,如果我们有图表,用户只能选择几年中的几个月.年份范围可能在未来发生变化.我们必须在单独的页面上显示图表.如果用户决定返回并选择几个月,我们必须记住模型(我保持会话).
所以我不喜欢这个解决方案:1.模型很重,难以使用,无法创建和解析.添加新参数并不容易.2.由于模型3,视图包含许多隐藏字段.除了创建和解析模型之外,控制器是可以的.
我对于web开发人员来说是新手,但我不是软件开发的新手,我希望它看起来更好,如果可能的话.
我真的觉得我在这里错过了一些东西.我感谢您的想法,建议和任何可以简化此代码的内容.谢谢!
更新:
我想澄清为什么我使用这么多参数.我不能只使用一个DateTime,因为每个图表都有DateTime和end DateTime(开始和月末)和TypeId.此外,我需要以某种方式在视图中构建表并将每个控件放在正确的位置.现在我为了这个目的使用了几个月的名字.我还需要知道在View端启用了控件(如果用户可以选择它)然后在POST方法中我需要知道它们中的哪一个被选中所以我有bool IsEnabled {get; 组; }和bool IsSelected {get; 组; 和其他参数.
通过不指定每个单独的月份，您可以简化很多事情。该DateTime对象可以解决这个问题。如非必要，请勿重复
然后您的视图可以简化为使用一些循环而不是 12 个单独的块。该th块还可以通过循环并输出月份来简化，如下所示：
new DateTime(2010, 8, 1).ToString("MMM", CultureInfo.InvariantCulture);
我不确定为什么您将所有值放入隐藏字段中，特别是当回发数据不需要它们时。无论如何，所有这些信息都应该存储在服务器端，因此应该有方法将其从数据模型中提取出来。
此外，Post处理程序不需要使用完全相同的模型。每个复选框都可以定义为<input type='checkbox' name='chart' value='2012-01-01' />。处理程序Post会接受类似的内容List<string>，您只需将收到的值转换为DateTime并检索图表
| 归档时间： |
|
| 查看次数： |
782 次 |
| 最近记录： |