在ASP上执行回发.Net控件通过jQuery动态添加
本文关键字:jQuery 动态 添加 控件 Net ASP 执行 | 更新日期: 2023-09-27 18:13:48
我有一个在ASP.Net下运行的网站。它有许多ascx控件,每个控件代表一个不同的页面。母版页将调用ascx上的LoadControl()
,然后将其添加到面板中。然后,ascx Page_Load()
将个人保存函数与页面上的事件相关联,以便母版页上的"保存"按钮执行正确的操作。
我现在正试图变得更动态,更多地使用jQuery,更多地在客户端做事情。为此,我正在尝试动态加载ascx控件。我们的目标是能够在对每个ascx进行最小更改的情况下做到这一点。我有一个页面,包含以下内容(为简洁而编辑):
<head>
<script language="javascript" type="text/javascript">
function documentMetadataLoad()
{
jQuery.ajax({
type: "GET", //GET
url: "JQueryHandler.ashx?Operation=LoadPage&Name=/UserControls/DocumentManagment/DocumentMetadata.ascx",
dataType: "html",
cache: false,
success: function (response)
{
$('#property_tab').html(response);
},
error: function ()
{
debugger;
$('#property_tab').html('error');
}
});
</script>
</head>
<body id="mainBody" class="bodyClass">
<form id="form1" runat="server">
<div id="btn_save">
<a href="#" id="btnSave" class="topBtnText">Save</a>
</div>
<div>
<div id="tab1" onclick="documentMetadataLoad(); ">Properties</div>
</div>
<div id="property_tab" style="display: Block;"></div>
</form>
</body>
这个页面将动态加载一个名为DocumentMetadata的控件。当用户单击选项卡时,Ascx。(是的,我知道当客户端通过控制路径时可能存在一个巨大的安全漏洞,但这是一个概念验证。)
JQueryHandler将采用给定的路径并生成一个页面。它的ProcessRequest()
看起来像这样:
public void ProcessRequest(HttpContext context)
{
if (context.Request.QueryString["Operation"] == "LoadPage")
{
String strPath = context.Request.QueryString["Name"];
using (TisPage MyPage = new TisPage())
{
HtmlForm f = new HtmlForm();
f.Action = context.Request.UrlReferrer.AbsolutePath;
UserControl userctrl = MyPage.LoadControl(strPath) as UserControl;
f.Controls.Add(userctrl);
MyPage.Controls.Add(f);
context.Server.Execute(MyPage, context.Response.Output, true);
}
}
}
(感谢http://www.infoconcepts.com/rendering-ascx-files-ajax/指示HtmlForm应该包装控件。)TisPage是System.Web.UI的一个子类。页,其中添加了ascx期望的用于保存数据的事件。
现在,我遇到的问题是我想要DocumentMetadata。在用户按下#btnSave时调用它的save函数。这是后面的代码,它希望保留其视图状态。所以我想我必须有一个回发。我不希望重写c#的保存函数,使其成为传入参数的自己的ashx调用;有很多这样的页面,不值得把它们都重写一遍。
我在DocumentMetadata中有以下代码。
设置按钮。$(document).ready(function ()
{
$("#btnSave").bind("click", Save);
});
function Save()
{
debugger;
__doPostBack('ctl00', null);
}
我通过在Javascript中调用__doPostBack()
进行实验,但我随后得到错误:"视图状态MAC的验证失败。如果此应用程序由Web Farm或集群托管,请确保配置指定相同的validationKey和验证算法。不能在集群中使用AutoGenerate。"作为一个实验,我试图从我的网页中删除我的机器密钥配置。配置,但这似乎没有帮助。
是否有一种方法可以使用JavaScript调用加载了jQuery的ascx控件背后的代码?
通过ajax加载.ascx控件与加载字符串相同。它是单向管道,并且该控件没有可用的回发通信。UpdatePanel解决方案也不会起作用(而且它们也很糟糕)。
我的建议是创建客户端模板,使用像Mustache.js这样的东西,然后通过ajax加载JSON数据来填充这些模板,并用ajax与web服务与服务器/数据库通信。通过分离你的代码,它将更容易维护,你将能够重用更多的代码,更好的效率等。
post -back是老派的技术,而UpdatePanels只是ajax的一个令人讨厌的实现。花点时间做正确的事情,为了你的应用和你自己,你会因此变得更好。
如果使用UpdatePanel,您在这里所做的可以更容易地完成。它通过部分回发在客户端工作,并且保留了ASP页面生命周期。你可以包装你的#property_tab
和#btnSave
与UpdatePanels和管理回发事件服务器端。