C# · 2月 16, 2022

c# – MVC3 – 局部视图中的多个Ajax表单在刷新时都填充了相同的数据

我正在学习MVC3并建立一个小小的“待办事项”网站作为学习练习,所以我很开心我只是走错了路!

无论如何,我有一个页面与常规回发完美配合.我正在尝试使用jQuery和UnobtrusiveAjax来进行Ajax,并且所有技术都可以正常工作(数据传递给控制器​​并保存在我的数据库中).问题是在我替换的元素中,每个表单的字段都填充了我刚刚在一个表单上传递的值.

Index.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>

GoalDetail.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.Check@R_628_2419@(“IsComplete”,task.IsComplete) @Html.Text@R_628_2419@(“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>

HomeController.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,TaskName,DateTime.Today,false); return RedirectToAction(“Index”); } public ActionResult UpdateTask(int ID,int TaskID,bool IsComplete,TaskID,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,Enddate); return RedirectToAction(“Index”); } public ActionResult UpdateGoal(int GoalID,string Name,DateTime Enddate) { bool success = Repository.SaveGoal(GoalID,Enddate); return RedirectToAction(“Index”); }}

我有时间只是为了确保实际发生了AJAX刷新,你会明白为什么我有两次任务名称.

这是我第一次加载页面时看到的内容:

然后我检查第一个目标的第二个任务的复选框,将其重命名为“Updated Task#2”,然后单击更新按钮.就在这发生的时候:

看到任务名称不是表单的一部分都是正确的(忽略现在的重新排序),并且进度值已经正确更新(它只需要完成的任务并除以任务总数),我有不知道为什么所有的表格值都被替换了.甚至AddTask表单也已填写,即使我还没有改变那个使用Ajax.我一直在寻找2天的原因,并且已经空了.

解决方法 经过更多的搜索,我终于发现了这个问题.基本上,它与ModelState在MVC中的工作方式有关.阅读 this help thread和 this article真的帮助我了解我的页面发生了什么.我最终在返回局部视图之前在我的控制器中调用ModelState.Clear(),但是 this SO question and answer 提出另一种方法.