Question

对于我的第一个ASP.NET MVC 3应用程序，我在部分视图上有div，显示特定冰淇淋的建议名称列表。我正在使用，作为我的第一个破解，这样的东西显示提议的名称：

@model ViewModels.IceCream.{ProposedNamesViewModel
<table>
  <tr>
    <th></th>
    <th>Proposed Names</th>
  </tr>
  @foreach (var item in Model.ProposedNames)
  {
    <tr>
      <td>
         @Html.ActionLink("Delete", "Delete", new { id=item.Id })
      </td>
      <td>
         @item.ProposedName
      </td>
    </tr>
  }
</table>

这样可以很好地显示这些名称。这些提议的名称仅仅是关于所选冰淇淋的一些信息之一，我想要完成的是允许用户添加或删除一个名称，然后由于其中一个动作而产生更新后的viewmodel的数据在该div中重新显示（即，将其他所有内容保留在页面上，只是用新内容替换div的内容。

我可以很好地编写控制器的删除操作，它会更新底层数据库但是我不知道如何使用我更新的viewmodel将此PartialView返回给特定的div。我希望这是有道理的。

这个（很可能是网络开发者101）的概念是我尚未讨论的概念，我希望有人可以告诉我如何做到这一点。

更新

我正在使用jquery来解决这个问题。 Stephan Prodan（我相信这是他的名字）有一个例子here，他用jquery更新了一个笔记列表。

Answer 1

你可以使用MVC的Ajax助手，但我觉得它们有时很笨拙。它们似乎也是为表格与表格实现而设计的。如果你可以像jQuery一样使用javascripty，你可以给自己更多的灵活性，尽管代码更多一些。我将向您展示我认为下面的Microsoft方式。也许我会尝试修改它以使用jQuery来说明差异。

Ajax助手

如果您正在使用MVC 3，请确保为以下示例引用了jQuery和jquery.unobtrusive-ajax，因为这很可能是在web.config中配置的

这是主要观点

<div id="myTableContainer">
@{Html.RenderPartial("GetTable", new List<string>() { "1", "2", "3" });}
</div>

我的强类型（List<string>）局部视图。您的类型将被输入您的视图模型

<table>
    @foreach (var item in Model) { 
        <tr>
        <td>@item</td>
        <td>@Ajax.ActionLink("Delete", "GetTable", new { id = item }, 
                new AjaxOptions { UpdateTargetId = "myTableContainer" })</td>
        </tr>
    }
</table>

最后，返回部分视图的控制器操作

public ActionResult GetTable(string id)
{
    // you would obviously create your list of your ice cream objects here
    // get them from a service/repository and build a view model
    List<string> list = new List<string>() { "1", "2", "3" };

    if (!string.IsNullOrEmpty(id))
        list.Remove(id);

    return View("GetTable", list);
}

这是一个粗略的演示，但它应该让我们了解Ajax助手如何重新渲染视图。

Answer 2

JQuery绝对是一个很好的方向。对于jQuery解决方案，我建议你的表的唯一修改是为每个＆lt;添加一个索引。 tr>标记（每行唯一，最好是一行基于行中显示的项目）。然后剩下的就是javascript。将click事件绑定到delete选项，在删除时，一个jQuery行将完成您的工作：

$("#" + rowID).remove()

就添加新行而言，只需生成一个表示它的字符串：

var newrow = "<tr id='newrowID'><td>Delete</td><td>proposedname</td></tr>

而且（现在我意识到你可能想要在你的＆lt; table＆gt;中添加一个id，如果你的页面上有多个），然后用

将它添加到表中

$("#" + tableID).append(newrow)

或

$('table').first().append(newrow)

如果它是您页面上的第一个表格，并且您不想给它一个id。

最后，您需要一个AJAX调用来获取新项目的信息（或者如果您在页面上创建它，则将其发送到后端）。

修改：
建议的AJAX电话：

//disable input here $.ajax({ url: "myurl/delete/" + idemID, success: function(response){ if(successful){ //determine this based on response $("#" + rowID).remove() //re-enable input } error: function(err){ alert("Something went wrong"); /*re-enable input*/} })

禁用输入可防止用户向数据库提供多次过度调用，这些调用可能会相互冲突或导致问题。

添加或删除显示的列表并重新显示特定div中的列表

2 个答案:

Ajax助手