0

我正在使用 MVC3、Razor 和 C#。

我已经为网格实现了一个简单而强大的内联编辑解决方案。

基本上，我使用 Razor 构建包含网格的表单，然后将与项目 ID 匹配的行打开为可编辑的行，该行被编码为部分视图。

网格视图（部分）：

@using (Html.BeginForm("Edit", "GridTest"))
{
<table>
<tr>
  <th>col1</th>
  <th>Col2</th>
</tr>
@{
foreach (var item in Model)
{
<tr>
@{
 if ((Model.ItemId == item.Id))
 {
    Html.RenderPartial("_EditRow", item);
 }
 else
 {
    Html.RenderPartial("_DisplayRow", item);
 }
 }
</tr>
}
</table
}

编辑行.cshtml

@Html.TextBoxFor(p=>p.Name) 保存取消 @Html.HiddenFor(p=>p.Id)

显示行.cshtml

<td>
    @Model.Name
</td>
<td>
    @Html.ActionLink("Edit", "Edit", "GridTest", new {id = Model.Id}, null) 
</td>

GridTest/编辑操作

    public ActionResult Edit(int id)
    {

        var myRecord = db.Orders.First(p => p.Id == id);

        return View("Index",myRecord);
    }

GridTest/编辑发布操作

   [HttpPost]
    public ActionResult Edit(Order myRecord, string btn="")
    {
        if (btn == "Save")
        {
            if (ModelState.IsValid)
            {
                Order myCurrentRecord = db.Order.First(p => p.Id == myRecord.Id);
                myCurrentRecord.Name = myRecord.Name;
                db.SaveChanges();

                return RedirectToAction("Index");
            }
            return View(myRecord);
        }
        else
        {
            return RedirectToAction("Index");
        }

上面的代码显示了设计。它工作得很好而且很简单。但是，它会导致整个页面的回发，我想停止这种“浮华”。所以我怀疑我需要以某种方式调整上面的代码，以便“EditRow”内联发布，而不刷新整个页面。我怀疑我正在考虑使用 Ajax？

那么如何简单地升级上面的代码来防止完整的页面刷新，而是行刷新呢？

提前谢谢了。

4

1 回答 1

1

在最简单的情况下，您可能只捕获表单的提交事件并将该表单序列化为 AJAX POST。像这样的东西：

$('form').submit(function () {
    $.post('@Url.Action("Edit", "GridTest")', $('form').serialize())
     .done(function(data) {
         // AJAX call is complete
         // do something on the page?
     });
    return false;
});

这将以与表单相同的方式使用相同的控制器操作，只是通过 AJAX。控制器操作也将以相同的方式响应，这可能不是您想要的 AJAX 请求。相反，您可能希望返回一些 JSON 数据来指示成功、错误条件、服务器端处理的结果等。像这样简单的事情可以仅指示控制器操作的成功：

return Json(true);

当然，您可以通过将任何结构化数据传递给 来返回任何结构化数据Json()，这会将其序列化为 JSON 数据作为dataJavaScriptdone处理程序中的值。

编辑：如果您想用部分视图替换一部分客户端内容批发，您仍然可以在 AJAX 请求中返回该部分视图。控制器动作可以做这样的事情：

return PartialView("_DisplayRow", myRecord);

（假设myRecord是绑定到该局部视图的类型。）

然后，您将done在客户端代码中为处理程序提供一些东西。也许是这样的：

$('tr.someClass').html(data);

这里的想法是，tr作为“编辑行”的元素应该以某种方式唯一标识（我现在在我的选择器中使用一个类，但你可以使用任何适合你的东西），它的内容应该是替换为从服务器端代码返回的部分视图的内容。

于 2013-09-22T23:20:43.197 回答