ASP.NET MVC/jQuery：就地编辑答案

【问题标题】：ASP.NET MVC/jQuery: Inplace EditingASP.NET MVC/jQuery：就地编辑
【发布时间】：2009-08-08 07:06:25
【问题描述】：

我想在有常规文本（来自模型）的地方进行就地编辑，旁边有一个编辑按钮。单击编辑按钮时，我希望在常规文本所在的位置出现一个可编辑的文本框，然后通过 AJAX 提交更改。我已经解决了如何提交，但是我不知道如何将编辑控件准确地放置在文本之前的位置。这对你们那里的 JS 专家来说可能很容易。

除了放置问题之外，我想知道是否应该在单击编辑按钮时通过 AJAX 获取适当的编辑框（用于常规文本的文本框、用于日期的日历等），或者将其与页面一起发送会更好并保持隐藏直到需要？或者我可以在客户端以某种方式重用单个实例吗？

抱歉，这是一个合二为一的两个问题，但它们密切相关。

谢谢！

【问题讨论】：

标签： .net asp.net javascript jquery

【解决方案1】：

不确定是否了解按钮放置问题。但是，有许多为此目的而设计的 jquery 插件。其中之一是 Jeditable，找到一个演示 here！

【讨论】：

【解决方案2】：

我会推荐JEditable，我以前用过，效果很好。

一个例子：

标记

<div class="editable_text" id="my_text">My Text</div><a href="#" class="trigger_editable">Edit</a>

Jquery

$(".editable_text").editable("YOUREDITURLHERE", { event : "edit" });
$(".trigger_editable").bind("click", function() {
        $(this).prev().trigger("edit");
});

希望这会有所帮助。

【讨论】：

【解决方案3】：

将编辑的标记存储在变量中，将编辑之前的当前标记存储在变量中（这样，如果按下取消按钮，您可以恢复），然后使用 jquery 将其切换出来：

var editmarkupvariable = [editmarkup];
var revertmarkup = $("#item").html();
<div class="item">
   [markup]
</div>

$("#item").html(editmarkupvariable);

本教程提供了更多详细信息： http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-brary/15/

这应该可以回答你的两个问题。

我会在谷歌上搜索一个 jquery 插件来执行此操作，除非您必须手动编写代码。这是一个：http://aktagon.com/projects/jquery/in-place-edit

【讨论】：

【解决方案4】：

如果问题是纯文本编辑，为什么不能同时使用单个文本区域并在单击编辑按钮时切换disable 属性（可能还有background-color 和border 样式）？

【讨论】：