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

Question

我正在学习 MVC3 并构建一个小的“待办事项”网站作为学习练习，所以我对我完全走错路的想法持开放态度!

无论如何，我有一个页面可以与常规回发完美配合。我正在尝试使用 jQuery 和 UnobtrusiveAjax 对其进行 Ajax 处理，并且一切在技术上仍然正常工作(数据被传递到 Controller 并保存在我的数据库中)。问题是在我替换的元素中，每个表单的字段都填充了我刚刚在一个表单上传递的值。

索引.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>

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, 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。我已经为此寻找了 2 天的原因，但一无所获。

Answer 1

经过多方查找，我终于发现了问题所在。基本上，它与 ModelState 在 MVC 中的工作方式有关。读书this help thread和 this article真的帮助我了解我的页面发生了什么。在返回局部 View 之前，我最终在我的 Controller 中调用了 ModelState.Clear()，但是 this SO question and answer 建议另一种方法。