Guest User

Untitled

a guest
Aug 14th, 2018
64
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.19 KB | None | 0 0
  1. Asp mvc jquery - in place edit
  2. <div style="border: 1px solid #dddddd;">
  3. <div id="wrap">
  4. <h3 id="cText">@Model.CommentText</h3>
  5. <a id="runEdit" href="#" >Edit</a>
  6. </div>
  7. </div>
  8.  
  9. e.preventDefault();
  10.  
  11. var txt = $('#cText').text();
  12.  
  13. $('#cText').remove();
  14.  
  15. $('#wrap').prepend('<textarea>' + txt + '</textarea>');
  16. $('#wrap').append('<input type="submit" value="Ok" />');
  17. $('#wrap').append('<input type="submit" value="Cancel" />');
  18.  
  19. $('#editButton').live('click', function (e) {
  20. e.preventDefault();
  21.  
  22. var container = $(this).closest('.commentWrap');
  23. var itemId = container.attr('id');
  24.  
  25. var nestId = '#' + itemId;
  26.  
  27. var txt = $('#commentTextValue').text();
  28.  
  29. $(nestId + ' #commentTextValue').remove();
  30. $(nestId + ' #editButton').remove();
  31. $(nestId).prepend('<textarea id="editArea">' + txt + '</textarea>');
  32. $(nestId).append('<input type="submit" value="Ok" class="btnOk" />');
  33. })
  34.  
  35.  
  36. $('.btnOk').live('click', function (e) {
  37. e.preventDefault();
  38. var container = $(this).closest('.commentWrap');
  39. var itemId = container.attr('id');
  40. var text = container.find('textarea').val();
  41.  
  42. var nestId = '#' + itemId;
  43. //alert(nestId);
  44.  
  45. $.ajax({
  46. url: '/Comment/SaveComment',
  47. data: JSON.stringify({ CommentText: text, CommentId: itemId }),
  48. type: 'post',
  49. contentType: 'application/json',
  50. success: function (data) {
  51. if (data.success === true) {
  52. //alert(data.message); // do show/hide stuff here instead of the alert
  53. $(nestId + ' #editArea').remove();
  54. $(nestId + ' .btnOk').remove();
  55. $(nestId).append('<h3 id="commentTextValue">' + data.message + '</h3>');
  56. $(nestId).append('<a id="editButton" href="#">Edit</a>');
  57.  
  58. }
  59. }
  60. });
  61.  
  62. });
  63.  
  64.  
  65. </script>
  66.  
  67. <div style="border: 1px solid #dddddd;">
  68. @Html.ActionLink(@Model.Author, "SomeAction")
  69. <div class="commentWrap" id="@Model.CommentId">
  70. <p id="commentTextValue">@Model.CommentText</p>
  71. <a id="editButton" href="#">Edit</a>
  72. </div>
  73. </div>
  74.  
  75. <div class="wrap" id="123"></div>
  76.  
  77. <input type="submit" class="btnOk" value="Ok"/>
  78.  
  79. $('.btnOk').live('click',function(e){
  80. e.preventDefault();
  81. var container = $(this).closest('.wrap');
  82. var itemId = container.attr('id');
  83. var text = container.find('textarea')[0].val();
  84. $.ajax({
  85. url: '/mycontroller/savecomment',
  86. data: JSON.stringify({comment: text, id:itemId}), // using JSON2, see below
  87. type: 'post',
  88. contentType: 'application/json',
  89. success: function(data){
  90. if(data.success===true){
  91. alert(data.message); // do show/hide stuff here instead of the alert
  92.  
  93. }
  94. }
  95. });
  96.  
  97. });
  98.  
  99. public ActionResult SaveComment(string text, int id)
  100. {
  101. //save your comment for the thing with that id
  102. var result = new {success = true, message = "saved ok"};
  103. return Json(result, JsonRequestBehavior.AllowGet);
  104. }
  105.  
  106. <div style="border: 1px solid #dddddd;">
  107. <div id="wrap">
  108. <h3 id="cText">@Model.CommentText</h3>
  109. <a id="runEdit" href="#" >Edit</a>
  110. </div>
  111. <div id="editPanel" style="display:none;">
  112. <form action="@Url("Edit", "Whatevercontroller")">
  113. <textarea name="CommentText">@CommentText</textarea>
  114. <input type="submit" value="Ok" />
  115. <a href="#" id="cancelEdit">Cancel</a>
  116. </form>
  117. </div>
  118. </div>
  119.  
  120. function StartEdit() {
  121. $("#wrap").css("display", "none");
  122. $("#editPanel").css("display", "block");
  123. }
  124. function CancelEdit() {
  125. $("#wrap").css("display", "block");
  126. $("#editPanel").css("display", "none");
  127. }
  128.  
  129. var d = "poo=1&bar=2";
  130.  
  131. $.ajax({
  132. type: "POST",
  133. url: "/home/myaction",
  134. data: d,
  135. success: function (r) {
  136. alert(r.data);
  137. },
  138. complete: function () {
  139.  
  140. alert("I am done!");
  141. },
  142. error: function (req, status, error) {
  143. //do what you need to do here if an error occurs
  144. alert("error");
  145. }
  146. });
Add Comment
Please, Sign In to add comment