Pass ID в Html.ActionLink через ajax, чтобы получить частичный вид

Question

У меня есть страница просмотра MVC, строго типизированная для списка нумерованных продуктов. Каждый элемент списка имеет Html.ActionLink с уникальным идентификатором. В моем файле jquery у меня есть функция $ .ajax, которая должна обрабатывать ссылку с соответствующим идентификатором. Цель состоит в том, чтобы загрузить частичный вид на той же странице с информацией этого элемента, чтобы разрешить редактирование любого элемента. Я не хочу, чтобы actionr приводил к отдельной странице или создавал сообщение на сервере.

// здесь материал MVC

@model IEnumerable<SimpleAjax.Models.Product> 
@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.Name) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Price) 
     </td> 
     <td> 
       @Html.ActionLink("Edit", "ShowEdit", "Home", new { id=item.Id } ,new { id = "btnShowEdit" + item.Id, @class= ".button_action"}) 
     | 

     </td> 
    </tr> 
} 


<div id="showEditProd"> 
</div> 

//inside controller 
    public ActionResult ShowEdit(int id) 
    { 

     Product prod = db.Product.Find(id); 

     ProductViewModel viewModel = new ProductViewModel 
     { 
      EditProduct = prod 
     }; 

     return PartialView(viewModel); 
    } 

//inside a separate partial view page 
@model SimpleAjax.Models.ProductViewModel 


@using (Html.BeginForm("Index_AddItem", "Home", FormMethod.Post, new { id = "fid" })) 
{ 
    <div> 
     @Html.LabelFor(model => model.EditProduct.Name) 
     @Html.EditorFor(model => model.EditProduct.Name) 
    </div> 

    <div> 
     @Html.LabelFor(model => model.EditProduct.Price) 
     @Html.EditorFor(model => model.EditProduct.Price) 
    </div> 
    <div> 
     <input type="submit" value="Submit" /> 
    </div> 
} 

в настоящее время ниже работает как и ожидалось, когда я жёстко идентификаторы:

$('#btnShowEdit1,#btnShowEdit2,#btnShowEdit3').click(function() { 

      $.ajax({ 
       url: this.href, 
       contentType: 'application/html; charset=utf-8', 
       type: 'GET', 
       success: function (result) { 

        $('#showEditProd').html(result); 
       } 
      }); 
     return false; 
    }); 

выше JQuery работает по желанию. Частичное представление загружается на ту же страницу, что и список с перечислением. Но, очевидно, я не хочу перекодировать переменные. У меня может быть x число #btnShowEdit. Я хочу использовать класс, правильно? Поэтому у меня есть класс .button_action, который перечислит Id. Но когда я это делаю, как показано ниже, ссылка переходит на отдельную страницу.

они идут на отдельную страницу, а не то, что я хочу

$('.button_action').click(function (index) { 

      $.ajax({ 
      url: this.href, 
      contentType: 'application/html; charset=utf-8', 
      type: 'GET', 
      success: function (result) { 

       $('#showEditProd').html(result); 
      } 
     }); 
     return false; 
    }); 

}); 


//also tried this... 

    $('.button_action').each(function (index) { 


    $('#btnShowEdit' + index).click(function() { 

     $.ajax({ 
      url: this.href, 
      contentType: 'application/html; charset=utf-8', 
      type: 'GET', 
      success: function (result) { 

       $('#showEditProd').html(result); 
      } 
     }); 
     return false; 
    }); 

}); 

Я знаю, что есть, должно быть простым solution.Thanks за вашу помощь заранее.

Answer 1

Проверьте это:

$('.button_action').click(function (e) { 
    e.preventDefault() // this prevent default behavior for hyperlink on 'click' event 

Answer 2

Любая конкретная причина не использовать Ajax HTML-помощника?

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx

Вы можете использовать его в качестве ActionLink, но это делается асинхронной, и результат может быть размещен в вашем showEditProd.

@Ajax.ActionLink("Action", 
       "Controller", 
       _YOURID_, 
       new AjaxOptions { HttpMethod = "GET", 
       InsertionMode = InsertionMode.Replace, 
       UpdateTargetId = "showEditProd", 
       OnComplete = "your_js_function();" }) 

Answer 3

В случае, если кто-то нуждается в решении выше ... Это было слишком просто believe.The коды JQuery Ajax не нужен htmlattribute идентификатора из Html.ActionLink. Фактически, этот дополнительный атрибут вызывает проблемы. JQuery Ajax распознает идентификатор из «this.href», как это контроллер маршрута вместе с параметром ид. Поэтому я удалил идентификатор из htmlattributes в ActionLink. Сейчас он работает, как ожидалось.

@Html.ActionLink("Edit", "ShowEdit", "Home", new { id=item.Id } ,new { @class= ".button_action"}) 

в JS файл

$('.button_action').click(function (index) { 

     $.ajax({ 
     url: this.href, 
     contentType: 'application/html; charset=utf-8', 
     type: 'GET', 
     success: function (result) { 

      $('#showEditProd').html(result); 
     } 
    }); 
    return false; 
}); 

});