如何在不使用 runat="server" 的情况下将 html 输入文本控件设置为在代码后面不可见

Question

我想在不使用 runat="server" 的情况下将输入标签 type="text" 设置为在按钮单击事件中不可见/可见

下面是编码

 $(document).ready(function () {
                SearchText();
            });
            function SearchText()
            {
                $(".autosuggest").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "CalenderDetails.aspx/GetAutoCompleteData",
                            data: "{'Col3':'" + document.getElementById('txtSearch').value + "'}",
                            dataType: "json",
                            success: function (data) {
                                response(data.d);
                            },
                            error: function (result) {
                                alert("Error");
                            }
                        });
                    }
                });
            }
        </script>







    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
                <br />
         <input type="text" id="txtSearch" class="autosuggest" />
                    <asp:UpdatePanel ID="UpdatePanel1"  runat="server" UpdateMode="Conditional" >

                    <ContentTemplate>
                        <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>  &nbsp;&nbsp;&nbsp;

                        <br />
                        <br />
                        <asp:GridView ID="Gr

idView1" runat="server" AllowPaging="True" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound">
                        <HeaderStyle BackColor="#FFCC99" />

                    </asp:GridView>

                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="PageIndexChanging" />
                    <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>

背后的代码

 [WebMethod]
    public static List<string> GetAutoCompleteData(string Col3)
    {
        List<string> result = new List<string>();
        if ((dtClone != null) && (dtClone.Rows.Count > 0))
        {
            DataRow[] foundRows;
            string expression = "Col3 LIKE '%" + Col3 + "%'";

            // Use the Select method to find all rows matching the filter.
            foundRows = dtClone.Select(expression);
            for (int i = 0; i < foundRows.Length; i++)
                result.Add(foundRows[i][2].ToString());
        }
        return result;

    }

如果我使用 runat="server" 我可以让它可见/不可见，但是 ajax 调用将不会执行搜索操作

谁能告诉我如何克服这个问题？

Answer 1

你很难让两个东西一起工作，即runat="server" 和在同一个textbox 上创建ajax call。

您可以使用ClientIDMode="Static"，它不会改变文本框的ID，您将能够发送ajax调用。

<asp:TextBox ID="txtSearch" ClientIDMode="Static"  runat="server"></asp:TextBox>

Answer 2

您可以使用 jquery 并使用以下代码，

function clicked(){
  console.log("sf"+$("#grand").css("visibility"))
  if($("#grand").css("visibility")=="visible"){
$("#grand").css("visibility","hidden");
    }
  else{
$("#grand").css("visibility","visible");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="hello" id="grand">
<input type="button" value="hide/show" onclick="clicked()">

Answer 3

首先，如果您真的不想将 runat="server" 添加到您的按钮。

可以将Web Method应用到Server端是正确的，

在客户端，您可以应用 AJAX 来调用您的 Web 方法。

实现在服务器端隐藏HTML控件，

您可以尝试应用 ScriptManager 和 Jquery，将其添加到 Web 方法中。

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "clientScript", "$(':text').toggle()", true);

在无条件隐藏/显示type="text"的情况下，可以使用toggle。

否则你可以实现你需要的条件并调用

$(':text').show()

或

$(':text').hide()

用于在表单上显示和隐藏控件。