'OnTextChanged' 触发时停止模式关闭答案

【问题标题】：Stop Modal Closing When 'OnTextChanged' Fires'OnTextChanged' 触发时停止模式关闭
【发布时间】：2015-11-11 12:57:13
【问题描述】：

我有一个 asp.net webform 应用程序，用户单击一个按钮，然后显示一个包含 3 个字段的模式。我添加了一个OnTextChanged 和AutoPostBack="true"，因为我有代码检查第一个输入的名称当前是否存在。但是，当我标记出该字段时，我的模式关闭了，我需要它保持打开状态。

我有一个非常相似的情况，手风琴是由 Jquery 和 asp:HiddenField 工作的，但我尝试更改代码无济于事。

模态的部分 HTML

<div class="form-group">
     <asp:Label ID="lblPlace" runat="server" Class="col-sm-3 control-label" Text="Place" AssociatedControlID="fldPlace" />
     <div class="col-sm-6">
          <asp:TextBox ID="fldPlace" runat="server" class="form-control" AutoPostBack="true" OnTextChanged="fldPlace_TextChanged" />
     </div>
</div>

我用于手风琴的代码是

HTML

<asp:HiddenField runat="server" ID="toKeepRemoveAccordionOpen" />
<div class="form-group">        
     <asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
     <div class="col-sm-3">
          <asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" AutoPostBack="true" OnTextChanged="txtRemoveUser_TextChanged" />
     </div>
</div>

JQuery

$('document').ready(function ()
{
    var hdnFldId = '<%= toKeepRemoveAccordionOpen.ClientID %>';
    $("#MainContent_txtRemoveUser").on("blur", function ()
    {
        //Sets value of hidden field to show panel after postback
        $('#' + hdnFldId).val(true);
    });

    if ($('#' + hdnFldId).val() == 'true')
    {
        showPanel();
        // Resets the value
        $('#' + hdnFldId).val(false);
    }

    function showPanel()
    {
        if ($('#MainContent_txtRemoveUser').val() != '')
        {
            $('.panel-collapse').removeClass('collapse').addClass('in');
        }
    }
});

我确实尝试了以下JQuery

$('document').ready(function () {
            var hdnFldId = '<%= toKeepRemoveAccordionOpen.ClientID %>';
            $("#MainContent_fldPlace").on("blur", function () {
                //Sets value of hidden field to show panel after postback
                $('#' + hdnFldId).val(true);
            });

            if ($('#' + hdnFldId).val() == 'true') {
                showPanel();
                // Resets the value
                $('#' + hdnFldId).val(false);
            }

            function showPanel() {
                if ($('#MainContent_fldPlace').val() != '') {
                    //$('.modal').addClass('in');
                    $('.modal').removeClass('fade').addClass('fade in');
                }
            }
        });

模态框的主类是modal fade，当它显示时它变为modal fade in。

【问题讨论】：

尝试将整个元素包装在 updatePanel 中，然后在模式中添加带有输入元素 ID 的 postbacktrigger

标签： javascript jquery asp.net webforms

【解决方案1】：

我建议您使 AutoPostBack="false" 并在 OnTextChanged 上对 WebMethod 进行 ajax 调用（检查第一个输入的名称当前是否存在的代码）以避免添加 UpdatePanel 并在每个部分重新打开您的模态回发

您可以在此处查看如何将数据发布到 WebMethod http://www.aspsnippets.com/Articles/jQuery-AJAX-call-with-parameters-example-Send-parameters-to-WebMethod-in-jQuery-AJAX-POST-call.aspx

【讨论】：

【解决方案2】：

要在回发后重新打开模式，您可以使用隐藏字段并根据其值决定是否重新打开模式。假设您使用的是引导模式，代码可能类似于以下内容：-

if ($('#' + hdnFldId).val() ==  "true") {
   $('#myModal').modal('show');
   $('#' + hdnFldId).val(false);
}

上述方法的问题在于显示模态时涉及动画（淡入）。该动画将在每次回发后对用户可见。

为了克服这个问题，我们可以使用以下代码：

if ($('#' + hdnFldId).val() ==  "true") {
   $('#myModal').addClass("in").attr("aria-hidden", false).css("display", "block");
   $('#myModal').modal('show');   //This will take care of adding all the other elements and classes which modal uses.
   $('#' + hdnFldId).val(false);
}

更好的选择是按照Aleksey 的建议使用webmethod。

【讨论】：

【解决方案3】：

将以下内容添加到我的aspx 页面

JQuery

function keepOpenSuggestPlaceModal()
{
    $('#placesModal').modal('show');
}

并在后面的代码中将以下内容添加到我的函数调用中

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "keepOpenSuggestPlaceModal();", true);

【讨论】：