每次用户点击时在部分视图上呈现不同的内容

Question

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

我需要做类似

的事情

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

Answer 1

只需为 class 分配点击事件，就像我在下面所做的那样。在这里，我将每个按钮的 btnClass 指定为 class，并将按钮的 class 的点击事件 t 指定为 $(".btnClass").click(function () {});。

在此事件中，您可以使用 $(this).attr('id').

语句获取按钮 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
    });

Answer 2

您可以使用 data-attribute 并将 ID 存储在每个按钮上。

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

Answer 3

而不是id属性，使用data-属性更合适，然后使用一个class名称，这样你只需要一个脚本

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

每次用户点击时在部分视图上呈现不同的内容

Rendering different content on partial views each time user clicks

jquery

asp.net-mvc

partial-views

asp.net-core-2.0

url.action