jquery - 每次用户单击时在部分 View 上呈现不同的内容

Question

我知道如何使用 jquery 渲染部分 View 。

现在，我尝试在每次用户单击时在同一个 div 元素中呈现不同的内容(使用部分 View )。

我的家庭 Controller 中有一个方法

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

        }

我在点击时渲染此部分 View 。

$(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”次点击函数。有什么方法可以将我的按钮ID传递给Url.Action()方法，该方法会将其传递给Details方法。

我需要做类似的事情

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

Answer 1

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