当 'OnTextChanged' 触发时停止模态关闭

Question

我有一个 asp.net 网络表单应用程序，用户单击一个按钮，然后显示一个包含 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');
                }
            }
        });

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

Answer 1

我建议您设置 AutoPostBack="false" 并在 OnTextChanged 上设置 ajax 调用 WebMethod（后面的代码检查第一个输入的名称当前是否存在）以避免添加 UpdatePanel 并重新打开您的模式每个部分 postback

你可以在这里看到如何 post 数据到 WebMethod http://www.aspsnippets.com/Articles/jQuery-AJAX-call-with-parameters-example-Send-parameters-to-WebMethod-in-jQuery-AJAX-POST-call.aspx

Answer 2

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

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。

Answer 3

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

JQuery

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

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

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

当 'OnTextChanged' 触发时停止模态关闭

Stop Modal Closing When 'OnTextChanged' Fires

javascript

asp.net

jquery

webforms