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

Posted

技术标签:

【中文标题】我需要在单击按钮/链接时动态生成一个包含用户控件的模式弹出窗口【英文标题】:I need to generate a modal popup dynamically that contains a user control when a button/link is clicked 【发布时间】:2021-07-26 12:59:01 【问题描述】:

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

我创建了一个用户控件(我将称之为“费率卡”),它为传递给它的设备 ID 进行数据库查找和费率计算,然后创建一个格式化的 DIV(包含样式、免责声明和链接条款和条件)。对于“静态”页面,我只需将此 DIV 插入文档的 asp:placeholder 即可。对于其他页面,我想继续使用我的 Rate Card 用户控件作为弹出窗口的内容。

这是我尝试过的:

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

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

所以我想要完成的是让用户单击设备名称旁边的一个元素(按钮、链接、标签、div 等)并让该元素触发生成费率卡,然后显示为模式弹出窗口。

我的编程背景是 C#,主要用于 WinForms 客户端应用程序,但对 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);

后面的页面代码:Bootstrap弹出类块:

<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 开始运行之前。

【问题讨论】:

如果点击按钮也会重新加载页面,您需要在点击事件上调用preventDefault()。请在您的问题中输入相关代码。 谢谢 Chris,但我不确定在哪里放置 preventDefault() 调用。它似乎不是 C# 的一部分。我已按要求添加了代码。 这是基本思想:jsfiddle.net/wqxhgnbk 但是我不知道在您的情况下应该如何处理。防止自动提交表单的方法是在按钮上添加type="button" 再次感谢克里斯。我明白你的目的是什么,但我也不知道该怎么做。我将发布我必须做的事情来解决我的问题。 【参考方案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”将asseid传递给它。此方法创建价目表用户控件并返回包含该用户控件的原始 html 代码的字符串。 (这里使用了 C# 的 control.RenderControl 方法来获取 html。)

一旦 JavaScript 函数从服务器接收到 html 代码,它就会调用 JavaScript 函数“ShowRatesPopup”并将 html 代码传递给它。该函数将 html 代码插入到“popupBody”中,然后调用模态弹出框“#myModal”。

【讨论】:

以上是关于我需要在单击按钮/链接时动态生成一个包含用户控件的模式弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章

如何使用标签属性删除动态添加的控件

按钮单击事件未在用户控件中触发,在另一个用户控件中动态创建

动态创建到 WPF 表单的用户控件上的按钮单击事件

C#winform控件动态添加和动态移除

python tkinter动态追加按钮等控件可能遇到的问题

ASP.Net 用户控件悬停导致点击