[英]Get clicked image id on dynamic div
在這里,我可以在動態創建的 div 上顯示大學圖像。 現在我想獲取用戶選擇的大學圖像的 id,然后使用該 id 顯示所選大學提供的課程。 有沒有辦法做到這一點?
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 preferred 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);
}
}
您可以通過移動到不同的框架並返回數據(例如 JSON)以響應 ajax 查詢(查看 ASP.NET MVC)以更好的方式實現這一點。
這是使用您的示例實現此目的的一種方法,它有點麻煩,我尚未對其進行測試,但應該可以幫助您找到正確的方向
添加方法如下:
[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();
}
然后將此javascript代碼添加到您的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);
}
});
}
然后在您的服務器端代碼中:
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>";
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.