我有一个部分视图，其中列出了有关我的实体的详细信息。详细信息包括照片、标题、日期和姓名。有一个用于删除的 ActionLink 从列表中删除项目。
我想让 Caption 字段成为可编辑的文本框，以允许用户编辑内容。然后我想添加一个“更新”链接，将这些数据写入数据库。这是唯一可以编辑的属性。
基本上，我想避免用户必须打开“编辑”表单来更改此字段。我希望能够从列表中做到这一点。不确定如何创建“更新”ActionLink，将其发送到控制器，并使用户输入的文本可用于控制器方法。
【问题讨论】：
标签： c# asp.net-mvc
由于这似乎是一个非常基本的编辑，我只需将标题放在 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();
}
这是一个超级基本（未经测试！）示例，没有异常处理。
【讨论】：
您传递给视图的模型属于某种类型（数据库中的项目）。因此，如果您将名称为“Caption”的标签更改为同名的文本框，则绑定将保持不变 - 输出将是一个文本框，其标题取自模型，并传递给控制器操作中的视图。
关于更新链接： 我将使用 [HttpPost] 属性和模型作为参数创建与视图同名的操作。该操作将由 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
//
}
希望对你有帮助
【讨论】：