我正在学习 MVC3 并构建一个小的“待办事项”网站作为学习练习,所以我对我完全走错路的想法持开放态度!
无论如何,我有一个与常规回发完美配合的页面。我正在尝试使用 jQuery 和 UnobtrusiveAjax 对其进行 Ajax 处理,并且一切在技术上仍然正常工作(数据被传递到控制器并保存在我的数据库中)。问题是在我替换的元素中,每个表单的字段都填充了我刚刚在一个表单上传递的值。
索引.cshtml
@model WebUI.Models.HomeViewModel
@{
ViewBag.Title = "Index";
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
}
<h2>My Goals</h2>
...snip...
<div id="goal_div">
@foreach (var goal in Model.Goals)
{
Html.RenderPartial("GoalDetail", goal);
}
</div>
目标细节.cshtml
@model Domain.Entities.Goal
<div class="goal" id='goal_id@(Model.ID)'>
<h4>@Model.Name</h4>
<p>@DateTime.Now.ToString()</p>
<p class="goal_description">@Model.Progress % complete</p>
<ul>
@foreach (var task in Model.Tasks)
{
using (Ajax.BeginForm("UpdateTask", "Home", new AjaxOptions { UpdateTargetId = "goal_id" + Model.ID }))
{
@Html.HiddenFor(g => g.ID)
@Html.Hidden("TaskID", task.ID)
<li class="task">
@Html.CheckBox("IsComplete", task.IsComplete)
@Html.TextBox("TaskName", task.Name)
@task.Name
<input class="actionButtons" type="submit" value="Update task" />
</li>
}
}
<li>
@using (Html.BeginForm("AddTask", "Home"))
{
@Html.HiddenFor(g => g.ID)
@Html.Editor("TaskName")
<input class="actionButtons" type="submit" value="Add task" />
}
</li>
</ul>
</div>
家庭控制器.cs
public class HomeController : Controller
{
private IGoalRepository Repository;
public HomeController(IGoalRepository repo)
{
Repository = repo;
}
public ViewResult Index()
{
HomeViewModel viewModel = new HomeViewModel();
viewModel.Goals = Repository.Goals;
return View(viewModel);
}
public ActionResult AddTask(int ID, string TaskName)
{
bool success = Repository.SaveTask(ID, 0, TaskName, DateTime.Today, false);
return RedirectToAction("Index");
}
public ActionResult UpdateTask(int ID, int TaskID, bool IsComplete, string TaskName)
{
bool success = Repository.SaveTask(ID, TaskID, TaskName, DateTime.Today, IsComplete);
Goal updatedGoal = Repository.Goals.FirstOrDefault(g => g.ID == ID);
return PartialView("GoalDetail", updatedGoal);
}
public ActionResult AddGoal(string Name, DateTime Enddate)
{
bool success = Repository.SaveGoal(0, Name, DateTime.Today, Enddate);
return RedirectToAction("Index");
}
public ActionResult UpdateGoal(int GoalID, string Name, DateTime Enddate)
{
bool success = Repository.SaveGoal(GoalID, Name, DateTime.Today, Enddate);
return RedirectToAction("Index");
}
}
我有时间只是为了确保 AJAX 刷新确实发生了,你会明白为什么我有两次任务名称。
这是我第一次加载页面时看到的:
然后我选中第一个目标的第二个任务的复选框,将其重命名为“更新任务#2”,然后单击更新按钮。这就是发生这种情况的时候:
看到不属于表单的任务名称都是正确的(暂时忽略重新排序),并且进度值已正确更新(它只需要完成的任务并除以任务总数),我有不知道为什么所有的表单值都被替换了。甚至 AddTask 表单也已填写,尽管我还没有更改该表单以使用 Ajax。这两天我一直在寻找原因,结果一无所获。