ASP.NET MVC/jQuery:现场编辑

问题描述:

我想在现场进行编辑,其中有常规文本(来自模型),旁边有编辑按钮。点击编辑按钮后,我想要一个可编辑的文本框出现在常规文本的位置,然后通过AJAX提交更改。我已经解决了如何提交,但我不知道如何准确地将编辑控件放置在之前的文本位置。这可能很容易让你的JS大师在那里。ASP.NET MVC/jQuery:现场编辑

除了放置问题,我想知道是否应该点击编辑按钮时通过AJAX获取适当的编辑框(常规文本的文本框,日期等的日历等),或者它会更好地发送它与页面,并保持隐藏,直到需要?或者我可以以某种方式在客户端重复使用单个实例吗?

对不起,这是两个问题之一,但它们是紧密相关的。

谢谢!

我会推荐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"); 
}); 

希望这有助于。

不确定要了解按钮放置问题。不过,为此设计了一些jquery插件。其中之一是Jeditable,找到演示here

商店的标记中的变量编辑,存储当前的标记在一个变量编辑之前(这样你就可以恢复,如果按下取消按钮),然后使用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

如果问题是严格的文本编辑,你为什么不能使用有两种用途的单一文本区域以及单击编辑按钮时切换disable属性(也可能background-color & border风格)?