Obtenir l'ID de l'image cliquée sur div dynamique

Question

Ici, je suis capable d'afficher des images d'université sur div divisée dynamiquement. Maintenant, je veux obtenir l'identifiant de l'image universitaire que l'utilisateur a sélectionné, puis utiliser cet identifiant pour afficher les cours qui ont sélectionné l'offre universitaire. Est-ce qu'il y a moyen de faire ça?

protected void fetchUniversities() 
    { 
     List<University> uniList = new List<University>(); 
     using (var dd = new UniversityContext()) 
    { 
     uniList = UniversityController.fetchUniversitiesOfferCourses(dd); 
    } 


     Literal header = new Literal(); 
     header.Text = "<div class=\"container\"><div class=\"row\"><h2>Apply For University</h2><p>Select your Prefferd University</p></div></div>"; 

     CompanyPanel.Controls.Add(header); 

     foreach (var item in uniList) 
     { 

       Literal label1 = new Literal(); 
       label1.Text = "<div class=\"container\"><div class=\"row\" >"; 

       Literal lblTwo = new Literal(); 
       lable2.Text = "<img src=\"/template/images/" + item.ImageName + "\" height=\"100%\"/>"; 

       Literal lblLast = new Literal(); 
       label3.Text = "</div></div>"; 

       Panel1.Controls.Add(label1); 
       Panel1.Controls.Add(label2); 
       Panel1.Controls.Add(label3); 

     } 
    } 

Answer 1

Vous pouvez y parvenir en une meilleure façon de passer à un autre cadre et de retour des données (par exemple JSON) en réponse à une requête ajax (un coup d'oeil à ASP.NET MVC).

est ici un moyen d'y parvenir en utilisant votre exemple, il est un peu lourd et je vous devriez obtenir l'ai pas testé, mais dans la bonne direction

Ajouter une méthode comme suit:

[WebMethod] 
public static string GetUniversityCourses(int universityId) 
{ 
    List<UniversityCourses> courses = ... 
    StringBuilder coursesHtml = new StringBuilder(); 
    foreach(var course in courses) { 
     //Generate your html here 
     coursesHtml.Append("<div>" + course.Name + "</div>"; 
    } 
    return coursesHtml.toString(); 
} 

Ensuite, ajoutez ce code javascript pour votre fichier ASPX:

function GetUniversityCourses(id) { 

$.ajax({ 
    type: "POST", 
    url: "Default.aspx/GetUniversityCourses", 
    data: {"id": id, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
     alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); 
    }, 
    complete: function (jqXHR, status) { 
     $("#coursesContainer_" + id).html(jqXHR.responseText); 
    } 
}); 

}

Ensuite, dans le code de votre serveur:

lable2.Text = "<a href="javascript:void(0);" data-getcourseid=\"" + item.Id + "\"><img src=\"/template/images/" + item.ImageName + "\" height=\"100%\"/></a><div id=\"coursesContainer_\"" + item.Id + "</div><script>$('a[data-getcourseid=\"" + item.Id + "\"]').on('click', function() { GetUniversityCourses(" + item.Id + ")}</script>";