在动态 div 上获取点击的图像 ID

用户_5939667

在这里,我可以在动态创建的 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>";

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章