Отображение различного контента на частичных представлениях каждый раз, когда пользователь щелкает мышью

Я знаю, как сделать частичное представление с помощью jquery.

Теперь я пытаюсь отображать различное содержимое в одном и том же элементе div каждый раз, когда пользователь нажимает (используя частичные представления).

У меня есть метод в моем домашнем контроллере 

public IActionResult Details(int x)
        {

            Blog A = new Blog() { Id = 1};    
            Blog B = new Blog() { Id = 2};

            if (B.Id == x)
               return PartialView("_blogPartial", B);

      return PartialView("_blogPartial", A);

        }

Я передаю этот частичный вид по щелчку мыши.

$(document).ready(function(){

// For button 1

    $("button1").click(function () {
        $("#partial").load('@Url.Action("Details", new { x = 1})');
    });

 // For button 2
    $("#button2").click(function () {

        $("#partial").load('@Url.Action("Details",new { x=2})');
    });
});

А ниже-две кнопки .

<button id="button1">BlogA</button>
<button id="button2">BlogB</button>
<div id="partial">

</div>

Проблема: Если есть' n 'кнопок, я должен написать функцию щелчка' n ' раз для каждой кнопки. Есть ли какой-нибудь способ, чтобы я может передать мой идентификатор кнопки в Url .Метод Action () , который передаст его методу Details.

Мне нужно сделать что-то вроде 

$("button").click(function () {
        $("#partial").load('@Url.Action("Details", new { x = buttonid })');
    });
3 2
asp.net-mvc jquery partial-views url.action

3 ответа:

Вместо атрибута and id, более целесообразно использовать атрибуты data-, а затем использовать имя класса, поэтому вам нужен только один скрипт 

<button data-id="1" class="blog" type="button">BlogA</button>
<button data-id="2" class="blog" type="button">BlogB</button>

var url = '@Url.Action("Details")';
var partial = $('#partial'); //cache it
$('.blog').click(function() {
    var id = $(this).data('id');
    partial.load(url, { x: id });
});
1

Просто назначьте событие click для класса, как я сделал ниже. Здесь я назначаю btnClass как класс для каждой кнопки и делаю событие click T для класса кнопки как $(".btnClass").click(function () {});.

Внутри этого события вы можете получить идентификатор кнопки, используя оператор $(this).attr('id').

Ваш html должен понравиться.

<button class="btnClass" id="button1">BlogA</button>
<button class="btnClass" id="button2">BlogB</button>
<div id="partial">

</div>

И Jquery должен выглядеть следующим образом 

  $(".btnClass").click(function () {
       $(this).attr('id');//to get the button id
    });
1

Вы можете использовать data-attribute и хранить идентификатор на каждой кнопке. 

// render this within a loop
<button class="myButton" data-id="2">some text</button>
<button class="myButton" data-id="3">some more text</button>


  $('.myButton').click(function (e) {
       $(e.target).attr('data-id'); the button id to pass to the url
    });
1