如何使用 jQuery 在弹出窗口中显示 JSON 解析数据

Question

我正在使用图像映射，我想在单击任何坐标时在弹出窗口中显示数据，然后在弹出窗口中显示数据。如果我在 jQuery 中编写代码，如何在弹出窗口中显示数据？

下面是我的 HTML、jQuery 和 C# 代码。数据是从数据库中获取的，应该显示在弹出窗口中。 C# 代码和 jQuery 代码工作正常，但是如何在弹出窗口中显示数据？

HTML

        <img src="~/image/map.jpg" usemap="#image-map" class="map" />

        <map name="image-map" class="map">
            <area target="" alt="" title="" href="" id="2" coords="1008,370,33" shape="circle">
            <area target="" alt="" title="" href="" coords="962,420,23" shape="circle">
            <area target="" alt="" title="" href="" coords="932,461,18" shape="circle">
            <area target="" alt="" title="" href="" coords="888,464,867,485,907,541,929,501" shape="poly">
            <area target="" alt="" title="" href="" coords="851,507,836,532,876,566,907,541" shape="poly">
        </map>

        <label id="mname"></label>
        <label id="city"></label>
        <label id="mid"></label>
        <label id="cordsid"></label>


    </form>

脚本

<script>

        $(".map area").click(function () {

            $.ajax({
                url:'@Url.Action("Member_Detail")',
                data: { 'cords': this.id },
                type: "post",
                cache: false,
                dataType: "JSONP",
                success: function (resdata) {
                    alert("success", resdata);
                },
                error: function (result, status, err) {
                    console.log("error", result.responseText);
                    console.log("error", status.responseText);
                    console.log("error", err.Message);
                }
            });
        });
</script>

C#

public JsonResult Member_Detail(int cords)
        {
            string constr = ConfigurationManager.ConnectionStrings["Test"].ConnectionString;

            MemberDetail m_Detail = new MemberDetail();
            using (SqlConnection con=new SqlConnection(constr))
            {
                SqlCommand cmd = new SqlCommand("select * from Employee where EmployeeID='" + cords+"'", con);
                cmd.CommandType = System.Data.CommandType.Text;

                con.Open();
                DataTable dt = new DataTable();
                dt.Load(cmd.ExecuteReader());

                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    m_Detail.EmployeeID = Convert.ToInt32(dt.Rows[i]["EmployeeID"]);
                    m_Detail.Name = dt.Rows[i]["Name"].ToString();
                    m_Detail.Position = dt.Rows[i]["Position"].ToString();
                    m_Detail.Address = dt.Rows[i]["Address"].ToString();
                    m_Detail.Salary = dt.Rows[i]["Salary"].ToString();
                    m_Detail.Office = dt.Rows[i]["Office"].ToString();

                }
            }
            return Json(m_Detail, JsonRequestBehavior.AllowGet);
        }

Answer 1

使用 jQuery UI

CSS：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

jQuery 和 jQuery UI 脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

在你的脚本上：

$(document).ready(function(){
        $(".map area").on("click", function(e){
        e.preventDefault();
            $.ajax({
                url:'@Url.Action("Member_Detail")',
                data: { 'cords': this.id },
                type: "post",
                cache: false,
                dataType: "JSONP",
                success: function (resdata) {
                    var dataResult = JSON.parse(resdata);
                    $("#popup").append('<p>' + "" /* print dataResult here */ + '</p>');
                    $("#popup").dialog();
                },
                error: function (result, status, err) {
                    console.log("error", result.responseText);
                    console.log("error", status.responseText);
                    console.log("error", err.Message);
                }
            });
        });
});

HTML：

<div id="popup" title="MyPopup">
<p>sample_content</p>
</div>