Question

我正在使用jQuery + asp.net webforms，我也在使用jQuery Validation插件和Fancybox插件。当我单独使用插件时，我的代码工作正常。我的网络表单供用户注册。

我使用验证插件在提交到服务器之前验证我的表单，当用户单击asp.net图像按钮（表示为输入类型=“图像”html标记，ID =时，表单被验证并提交） “btnSave”）。它已按预期工作。

fancybox插件用于显示pdf文档，该文档在另一个webform上以dinamically方式生成。它在用户单击锚点（“a”元素，ID =“btnShowFancybox”）时有效。

我想在用户点击按钮btnShowFancybox时使用验证插件验证表单，如果验证成功，则显示fancybox以显示pdf文档。如果验证失败，我想向用户显示消息（警报）。我无法实现此功能。

这就是我已编码的内容：

HEAD：

   <script  type="text/javascript">
      jQuery(document).ready(function() {
         jQuery("#aspnetForm").validate({
            //commented for simplicity
         });
      });
   </script>
</head>

FORM：

<asp:ImageButton ID="btnSave" runat="server" ImageUrl="~/content/img/save.png" 
   OnClick="btnSave_Click" 
   OnClientClick="return jQuery('#aspnetForm').validate().form();" />

<a id="btnShowFancybox" class="iframe" href="generatePDF.aspx">
   <img src="content/img/showPDF.png" />
</a>

我需要在用户点击btnShowFancybox之后实现表单验证，如果验证失败则不显示fancybox。我试过这个：

//changed href attribute of btnShowFancybox to "#", and inserted this code 
//after: jQuery(document).ready(function() {
//and before: jQuery("#aspnetForm").validate({
//what I'm trying to do here is to set the proper href only if form is valid, 
//then to call my fancybox to show pdf to the user, because the call to .fancybox didn't work I tried trigger the click event directly. and.. didn't work.
jQuery("#btnShowFancybox").click(function (e) {
            var validForm = jQuery('#aspnetForm').validate().form();
            alert(validForm);
            if(validForm) {
                jQuery("#btnShowFancybox").attr("href", "generatePDF.aspx");
                jQuery("#btnShowFancybox").fancybox({
                    'frameWidth' : 1000, 
                    'frameHeight': 700, 
                    'overlayShow': true, 
                    'hideOnContentClick': false
                });
                jQuery("#btnShowFancybox").fancybox().trigger('click');
            }
            else {
                alert("form is not valid");
                jQuery("#btnShowFancybox").attr("href", "#");
            }
        });

我还尝试创建一个JS函数并设置btnShowFancybox的onclick属性来调用这个函数。该函数验证了表单，如果成功尝试了jQuery（“＃btnShowFancybox”）。fancybox（...，但它既不起作用。只是为了澄清，btnSave不应该显示fancybox，只有btnShowFancybox应该。

请帮助......

Answer 1

this question有很多答案会为您提供我想要的答案。

我通过向提交控件的'onclientclick'属性添加额外函数并手动触发Web表单验证功能来解决问题。

提交按钮的示例如下：

<asp:button id="btnSearch" runat="server" text="Search" validationgroup="SearchForm" onclientclick="javascript: TriggerValiation();" causesvalidation="true" onclick="btnSearch_OnClick" />

我的触发器验证功能如下所示：

function TriggerValiation() 
{
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("<%= btnSearch.ClientID %>", "", true, "SearchForm", "", false, false));
    if (Page_IsValid) 
    {
        $.fancybox
        ({
            'titleShow': false,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'showCloseButton': false,
            'content': 'Searching...'
        });
    }
}

我希望这会有所帮助。丹。

Answer 2

谢谢Danny，我最终使用了jQuery UI Dialog，当我有机会审核你的提议时。为了记录，我解决了我的问题如下。

BODY：

<div id="printDialog" title="Printed record">
    <div id="iframeContainer" style="width: 100%; height: 95%;">
    </div>
</div>

打印按钮的代码背后：

string js= @"
jQuery(function() {
    jQuery(""#iframeContainer"").html(""<iframe src='Print.aspx' width='100%' height='100%'></iframe>"");
    var dlg = jQuery('#printDialog').dialog({ show: 'fold', hide: 'blind', width: '85%', height: 450, minHeight: 400, minwidth: 700, modal: true, autoOpen: false, zIndex: 9998 });
    dlg.parent().appendTo(jQuery('form:first'));
    jQuery('#printDialog').dialog('open');
});
";
ScriptManager.RegisterStartupScript(this, typeof(Page), "showDialog", js, true);

表单验证成功后显示Fancybox

2 个答案: