天冬氨酸MVC jQuery的 - 正在編輯

Question

我有在那裏的一些數據的div的名單：

<div style="border: 1px solid #dddddd;">   
     <div id="wrap"> 
     <h3 id="cText">@Model.CommentText</h3> 
     <a id="runEdit" href="#" >Edit</a> 
     </div> 
</div> 

當runEdit鏈接用戶點擊我讓編輯從本：

e.preventDefault(); 

     var txt = $('#cText').text(); 

     $('#cText').remove(); 

     $('#wrap').prepend('<textarea>' + txt + '</textarea>'); 
     $('#wrap').append('<input type="submit" value="Ok" />'); 
     $('#wrap').append('<input type="submit" value="Cancel" />'); 

的問題是我在javascript中添加了這兩個按鈕。但我不知道如何附加一些控制器動作到這個按鈕？

這裏的問題是，如果我寫5條評論。點擊編輯我可以得到5個編輯表單。

$('#editButton').live('click', function (e) { 
     e.preventDefault(); 

     var container = $(this).closest('.commentWrap'); 
     var itemId = container.attr('id'); 

     var nestId = '#' + itemId; 

     var txt = $('#commentTextValue').text(); 

     $(nestId + ' #commentTextValue').remove(); 
     $(nestId + ' #editButton').remove(); 
     $(nestId).prepend('<textarea id="editArea">' + txt + '</textarea>'); 
     $(nestId).append('<input type="submit" value="Ok" class="btnOk" />'); 
    }) 


    $('.btnOk').live('click', function (e) { 
     e.preventDefault(); 
     var container = $(this).closest('.commentWrap'); 
     var itemId = container.attr('id'); 
     var text = container.find('textarea').val(); 

     var nestId = '#' + itemId; 
     //alert(nestId); 

     $.ajax({ 
      url: '/Comment/SaveComment', 
      data: JSON.stringify({ CommentText: text, CommentId: itemId }), 
      type: 'post', 
      contentType: 'application/json', 
      success: function (data) { 
       if (data.success === true) { 
        //alert(data.message); // do show/hide stuff here instead of the alert 
        $(nestId + ' #editArea').remove(); 
        $(nestId + ' .btnOk').remove(); 
        $(nestId).append('<h3 id="commentTextValue">' + data.message + '</h3>'); 
        $(nestId).append('<a id="editButton" href="#">Edit</a>'); 

       } 
      } 
     }); 

    }); 


</script> 

    <div style="border: 1px solid #dddddd;"> 
     @Html.ActionLink(@Model.Author, "SomeAction") 
     <div class="commentWrap" id="@Model.CommentId"> 
      <p id="commentTextValue">@Model.CommentText</p> 
      <a id="editButton" href="#">Edit</a> 
     </div> 
    </div> 

Answer 1

首先像這樣向div中添加一個itemid，並將id = wrap轉換爲一個類，因爲它們中有多個。

<div class="wrap" id="123"></div> 

這樣你就可以引用你正在編輯的項目的id。

你也應該添加一個類的提交按鈕，您的網頁，外匯注：

<input type="submit" class="btnOk" value="Ok"/> 

然後你可以掛鉤的JavaScript：

$('.btnOk').live('click',function(e){ 
    e.preventDefault(); 
    var container = $(this).closest('.wrap'); 
    var itemId = container.attr('id'); 
    var text = container.find('textarea')[0].val(); 
    $.ajax({ 
    url: '/mycontroller/savecomment', 
    data: JSON.stringify({comment: text, id:itemId}), // using JSON2, see below 
    type: 'post', 
    contentType: 'application/json', 
    success: function(data){ 
     if(data.success===true){ 
      alert(data.message); // do show/hide stuff here instead of the alert 

     } 
    } 
    }); 

}); 

注：下載json2庫並將它添加到你的腳本引用 - 這是做你的json序列化的好方法。（https://github.com/douglascrockford/JSON-js）

在你的控制器，你必須添加一個動作方法來處理這個請求：

public ActionResult SaveComment(string text, int id) 
    { 
     //save your comment for the thing with that id 
     var result = new {success = true, message = "saved ok"}; 
     return Json(result, JsonRequestBehavior.AllowGet); 
    } 

Answer 2

你必須把form標籤在你的文字區域，並通過@ Url.Action助手到需要採取行動來設置形式的行動。

Answer 3

您需要對控制器操作進行Ajax調用。請參考以下鏈接：

http://tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views

你會發現一個樣品存在。

基本上，你需要做的是如下：

var d = "poo=1&bar=2"; 

$.ajax({ 
    type: "POST", 
    url: "/home/myaction", 
    data: d, 
    success: function (r) { 
     alert(r.data); 
    }, 
    complete: function() { 

     alert("I am done!"); 
    }, 
    error: function (req, status, error) { 
     //do what you need to do here if an error occurs 
     alert("error"); 
    } 
}); 

Answer 4

馬克的答案是collrect。用這個包圍你的代碼。不過，我強烈建議你在html中製作「html」而不是JavaScript。

上面的代碼可以轉換爲一個更好的形狀，這樣，

<div style="border: 1px solid #dddddd;">   
    <div id="wrap"> 
    <h3 id="cText">@Model.CommentText</h3> 
    <a id="runEdit" href="#" >Edit</a> 
    </div> 
    <div id="editPanel" style="display:none;"> 
     <form action="@Url("Edit", "Whatevercontroller")"> 
      <textarea name="CommentText">@CommentText</textarea> 
      <input type="submit" value="Ok" /> 
      <a href="#" id="cancelEdit">Cancel</a> 
     </form> 
    </div> 
</div> 

和js會

function StartEdit() { 
    $("#wrap").css("display", "none"); 
    $("#editPanel").css("display", "block"); 
} 
function CancelEdit() { 
    $("#wrap").css("display", "block"); 
    $("#editPanel").css("display", "none"); 
} 

這種方法，你不會產生太多的DOM元素的優勢在這種情況下。否則，你的JavaScript將變得絕對難以管理。