在 jQuery 模态窗口中显示来自代码后面的数据答案

【问题标题】：Display data from code behind in jQuery Modal Window在 jQuery 模态窗口中显示来自代码后面的数据
【发布时间】：2014-09-30 02:32:32
【问题描述】：

单击按钮时，我从 asp.net c# 中的代码打开一个 jQuery 模式窗口

    protected void btnShowModal_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal Popup", "showmodalpopup();", true);
    }

这是 jquery：

<script type="text/javascript">
function showmodalpopup() {
    $("#popupdiv").dialog({
        title: "Personal Information",
        width: 500,
        height: 450,
        modal: true,
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    });
};

这是html：

<div id="popupdiv" title="Basic modal dialog" style="display: none">
First Name:<br />
Last Name:<br />
Agent No:<br />
Phone:<br />
Email:<br />
Address 1:<br />
Address 2:<br />
City:<br />
State:<br />
Zip:<br />
</div>
<asp:Button ID="btnShowModal" runat="server" Text="Contact Information" OnClick="btnShowModal_Click" /> <asp:Button ID="Messages" runat="server" Text="Inbox" OnClick="btnShowModal_Click" />

在后面的代码中，我从 db 加载了数据。

            string lastName = tbl.Rows[0]["lastname"].ToString();
            string fullName = tbl.Rows[0]["FullName"].ToString();
            string Phone = tbl.Rows[0]["phone"].ToString();
            string email = tbl.Rows[0]["email"].ToString();
            string address1 = tbl.Rows[0]["address1"].ToString();
            string address2 = tbl.Rows[0]["address2"].ToString();
            string city = tbl.Rows[0]["city"].ToString();
            string State = tbl.Rows[0]["State"].ToString();
            string Zip = tbl.Rows[0]["Zip"].ToString();

我想要完成的是在模态窗口中显示从数据库中抓取的数据，从后面的代码中显示出来。 此处的联系信息是硬编码的。这只是为了展示一个例子。

谢谢。

【问题讨论】：

文档（DOM）中的数据还没有？如果没有，那么打开您的模式将需要触发 AJAX 调用。如果是这样，那么打开你的模型需要使用适当的选择器来提取它。

标签： c# jquery asp.net modal-dialog code-behind

【解决方案1】：

为您的模态代码中的每个值添加一个Label，如下所示：

<div id="popupdiv" title="Basic modal dialog" style="display: none">
    First Name: <asp:Label ID="lblFirstName" runat="server" Text=""></asp:Label><br />
    Last Name: <asp:Label ID="lblLastName" runat="server" Text=""></asp:Label><br />
    Agent No: <asp:Label ID="lblAgentNo" runat="server" Text=""></asp:Label><br />
    Phone: <asp:Label ID="lblPhine" runat="server" Text=""></asp:Label><br />
    Email: <asp:Label ID="lblEmail" runat="server" Text=""></asp:Label><br />
    Address 1: <asp:Label ID="lblAddress1" runat="server" Text=""></asp:Label><br />
    Address 2: <asp:Label ID="lblAddress2" runat="server" Text=""></asp:Label><br />
    City: <asp:Label ID="lblCity" runat="server" Text=""></asp:Label><br />
    State: <asp:Label ID="lblState" runat="server" Text=""></asp:Label><br />
    Zip: <asp:Label ID="lblZip" runat="server" Text=""></asp:Label><br />
</div>

然后在 CodeBehind 中为这个标签设置值：

protected void btnShowModal_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal Popup", "showmodalpopup();", true);
    string firstName = tbl.Rows[0]["firstName"].ToString();
    string lastName = tbl.Rows[0]["lastName"].ToString();
    //
    //
    // and so on

    lblFirstName.Text = firstName;
    lblLastName.Text = lastName;
    //
    //
    // and so on
}

【讨论】：

简短而简单！谢谢！