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

2024年1月17日 200次阅读

我正在学习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.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刷新,你会明白为什么我有两次任务名称.

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

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

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

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

提出另一种方法.

点赞