javascript - Jquery:带有输入字段的 Colorbox 弹出窗口。如何在 ASP.NET 中使用用户控件捕获输入并将其保存回页面

标签 javascript jquery asp.net vb.net colorbox

下面是我的舞台

  • vb.net
  • 母版页
  • 具有已定义事件的用户控件

这就是我的用户控件的样子:

enter image description here

当用户单击“批准”按钮时,会在用户控件中触发一个事件,然后在主页中拦截该事件以执行自定义代码(数据库更新、邮件等...)

这是代码(在用户控件中)-完美运行

Protected Sub approvedcsiclicked()
RaiseEvent DCSIdecisionEvent(1)
dcsimanagerstatus = 1
showhidedcsibuttons(False)
dcsidate = String.Format(System.DateTime.Today.Date, "dd-MMM-YYYY")
dcsidatelbl.Visible = True
End Sub

当用户单击“拒绝”按钮时,我想为用户提供输入一些反馈以了解拒绝原因的可能性。

我希望为此使用 Colorbox 插件。

这就是我在拒绝按钮点击下得到的结果。-这也有效,我的 Colorbox 被解雇了。

Protected Sub denydcsiclicked()
    Page.ClientScript.RegisterStartupScript(Me.GetType, "showerror", "showdenialdcsi();", True)
    dcsimanagerstatus = 2
    showhidedcsibuttons(False)
    dcsidate = String.Format(System.DateTime.Today.Date, "dd-MMM-YYYY")
    dcsidatelbl.Visible = True
End Sub

enter image description here

问题仍然是:如何将输入数据返回到我的表单中,以便我可以在引发自定义事件之前保存并处理它。 用户在 Colorbox 插件中单击“确定”后,将引发 CustomEvent - 请参阅底部的代码 - 它会在隐藏按钮上执行“单击”。

  Protected Sub Hiddenbutton_Click(sender As Object, e As System.EventArgs) Handles Hiddenbutton.Click
    'this hidden button click is to raise the event of the dcsi denial
    'we can not do it normally as we need to capture first the denyreason and then raise the event
    DcsiDenyreason = denialreasonlbl.Text
    RaiseEvent DCSIdecisionEvent(2)
End Sub

当我进行调试时,我可以看到我的主页和用户控件都正在加载和卸载

Usercontrol init: 11/08/2011 21:06:56
main Page Load : 11/08/2011 21:06:56
Main page postback : 11/08/2011 21:06:58
Usercontrol postback: 11/08/2011 21:06:58
Usercontrol unLoad : 11/08/2011 21:06:58
Main page unload : 11/08/2011 21:06:58

此时 Colorbox/Jquery 弹出窗口显示。

我可以键入数据,但如何保存它,这样当自定义事件被触发时,我仍然知道键入的内容?

这是我在代码隐藏中的弹出脚本。

If Not (cs.IsClientScriptBlockRegistered(clientscripttype, clientscriptname)) Then
        Dim myscript As New StringBuilder
        myscript.Append("<script type='text/javascript'> ")
        myscript.AppendLine("function showdenialdcsi()  ")
        myscript.AppendLine("{  ")
        myscript.AppendLine(" $(document).ready(function() ")
        myscript.AppendLine("                              {  ")
        myscript.AppendLine("                              $.colorbox({width:'50%' , inline: true, escKey:false, overlayClose:false, href: '#Denialreason', onLoad: function ()")
        myscript.AppendLine("                                                {")
        myscript.AppendLine("                                                $('#cboxClose').remove();")
        myscript.AppendLine("                                                }")
        myscript.AppendLine("                                         });")
        myscript.AppendLine("                               $('[id$=titleOK]').live('click', function (e) ")
        myscript.AppendLine("                                   {")
        myscript.AppendLine("                                   javascript: raisevent(); ")
        myscript.AppendLine("                                   $.fn.colorbox.close();")
        myscript.AppendLine("                                   });")
        myscript.AppendLine(" ")
        myscript.AppendLine(" function raisevent() ")
        myscript.AppendLine(" { ")
        myscript.AppendLine("   var o=document.getElementById('unchangedHidden').getAttribute('value');")
        myscript.AppendLine("   document.getElementById(o).click(); ")
        myscript.AppendLine(" } ")
        myscript.AppendLine("                               }")
        myscript.AppendLine("                   );")
        myscript.AppendLine("}  ")
        myscript.Append(" </script> ")
        cs.RegisterClientScriptBlock(clientscripttype, clientscriptname, myscript.ToString, False)
    End If

这是颜色框的 html

<div style='display: none'>
    <div id='Denialreason' style='padding: 10px; background: #fff;'>
        <h3>
            <font color="red"><strong>Denial Reason ? :</strong></font>
        </h3>
        <p style="font-size: larger">
                        Please enter the reason. This will go back to the user. <br /> 
                        <asp:textbox ID="denialreasontxt" runat="server" Font-Bold ="true"  TextMode="MultiLine" Rows="4" Columns="50"></asp:textbox>         <br />
        </p>
        <br />
        <div class="Center_300">
            <asp:Label ID="titleOK" runat="server" CssClass="OverviewLabelGray" Width="200"><span>OK</span></asp:Label>
        </div>
    </div>
 </div>
 <a href="#" class="Denialclass" id="urlnotassigned" runat="server"></a> 

<input type="hidden" id="unchangedHidden" value="<%=Hiddenbutton.ClientID%>" />
<asp:Button ID="Hiddenbutton" runat="server" Text="" />

最佳答案

这就是我在经过一些尝试和错误后修复它的方法。

a) 代码隐藏中的弹出脚本更改为

If Not (cs.IsClientScriptBlockRegistered(clientscripttype, clientscriptname)) Then
        Dim myscript As New StringBuilder
        myscript.Append("<script type='text/javascript'> ")
        myscript.AppendLine("function showdenialdcsi()  ")
        myscript.AppendLine("{  ")
        myscript.AppendLine(" $(document).ready(function() ")
        myscript.AppendLine("                              {  ")
        myscript.AppendLine("                              $.colorbox({width:'50%' , inline: true, escKey:false, overlayClose:false, href: '#Denialreason', onLoad: function ()")
        myscript.AppendLine("                                                {")
        myscript.AppendLine("                                                $('#cboxClose').remove();")
        myscript.AppendLine("                                                }")
        myscript.AppendLine("                                         });")
        myscript.AppendLine("                               $('[id$=titleOK]').live('click', function (e) ")
        myscript.AppendLine("                                   {")
        myscript.AppendLine("                                   var a= $('[id$=denialreasonlbl]');")
        myscript.AppendLine("                                   var b= $('[id$=denialreasontxt]');")
        myscript.AppendLine("                                   a.val(b.val().substring(0,150)) ; ")
        myscript.AppendLine("                                   javascript: raisevent(); ")
        myscript.AppendLine("                                   $.fn.colorbox.close();")
        myscript.AppendLine("                                   });")
        myscript.AppendLine(" ")
        myscript.AppendLine(" function raisevent() ")
        myscript.AppendLine(" { ")
        myscript.AppendLine("   var o=document.getElementById('unchangedHidden').getAttribute('value');")
        myscript.AppendLine("   document.getElementById(o).click(); ")
        myscript.AppendLine(" } ")
        myscript.AppendLine("                               }")
        myscript.AppendLine("                   );")
        myscript.AppendLine("}  ")
        myscript.Append(" </script> ")
        cs.RegisterClientScriptBlock(clientscripttype, clientscriptname, myscript.ToString, False)
    End If

b) 拒绝按钮点击更改为

Protected Sub denydcsiclicked()
  Page.ClientScript.RegisterStartupScript(Me.GetType, "showerror", "showdenialdcsi();", True)
End Sub

c) (隐藏的)javascript 点击事件更改为

Protected Sub Hiddenbutton_Click(sender As Object, e As System.EventArgs) Handles Hiddenbutton.Click
    'this hidden button click is to raise the event of the dcsi denial
    'we can not do it normally as we need to capture first the denyreason and then raise the event
    dcsimanagerstatus = 2
    managerstatus = -1
    showhidedcsibuttons(False)
    showhidemanagerbuttons(False)
    dcsidate = String.Format(System.DateTime.Today.Date, "dd-MMM-YYYY")
    dcsidatelbl.Visible = True
    RaiseEvent DCSIdecisionEvent(2)
End Sub

基本上,当按下 Colorobx 弹出窗口中的“确定”按钮时,我会在 DOM 中搜索 2 个 Id。

Denialreasontxt 是一个位于 Colorbox 弹出窗口中的文本框。这就是我输入原因的地方。 Denialreasonlbl 是主页中的一个标签,我想在其中复制 Colorbox 的值( trim 为 150 个字符)。 由于回发已经发生,Jquery 能够找到这些对象。

技巧是将 denialreasonlbl 指定为隐藏字段,以便它获得的值在回发后仍然存在。

所以,在我的用户控件中,我添加了

<input type="hidden" id="denialreasonlbl" runat="server" />

然后,当我执行 RaiseEvent DcsidecisionEvent(2) 时,它会导致回发。 在主页中,我检查回发该标签是否包含任何值。

            If Not IsDBNull(reader.Item("dcsidenialreason")) Then
                Approvalpanel.dcsidenyreason = reader.Item("dcsidenialreason")
                Approvalpanel.showdenialdreason()
            Else
                'check if dcsimanager did a denial and the reasontxt is in the postback page
                If Not Approvalpanel.dcsidenyreason = String.Empty Then
                    Approvalpanel.showdenialdreason()
                End If
            End If

宾果游戏!

关于javascript - Jquery:带有输入字段的 Colorbox 弹出窗口。如何在 ASP.NET 中使用用户控件捕获输入并将其保存回页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7031576/

相关文章:

javascript - Soundcloud 播放器小部件在轨道更改时触发事件

asp.net - 在 proc 中使用 sp_executesql 时出现 "select permission denied"错误 (Sql Server 2008)

css - Bootstrap 图标显示不好

javascript - vuejs无法在导航栏中获取vuex值

javascript - 如何从异步调用返回响应?

javascript - JSFiddle 到 HTML 文件

asp.net - Razor 页面 - 如何使用 asp-for 标签助手重定向到另一个文件夹的页面

javascript - Karma + Angular 模拟 TypeError : 'undefined' is not an object (evaluating 'angular.mock = {}' )

jQuery:多选择器问题

javascript - 动画滚动在 Firefox 中不起作用?