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

【问题标题】：Rendering different content on partial views each time user clicks每次用户点击时在局部视图上呈现不同的内容
【发布时间】：2018-02-27 22:57:03
【问题描述】：

我知道如何使用 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 })');
    });

【问题讨论】：

标签： jquery asp.net-mvc partial-views asp.net-core-2.0 url.action

【解决方案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
    });

【讨论】：

必须解析它，转换成整数然后比较。但奏效了。谢谢先生。

【解决方案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
    });

【讨论】：

【解决方案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 });
});

【讨论】：