Блог

У меня есть список divs с некоторыми данными там:

 <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>
  

Сначала добавьте itemid в div, подобный этому, и преобразуйте id= wrap в класс, поскольку их несколько.

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

Таким образом, вы получаете способ ссылаться на идентификатор элемента, который вы редактируете.

Вам также следует добавить класс к кнопке отправки, которую вы вводите на страницу, fx:

 <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);
    }
  

Ответ Марка — 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 станет абсолютно неуправляемым.

Вы должны поместить form тег вокруг вашей текстовой области и настроить действие формы с помощью помощника @Url.Action на необходимое действие.

Вам нужно выполнить 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=1amp;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");
    }
});