のAsp MVCのjQuery - 場所編集

Question

に、私はそこにいくつかのデータを持つdiv要素のリストを持っている：runEditリンク上のユーザーのクリックが、私はこれからの編集を行うと

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

を：

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でこの2つのボタンを追加しました。しかし、私はこのボタンにいくつかのコントローラーアクションを付ける方法を知らないのですか？

ここでの問題は、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

最初にitemidをこのようにdivに追加し、id = wrapをクラスに変換します（複数のものがあるため）。

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

このようにして、編集中のアイテムのIDを参照することができます。

あなたはまた、FX、ページ上の注入submitボタンにクラスを追加する必要があります

$('.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をダウンロードして、あなたはJavaScriptをフックすることができます

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

ライブラリを作成し、スクリプト参照に追加してください。これは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

あなたのtextareaの周り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 in 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のは、あなたがあまりにも多くのDOM要素を生成しないことを、このアプローチの

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

有利であろう、このように、より良い形に変換することができこの場合。さもなければ、あなたのJavaScriptは絶対に扱いにくくなるでしょう。