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

如下所示，只为该课程分配点击事件。在这里，我将btnClass指定为每个按钮的类，并将按钮的类的点击事件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-属性，然后使用类名，因此您只需要一个脚本

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

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

3 个答案: