2017-02-16 2 views
1

мне удалось получить динамический код элемента изнутри Еогеасп и отправить его в контроллер так:Получение событий и htmlInput элемент из Еогеасп с помощью JavaScript или JQuery

@using (Html.BeginForm("DeleteConfirmed", "Gifts", FormMethod.Post, new { @class = "form-content", id = "formDiv" })) 
    { 
     foreach (var item in Model.productList) 
     { 
      <input type="button" value="Delete" onclick="DeleteButtonClicked(this)" data-assigned-id="@item.ID" /> 
     } 
    } 

и вот соответствующий сценарий, указывая методу ActionResult контроллера, отвечающего за удаление элемента:

function DeleteButtonClicked(elem) { 
     var itemID = $(elem).data('assigned-id'); 
     if (confirm('sure?')) { 
      window.location.href = "/Gifts/DeleteConfirmed/" + itemID; 
}} 

Теперь это работает просто отлично, так как Itemid правильно извлекается. Как я хотел бы добавить форму @ Html.AntiForgeryToken() в форму, идея состоит в том, чтобы изменить Actionmethod контроллера MVC в JsonResult, добавив немного скрипта Ajax в скрипт, позволяя мне передавать и itemID, и токен.

Что-то вроде:

function DeleteButtonClicked(elem) { 
    event.preventDefault(); 
    var form = $('#formDiv'); 
    var token = $('input[name="__RequestVerificationToken"]', form).val(); 
    var itemID = $(elem).data('assigned-id'); 
    if (confirm('sure?')) { 
      $.ajax({ 
       type: 'POST', 
       datatype: 'json', 
       url: '@Url.Action("DeleteConfirmed", "Gifts")', 
       data: { 
        __RequestVerificationToken: token, 
        id: itemID 
       }, 
       cache: false, 
       success: function (data) { window.location.href = "/Gifts/UserProfile?userID=" + data; }, 
       error: function (data) { window.location.href = '@Url.Action("InternalServerError", "Error")'; } 
      }); 
     } 
    dynamic }Some 

, но я понятия не имею о , как добавить «событие» к элементу (это => Эля) в <input type="button" value="Delete" onclick="DeleteButtonClicked(this)" data-assigned-id="@item.ID" />, который я использую для идентификации элемента внутри foreach, чтобы передать его скрипту.

Выше сценария, очевидно, не удается, так как нет «события» (при условии, что это будет единственной ошибкой, которую я не уверен).

Некоторая помощь необходима. Заранее благодарим за ваше время и внимание.

ответ

1

То, что вы хотите сделать, это использовать JQuery, чтобы создать обработчик событий:

$('input[type="button"]').on('click', function(event) { 
    event.preventDefault(); 
    var form = $('#formDiv'); 
    var token = $('input[name="__RequestVerificationToken"]', form).val(); 
    var itemID = $(this).data('assigned-id'); 
    if (confirm('sure?')) { 
     $.ajax({ 
      type: 'POST', 
      datatype: 'json', 
      url: '@Url.Action("DeleteConfirmed", "Gifts")', 
      data: { 
       __RequestVerificationToken: token, 
       id: itemID 
      }, 
      cache: false, 
      success: function (data) { window.location.href = "/Gifts/UserProfile?userID=" + data; }, 
      error: function (data) { window.location.href = '@Url.Action("InternalServerError", "Error")'; } 
     }); 
    } 
}); 

Просто убедитесь, что вы сделать этот сценарий после ваших кнопок визуализируются. Предпочтительно использовать метод $(document).onReady.

+0

Спасибо, что потребовалось минимальное изменение и работало как шарм. Я подтвердил ваш ответ, но, поскольку я все еще нахожусь под 15 рейтингами, которые не меняли оценку по почте. Насколько мне известно, $ $ document (document) .ready() не требуется в этом случае как 1. $ в скрипте начало уже подразумевает это. 2. Вы не можете нажимать на что-то еще не рендеринг. Но я вполне могу ошибаться. – Luke

+0

Звучит здорово. Рад, что это работает для вас. –

0

Попробуйте установку обработчика события «on» (http://api.jquery.com/on/). Внешняя функция является сокращением для готовности DOM.

$(function() { 
    $('.some-container').on('click', '.delete-btn', DeleteButtonClicked); 
}) 
Смежные вопросы