好的,这就是您回帖的方式 - 单击一个按钮以在后面运行您的代码。
我们将一步一步地进行布局。
我们假设,您单击表单上的一个按钮,它会启动 jQuery 对话框?在这里更重要的是,这“是”实际上是您的这种形式的流程。
因此,我将假设用户单击一个按钮,然后启动对话框。
(并避免该文档准备就绪。请转储它)。
现在显示对话框。在该对话框中,我们假设用户输入数据,执行任何操作,然后单击按钮确定,或者单击按钮取消?
接下来:
您不能在该对话框中执行/使用 asp.net 按钮进行回发。它不会起作用——故事结束!
如果您确实让帖子恢复工作,它会弄乱您当前的页面“dom”,该页面包含当前网页以及对话框。它只是不起作用——不要这样做,好吗?
(所以该对话框中没有回帖!!)
但我们仍然可以很高兴地完成这项工作!!!
那么,我们如何在对话框中设置一个按钮?
假设您需要单击对话框内的按钮?
按钮必须是客户端 JavaScript (js)。
该按钮将:
关闭对话框,然后回帖。
所以,我们因此需要这个流程:
单击按钮时显示对话框(客户端 js)。
用户在该对话框中执行任何操作。
用户现在点击一个按钮(说确定,或取消)。
为了发疯,我们可以并且愿意吗?我们将放在表单上并使用标准的 asp.net 按钮。确实没有必要采用 HTML“输入”按钮。 (可以,但这里没有真正需要)。
我将在该对话框中使用内置的 jQuery 按钮和两个标准按钮(原因很多,但这样你可以选择任何一种方式,然后学习这个。(男孩,我和某人一起布置过吗?这对我有什么用!!!)。所以,我要在这里为你省去很多痛苦。
所以,让我们从顶部开始:
弹出对话框的按钮代码。
asp 按钮是这样的:
<asp:Button ID="showdialog" runat="server" Text="Show the dialog"
OnClientClick="showpop();return false;"/>
注意在上面!!!!
我们使用 OnClientClick=showpop();return false。
因此,这将运行 js 代码,而不是回发。 return = false 在这里非常重要,因为如果你忽略它,那么标准的 asp 按钮将像“正常”一样返回。我们打破了我们的新规则!! – 对话框内没有回帖!!。
好的,这就是启动对话框的按钮。
启动弹窗的js代码和你的类似。
例如:
function showpop() {
var mydiv = $('#popdialog');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool dialog, width: '30%'
});
// Open the dialog
mydiv.dialog('open');
}
现在,对于这个示例,我们假设您在该对话框中放置了一些标准的 asp 按钮。但是,您经常想使用内置的对话框按钮。所以让我们为这个例子做两个。
所以,上面的代码就变成了这样:
function showpop() {
var mydiv = $('#popdialog');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': mycustomok,
'cancel': mycustomcancel
}
});
// Open the dialog
mydiv.dialog('open');
}
注意我们添加的两个内置按钮。 (好的,然后取消)。
请注意我是如何打破“设置”的,然后是弹出对话框的那一行。
在我们的弹出 div 中,我们还有两个自定义按钮。如前所述,我包括自定义和内置对话框。这将花费你“几个小时”来获得很好的例子,现在你可以选择任何一条道路。
所以,我们的 div 有一些文本、两个自定义按钮和一个简单的文本框。
div 看起来像这样:
<div id="popdialog" runat="server" style="display:none">
<h2>My cool pop dialog</h2>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="MyOk" runat="server" Text="My custom ok"
OnClientClick="mycustomok();return false;"/>
<br />
<asp:Button ID="MyCancel" runat="server" Text="My custom cancel"
OnClientClick="mycustomcancel();return false;"/>
</div>
上面唯一需要注意的是整个“div”的 style=”display:none”。因此,这将隐藏 div,并且在页面加载时不会显示。
所以,当我们点击按钮时,它会显示对话框。你会看到这个:
所以,我们有两个自定义按钮,还有两个 jQuery 按钮。如果您不想要内置的,请使用我的第一个示例代码。正如我所说,您可以选择您想要、喜欢或感觉要在此处使用的按钮。重点是两组按钮的作用相同。
因此,对于此示例,您单击“确定”或“我的自定义确定”。
无论哪种方式?我们希望我们的帖子能够支持该选择。
对于我的自定义取消或内置取消,我们希望后面的代码(服务器代码)针对该取消选择运行。请记住,您通常不需要任何代码 - 只需关闭并取消对话框,什么也不做。
因此,我们为此拥有的两个 js 存根是:
function mycustomok() {
// first, close the dialog
$('#popdialog').dialog('close');
#('#HiddenOk').click();
}
function mycustomcancel() {
// first, close the dialog
$('#popdialog').dialog('close');
$('#HiddenCancel').click();
}
如前所述,如果您对对话框使用 BUILT IN 按钮,那么您不需要我上面提到的对话框的“关闭”。但是您使用(我们假设)自定义按钮,而不是内置的 jQuery 按钮。
如上所述,根据任一选择,我们将进行回发并在后面运行代码。正如我所说,最简单的方法是在表单上放置两个隐藏按钮,它们看起来像这样,当然我们在上面的 div 之外
<asp:Button ID="HiddenOk" runat="server" Text="hidden ok"
style="display:normal"/>
<asp:Button ID="HiddenCancel" runat="server" Text="hidden cancel"
style="display:normal"/>
注意小心(注意这里的BEYOND小心)。
我有两个按钮的 display = normal 。原因是您可以使用设计器双击按钮,然后在后面编写代码。当您完成并编写了存根后面的代码后,将上面的 display:normal 更改为 display:none 以隐藏它们。所以我们让按钮可见以便于开发。一旦你连接了后面的代码(只需双击设计器中的按钮),你就会跳转到编辑器后面的代码,并且可以编写该代码。
我现在有这个:
Protected Sub HiddenOk_Click(sender As Object, e As EventArgs) Handles HiddenOk.Click
Debug.Print("dialog ok code run")
End Sub
Protected Sub HiddenCancel_Click(sender As Object, e As EventArgs) Handles HiddenCancel.Click
Debug.Print("dialgo cancel code")
End Sub
当然,你可以写任何你需要的东西。如前所述,您可能不需要任何取消按钮的代码——如果您愿意,您可以将其排除在此设计之外。
因此,为您自动连接了两个代码子(这就是我们都喜欢 asp.net 表单的原因,对吗???)。
上面提到的“点击”按钮技巧相当不错。它解决了一长串问题,而且非常轻松。
您会收到所需的帖子。
你可以在后面运行你自己可爱的小代码存根。
您不必编写 ajax 调用来执行此操作!!!
因此,这遵循了整个 asp.net 设计模式,您将按钮放在表单上,单击它们,然后您就可以在存根后面运行那个漂亮的小短代码。一切都会自动为您连接起来。
总结如下:
不要在对话框中尝试 + 尝试回帖——你真的不能这样做。
而且你发现它们无论如何都不起作用!所以该对话框上的按钮将运行“js”代码。
如果需要,您可以使用 asp 按钮,只需记住额外的 return=false 部分。
如果您必须在关闭之前在该对话框中设置/发送一些信息到服务器?嗯,这是一个不同的问题和答案。但是jQuery“ajax”方法真的很好用,你可以直接在你现有的网页代码后面调用函数,而且不费吹灰之力。您甚至不必知道如何设置 Web 方法 - asp.net 将完成所有繁琐的工作。但让我们再举个例子吧。
试试上面的想法 - js 中的“点击”按钮技巧确实是让这一切变得非常容易编写和设置的神奇关键。