每次用户点击时在部分视图上呈现不同的内容
Rendering different content on partial views each time user clicks
我知道如何使用 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 })');
});
只需为 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
});
您可以使用 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
});
而不是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 });
});
我知道如何使用 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 })');
});
只需为 class 分配点击事件,就像我在下面所做的那样。
在这里,我将每个按钮的 btnClass
指定为 class,并将按钮的 class 的点击事件 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
});
您可以使用 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
});
而不是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 });
});