Question

我有一个部分视图，其中列出了有关我的实体的详细信息。详细信息包括照片，标题，日期和名称。有一个ActionLink for Delete可以从列表中删除该项目。

我想让Caption字段成为可编辑的文本框，以允许用户编辑内容。然后我想添加一个更新＆＃39;将此数据写入数据库的链接。这是唯一可以编辑的属性。

基本上我想避免用户打开＆＃39;编辑＆＃39;表格来改变这个领域。我希望能够从列表中做到这一点。不确定如何创建更新＆＃39; ActionLink，将其发送到控制器，并将用户输入的文本提供给控制器方法。

Answer 1

由于它似乎是一个非常基本的编辑，我只是将标题放在Div然后使用CSS / jQuery在鼠标悬停时显示edit button (glyphicon glyphicon-pencil)。点击后，将Div设置为Editable（使用样式表示它处于编辑模式，并且仅使用保存按钮退出编辑模式）。在保存时，执行jQuery Ajax调用以更新数据库中的值。

由于可编辑内容可能包含用户的任何内容，因此请不要格外SQL Injection Attacks。

CSS可能如下所示：

.editor editor-display button
{
  display: none;
}
.editor editor-display:hover .edit-button
{
  display: inline-block;
}
.editor editor-edit .edit-button
{
  display: none;
}
.editor editor-edit .save-button
{
  display: inline-block;
}

Html可能看起来像：

<div class="my-entity editor editor-display" data-id="5" >
<div class="edit-content">@model.Caption</div>
<button id="edit-caption-button" class="edit-button" />
<button id="save-caption-button" class="save-button" />
<div>

Javascript可能看起来像：

$(document).ready(function()
{
  $("#save-caption-button").on("click", function()
  {
    $(this).parent("editor").removeClass("editor-display").addClass("editor-edit");
  });

  $("#save-caption-button").on("click", function()
  {
    $.ajax({
      url: "/MyEditity/UpdateCaption",
      data: { id: $(this).parent(".my-entity").data("id"),
        caption: $(this).parent(".my-entity").find(".edit-content").first().text() };
    });
    $(this).parent("editor").removeClass("editor-edit").addClass("editor-display");
  });
});

控制器：

public ActionResult UpdateCaption(int id, string caption)
{
  // lookup entity by id
  // change caption value
  // save
  return new EmptyResult();
}

这是一个超级基本（UNTESTED！）示例，没有异常处理。

Answer 2

传递给视图的模型属于某种类型（db中的项目）。因此，如果您使用名称＆＃34更改标签;标题＆＃34;到一个同名的文本框，然后绑定将保持不变 - 输出将是一个文本框，其中标题取自传递给控制器操作中的视图的模型。

至于更新链接：我将创建一个与具有[HttpPost]属性的视图同名的Action，并将模型作为参数。该操作将由View中的提交按钮调用（因此所有标签和文本框都应包含在表单中）。在该操作内部执行db update。

所以： View应该是这样的：

@model db.Foo
    @using (Html.BeginForm()) {
    <fieldset>
    @Html.LabelFor(model=>model.Name)
    (...)
    @Html.TextBoxFor(model=>model.Caption)
<input type="submit" value="Update Caption"/>
    </fieldset>
    }

和控制器操作：

//The action that passes the model to the View
public ActionResult Details()
        {
//
//get foo here
//
            return View(foo); //Where foo is the item You use for your model
        }
[HttpPost]
public ActionResult Details(foo model)
        {
//
//Update model here with model of type foo
//
        }

希望这有帮助

从列表中启动更新

2 个答案: