Unterschiedliche Inhalte in Teilansichten jedes Mal, wenn der Benutzer auf

Question

klickt

Ich weiß, wie eine Teilansicht mit jQuery gerendert wird.

Jetzt versuche ich, jedes Mal, wenn der Benutzer klickt, verschiedene Inhalte im selben div-Element darzustellen (mit Teilansichten).

Ich habe eine Methode in meiner Heimat 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); 

     } 

ich auf Klick diese Teilansicht bin Rendering.

$(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})'); 
    }); 
}); 

Und unten sind die beiden Tasten.

<button id="button1">BlogA</button> 
<button id="button2">BlogB</button> 
<div id="partial"> 

</div> 

Das Problem: Wenn es 'n' Buttons Ich schreibe müssen klicken Funktion 'n' mal für jede Taste. Gibt es eine Möglichkeit, dass ich meine Taste ID an die Url.Action() Methode übergeben kann, die es an die Methode Details übergeben wird.

brauche ich etwas zu tun, wie

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

Answer 1

Statt und id Attribut, sein geeignetere data- Attribute zu verwenden, und dann einen Klassennamen verwenden, so dass Sie nur ein Skript benötigen

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

Answer 2

Nur Click-Ereignis für die Klasse zuweisen wie ich weiter unten getan haben. Hier weise ich btnClass als Klasse für die einzelnen Schaltflächen zu und mache das Klickereignis t für die Klasse der Schaltfläche als $(".btnClass").click(function() {});.

In diesem Ereignis können Sie die Schaltfläche ID mit der Anweisung als $(this).attr('id') abrufen.

Ihr HTML sollte gefallen.

<button class="btnClass" id="button1">BlogA</button> 
<button class="btnClass" id="button2">BlogB</button> 
<div id="partial"> 

</div> 

und JQuery möchte, wie unten

$(".btnClass").click(function() { 
     $(this).attr('id');//to get the button id 
    }); 

Answer 3

Sie data-attribute verwenden können, und speichern Sie die ID auf jedem der Taste.

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