[英]I need to generate a modal popup dynamically that contains a user control when a button/link is clicked
我有一个 asp.net web forms 网站,我试图通过添加显示可租用设备租金的弹出模式来增强该网站。 在大多数页面上,费率是“静态的”,并张贴在该页面上所有设备的页面顶部。 但是在几页上,顶部的费率不能是“静态的”,因为每件设备都有不同的费率,因此需要弹出窗口。
我创建了一个用户控件(我将调用“费率卡”),它对传递给它的设备 ID 进行数据库查找和费率计算,然后创建一个格式化的 DIV(包含样式、免责声明和指向条款的链接和条件)。 对于“静态”页面,我只需将此 DIV 插入文档的 asp:placeholder 即可。 对于其他页面,我想继续使用我的 Rate Card 用户控件作为弹出窗口的内容。
这是我尝试过的:
asp:buttons 使用“onClick”启动服务器端代码以生成费率卡。 然后将其插入到文档中的引导模态代码块中,最后服务器端调用一些 javascript 代码(通过 ClientScript.RegisterStartupScript)显示模态弹出窗口。 这可行,但是每次单击“查看费率”按钮时网页都会重新加载,并滚动回顶部。 如果我尝试检查“isPostBack”并返回如果是,页面仍然会重新加载,而我所拥有的只是 header 和来自我的站点管理员的页脚。
我开始编写代码以将引导模式块放入 asp:UpdatePanel 中,但在阅读了几篇不同的帖子后,页面似乎仍会重新加载。
所以我想要完成的是让用户单击设备名称旁边的一个元素(按钮、链接、label、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 popup class 块:
<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 开始运行之前,页面重新加载正在发生。
这就是我能够使用以下代码完成我需要的事情的方式:
按钮来源:
<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 function 'ShowRates(this)'。 这个 function 从属性中提取assetid,然后调用服务器端方法'ShowRates',将assetid 传递给它。 此方法创建价目表用户控件并返回包含该用户控件的原始 html 代码的字符串。 (这使用了 C# 的 control.RenderControl 方法来获取 html。)
Once the JavaScript function received the html code from the server, it then called JavaScript function 'ShowRatesPopup' and passed the html code to it. 此 function 将 html 代码插入“popupBody”,然后调用模态弹出窗口“#myModal”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.