How to set html input text control as invisible at code behind with out using runat="server"

Question

I want to set input tag type="text" as invisible/visible on button click event with out using runat="server"

Below is what is coded

 $(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>

Code behind

 [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;

    }

If I use runat="server" I am able to make it visible/invisible but then ajax call will not perform for search operation

Can any body tell how to overcome this problem?

Answer 1

You are having difficulty to get two things working together which is runat="server" and making ajax call on same textbox.

You can use ClientIDMode="Static" which will not change id of textbox and you will be able to send ajax call.

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

Answer 2

you could use jquery and use the following code,

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

Firstly, if you really dont want to add runat="server" to your button.

it is correct you can apply Web Method to the Server side,

and in the client side, you can apply AJAX to call your web method.

To achieve hiding the HTML control in the server side,

You can try apply ScriptManager and Jquery, by adding this to the Web Method.

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

in case of hiding/showing type="text" without condition, it is okay to use toggle.

Otherwise you may implement your required condition and call

$(':text').show()

or

$(':text').hide()

for showing and hiding your controls on the form.