我正在尝试在日历视图中的每一天添加一个简单的复选框功能。它必须与当前日历的样式内联，并且当选择bool时，它必须能够将更改保存到数据库。任何建议将不胜感激。
目前我的主要问题是正在选择的复选框未保存到数据库。
Controller.cs
public class Calendar
{
int _year;
int _month;
DateTime _selectedDate;
string _viewFile = "";
ViewDataDictionary _viewData = new ViewDataDictionary();
Func<DateTime, bool, string> _onDayRenderFunc = null;
public Calendar()
{
SetDate(DateTime.Now.Year, DateTime.Now.Month);
}
public void SetDate(int year, int month)
{
_year = year;
_month = month;
_selectedDate = new DateTime(_year, _month, 1);
}
public void SetDate(int year, int month, int day)
{
_year = year;
_month = month;
_selectedDate = new DateTime(_year, _month, day);
}
public DateTime Date
{
get
{
return _selectedDate;
}
}
public void OnDayRender(Func<DateTime, bool, string> func)
{
_onDayRenderFunc = func;
}
public void View(string viewFile)
{
_viewFile = viewFile;
}
public ViewDataDictionary ViewData
{
get
{
return _viewData;
}
}
public string Render()
{
string[] dayNames = { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };
int daysInMonth = DateTime.DaysInMonth(_year, _month);
int pYear = _year;
int pMonth = _month;
if ((_month - 1) < 1)
{
--pYear;
pMonth = 12;
}
else
{
--pMonth;
}
int daysInPrevMonth = DateTime.DaysInMonth(pYear, pMonth);
DateTime d1 = new DateTime(_year, _month, 1);
int dayPos = (int)d1.DayOfWeek;
daysInPrevMonth -= dayPos - 1;
StringBuilder control = new StringBuilder();
control.Append("<table cellpadding=\"0\" cellspacing=\"0\">\n<thead>\n<tr>\n");
for (int i = 0; i < dayNames.Length; i++)
{
control.Append(string.Format("<th>{0}</th>\n", dayNames[i]));
}
control.Append("</thead>\n<tbody>\n");
int totalDaysInMonth = daysInMonth + dayPos;
int col = 0;
int day = 0;
string cellValue = "";
for (int idx = 0; idx < totalDaysInMonth; idx++)
{
if (col == 0)
{
control.Append("<tr>\n");
}
if (idx >= dayPos)
{
++day;
if (_viewFile == "")
{
cellValue = _onDayRenderFunc != null ? _onDayRenderFunc(new DateTime(_year, _month, day), true) : day.ToString();
}
else
{
ViewData.Model = new CalendarArg() { Date = new DateTime(_year, _month, day), SelectedDate = _selectedDate, CurrentMonth = true };
cellValue = this.Parse(_viewFile);
}
control.Append(string.Format("<td data-day=\"{0}\" data-month=\"{1}\" data-year=\"{2}\">{3}</td>\n", day, _month, _year, cellValue));
}
else
{
if (_viewFile == "")
{
cellValue = _onDayRenderFunc != null ? _onDayRenderFunc(new DateTime(pYear, pMonth, daysInPrevMonth), false) : daysInPrevMonth.ToString();
}
else
{
ViewData.Model = new CalendarArg() { Date = new DateTime(pYear, pMonth, daysInPrevMonth), SelectedDate = _selectedDate, CurrentMonth = false };
cellValue = this.Parse(_viewFile);
}
control.Append(string.Format("<td>{0}</td>\n", cellValue));
++daysInPrevMonth;
}
if (col == 6)
{
control.Append("</tr>\n");
col = 0;
continue;
}
++col;
}
if (col < 7)
{
int nextMonthDay = 1;
for (int c = col; c < 7; c++)
{
if ((_month + 1) > 12)
{
++_year;
_month = 1;
}
else
{
++_month;
}
if (_viewFile == "")
{
cellValue = _onDayRenderFunc != null ? _onDayRenderFunc(new DateTime(_year, _month, nextMonthDay), false) : nextMonthDay.ToString();
}
else
{
ViewData.Model = new CalendarArg() { Date = new DateTime(_year, _month, nextMonthDay), SelectedDate = _selectedDate, CurrentMonth = false };
cellValue = this.Parse(_viewFile);
}
control.Append(string.Format("<td>{0}</td>\n", cellValue));
++nextMonthDay;
}
control.Append("</tr>\n");
}
control.Append("</tbody>\n</table>\n");
return control.ToString();
}
private string Parse(string viewFile)
{
using (var sw = new StringWriter())
{
ControllerContext ctx = new System.Web.Mvc.ControllerContext();
ctx.HttpContext = new HttpContextWrapper(HttpContext.Current);
RazorView view = new RazorView(ctx, viewFile, "", false, null);
TempDataDictionary tdd = new TempDataDictionary();
var viewContext = new ViewContext(ctx, view, ViewData, tdd, sw);
view.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
}
Model.Calendar.cs
public class CalendarArg
{
public DateTime SelectedDate { get; set; }
public DateTime Date { get; set; }
public bool CurrentMonth { get; set; }
public bool CompletionRequested { get; set; }
public DateTime CompletedToday { get; set; }
}
Model.CalendarArg.cs
<style>
table {
width: 100%;
border: 0px;
border-collapse: collapse;
border: 1px solid #EEE;
}
table thead tr th {
font-family: Tahoma;
font-weight: normal;
color: #666;
}
table tbody tr td {
border: 1px solid #EEE;
width: 14%;
}
table tbody tr td .cell1, .cell2 {
min-height: 150px;
height: 100%;
}
table tbody tr td .selected_day h2 {
Color: #FFF;
background-color: #3498DB;
text-shadow: none;
}
table tbody tr td .cell1 {
background-color: #FFF;
}
table tbody tr td .cell1:hover h2 {
box-shadow: 1px 2px 3px #999;
}
table tbody tr td .cell2 {
background-color: #FCFCFC;
}
table tbody tr td .cell2 h2 {
color: #CCC;
}
table tbody tr td h2 {
font-family: Tahoma;
font-size: 20px;
font-weight: normal;
float: right;
margin: 0px;
padding: 6px;
color: #154B67;
background-color: #EEE;
display: block;
width: 25px;
height: 25px;
text-align: center;
text-shadow: 2px 1px #FFF;
}
table tbody tr td .evt {
font-family: Tahoma;
font-size: 12px;
margin: 5px;
padding: 10px;
color: #FFF;
border-radius: 2px;
}
table tbody tr td .clear {
clear: both;
}
.Meeting {
background-color: #DDD;
color: #222 !important;
}
.Personal {
background-color: #3498DB;
}
.Vacation {
background-color: #2ECC71;
}
.Appointment {
background-color: #F5AB35;
}
.Critical {
background-color: #F22613;
}
</style>@Html.Raw(ViewBag.calendar)
View.CalendarIndex.cshtml
@model Project.Models.CalendarArg
@{
CalendarArg calArg = this.Model;
List<Project.Controllers.Event> events = (List<Project.Controllers.Event>)ViewData["events"];
string cssClass = calArg.CurrentMonth == true ? "cell1" : "cell2";
}
@if (calArg.Date.Day == calArg.SelectedDate.Day)
{
cssClass += " selected_day";
}
@if (calArg.Date.Day == calArg.Date.Day)
{
if (DateTime.Now <= calArg.Date)
{
@Html.CheckBoxFor(m => m.CompletionRequested, new { @checked = calArg.CompletionRequested });
}
}
<div class="@cssClass">
<h2>@calArg.Date.Day.ToString()</h2>
<div class="clear"></div>
@foreach (var evt in events)
{
if (evt.EventDate.Date.ToString("yyyyMMdd") == calArg.Date.ToString("yyyyMMdd"))
{
<div class="evt @evt.Type.ToString()">@evt.Title</div>
}
}
</div>
View.Calendar.cshtml
Calendar.cshtl更新
将此行代码添加到@if (calArg.Date.Day == calArg.Date.Day)
{
@Html.CheckBoxFor(m => m.CompletionRequested, new { @checked = calArg.CompletionRequested });
}
：
calendar index令人惊讶地工作，所以我想我想知道如何改变{{1}}中的css样式表，使复选框与日历设计齐平（即与日历内联，而不仅仅是在上面it）以及如何将bool的更改保存到db。
答案 0 :(得分：5)
在foreach循环中有这个：
@Html.CheckBoxFor(m => m.CompletionRequested , new { @checked = evt.CompletionRequested });
更新： 在评论中回答您的问题。对控制器执行HttpPost并传递模型数据。
[HttpPost]
public ActionResult CalendarIndex(CalendarArg model)
{
// Check that model is valid
if(ModelState.IsValid)
{
// CODE here to update Database
return RedirectToAction("Index"); // or where ever you want to go
}
else
{
return View(model); // Return back to View, model is not valid
}
}
更新2：
如果你想添加一个类名，你可以这样做：
@Html.CheckBoxFor(m => m.CompletionRequested , new { @checked = evt.CompletionRequested, @class = "checkbox" });
或者你可以像这样添加css：
input[type="radio"]:checked
{
// css when radio button is selected
}
input[type="radio"]
{
// css when radio button is not selected
}
这些CSS样式是全局的，因此每个带有radio类型的输入元素都会获得样式。
当您想要更改db上下文时，首先需要从上下文中查找当前的更改。然后将true值添加到CompletionRequested属性，然后从您的上下文中调用SaveChanged方法。你的第一个问题是在calendarView上获取复选框，而不是如何保存对db的更改。那是另一个问题。