我需要在点击按钮/链接时动态生成一个包含用户控件的模式弹出窗口

Question

我有一个asp。net web表单网站，我正试图通过添加弹出式模块来增强该网站，该模块显示可租赁设备的租金。在大多数页面上，费率是“静态”的，并张贴在该页面上所有设备的页面顶部。但是，在一些页面上，顶部的费率不能是“静态”的，因为每件设备的费率不同，因此需要弹出窗口。

我已经创建了一个用户控件（我将称之为“费率卡”），它对传递给它的设备ID进行数据库查找和费率计算，然后创建一个格式化的DIV（包括样式、免责声明和条款与条件的链接）。对于“静态”页面，我只需在文档的asp:placeholder中插入这个DIV，就完成了。对于其他页面，我希望继续使用我的费率卡用户控件作为弹出窗口的内容。

以下是我尝试过的：

>

asp：使用“onClick”启动服务器端代码以生成费率卡的按钮。然后将其插入文档中的引导模式代码块中，最后服务器端调用一些显示模式弹出窗口的javascript代码（通过ClientScript.RegisterStartupScript）。这是可行的，但每次单击“查看速率”按钮时，网页都会重新加载，并滚动回顶部。如果我尝试检查“isPostBack”并返回（如果是），页面仍会重新加载，我所拥有的只是来自网站主控的页眉和页脚。

我开始编写代码，将引导模式块放在asp:UpdatePanel中，但在阅读了几篇不同的文章之后，页面似乎仍然会重新加载。

所以我想要完成的是让用户点击一件设备名称旁边的一个元素（按钮、链接、标签、div等）。），让这个东西触发要生成的费率卡，然后显示为模态弹出窗口。

我的编程背景是C#，主要用于WinForm客户端应用程序，但对asp.net网站有一些经验。所以，我可能需要一些额外的指导和例子。

提前感谢任何帮助！

新增代码：

按钮来源：

<asp:Button ID="ShowRates" runat="server" OnClick="ShowRates_Click" CommandArgument="0" Text="View Rates"  ></asp:Button>

后面的按钮代码：

protected void ShowRates_Click(object sender, EventArgs e)
{
    var ID = ((Button)sender).CommandArgument;
    if (int.TryParse(ID, out int assetID) == false) return;

    assetCard_ShowRate(sender, e, assetID);
}

private void assetCard_ShowRate(object sender, EventArgs e, int assetID)
{
    Controllers.AssetController ctlr = new Controllers.AssetController();
    var rates = ctlr.GetAssetRateCardsByAssetID(assetID);

    UserControls.RatesTable2 ratesTable = (UserControls.RatesTable2)LoadControl("~/UserControls/RatesTable2.ascx");
    ratesTable.BuildRateCard(rates, "");

    //Add the rate card control to the placeholder
    phRateCard.Controls.Add(ratesTable);

    //Call the javascrip function to show the popup
    Page.ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}

后面的页面代码：引导弹出类块：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <asp:PlaceHolder ID="phRateCard" runat="server">
                    <%--Place Rate Card Here--%>
                </asp:PlaceHolder>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Javascript:

<script type="text/javascript">
    function ShowPopup() {
        $("#myModal").modal("show");
    }
</script>

页面重载似乎发生在调用javascript之后，javascript开始运行之前。

Answer 1

这就是我如何能够完成我需要使用以下代码：

按钮来源：

<button id="ShowRates2" runat="server" type="button" class="btn btn-link treUnderline" style="color:black" onclick="ShowRates_Click(this)">View Rates</button>

后面的按钮代码：

[System.Web.Services.WebMethod]
public static string ShowRates(string AssetID)
{
    int assetID = int.Parse(AssetID);

    ListLayoutByCategory5 method = new ListLayoutByCategory5();
    string html = method.BuildRateCard(assetID);
    return html;
}

private string BuildRateCard(int assetID)
{
    Controllers.AssetController ctlr = new Controllers.AssetController();
    var rates = ctlr.GetAssetRateCardsByAssetID(assetID);

    UserControl uc = new UserControl();
    UserControls.RatesTable2 ratesTable = (UserControls.RatesTable2)uc.LoadControl("~/UserControls/RatesTable2.ascx");
    ratesTable.BuildRateCard(rates, "", false);

    //Get the HTML code of the ratesTable control (uses RenderControl(HtmlTextWriter(StringWriter(StringBuilder))) )
    string html = ratesTable.HTML;
    return html;
}

页面来源：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div id="popupBody" class="modal-body">
                <asp:PlaceHolder ID="phRateCard" runat="server"></asp:PlaceHolder>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

Javascript:

    function ShowRates_Click(asset) {
        var selectedAssetID = asset.getAttribute("assetid");
        PageMethods.ShowRates(selectedAssetID, ShowRatesPopup);
    }

    function ShowRatesPopup(popupHTML) {
        document.getElementById('popupBody').innerHTML = popupHTML;
        $("#myModal").modal("show");
    }

</script>

这就是我必须要做的。在按钮的“onclick”事件中，我调用了JavaScript函数“ShowRates（this）”。此函数从属性中提取assetid，然后调用服务器端方法“ShowRates”，将assetid传递给它。此方法创建rate card用户控件，并返回包含该用户控件的原始html代码的字符串。（这使用了C#的control.RenderControl方法来获取html。）

一旦JavaScript函数从服务器接收到html代码，它就调用JavaScript函数ShowRatesPopup并将html代码传递给它。该函数将html代码插入到popupBody中，然后将模态popup称为#myModal。