Фильтр GridView на событии нажатия клавиши TextBox из кода позади

у меня есть текстовое поле с событием нажатия клавиш, и я хочу отфильтровать GridView на этом событии с помощью jquery/javascript.

<asp:TextBox ID="txtSearch" runat="server" OnKeyPressed="txtSearch_KeyPressed()">
</asp:TextBox>

<script>
  function txtSearch_KeyPressed()
  {
      // gvBanquet is an ID of GridView and SearchBanquet method returns a DataTable
      gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
      gvBanquet.DataBind();
  }
</script>

обратите внимание, что код привязки GridView от .CS:

gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();

Я не знаю, как это будет работать? Он должен привязываться при нажатии клавиши TextBox.

Edit: я нашел сайт сервера решений OnTextChanged событие TextBox, которое связывает GridView после нажатия Enter нажатия клавиши.

<asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged" 
    AutoPostBack="True" ></asp:TextBox>

protected void txtSearch_TextChanged(object sender, EventArgs e)
{
    gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
    gvBanquet.DataBind();
}

Я не хочу его с событием OnTextChanged, но я думаю, что он будет работать на событии keypressed с помощью JavaScript или jQuery так я не знаю, как это сделать?

обновление: я попытался ниже кода jQuery нажать клавишу в текстовом поле, но он также не работает.

$(document).ready(function () {

    $('#txtSearch').on("keyup", function () {
        // could bind bind GridView here??
        e.preventDefault();
    })
})

Примечание: GridView и TextBox оба находятся внутри элемент UpdatePanel.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>

  <div class="col-lg-4" style="padding-right:0px">
      <asp:TextBox ID="txtSearch" Width="100%" CssClass="form-control" placeholder="Search..." runat="server"></asp:TextBox>
      <input id="inpHide" type="hidden" runat="server" />
  </div>
</div>
<!-- /.col-lg-12 -->

  <div class="col-lg-12 table-responsive">
  <asp:GridView ID="gvBanquet" CssClass="table table-striped table-bordered table-hover" runat="server" 
      AutoGenerateColumns="false" OnRowCommand="gvBanquet_RowCommand" AllowPaging="True" PageSize="5" 
      EmptyDataText="No record found!" OnPageIndexChanging="gvBanquet_PageIndexChanging" ShowHeaderWhenEmpty="true"
      >
      <Columns>
          <asp:TemplateField HeaderText="Banquet Name">
              <ItemTemplate>
                  <asp:Label ID="lblID" runat="server" Visible="false" Text='<% #Eval("bqtID") %>'></asp:Label>
                  <asp:Label ID="lblName" runat="server" Text='<% #Eval("bqtName") %>' ></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="User Name">
              <ItemTemplate>
                  <asp:Label ID="lblUserName" runat="server" Text='<% #Eval("bqtUserName") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Type">
              <ItemTemplate>
                  <asp:Label ID="lblType" runat="server" Text='<% #Eval("bqtType") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Capacity">
              <ItemTemplate>
                  <asp:Label ID="lblCapacity" runat="server" Text='<% #Eval("bqtCapacity") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Password">
              <ItemTemplate>
                  <asp:Label ID="lblPassword" runat="server" Text='<% #Eval("bqtPassword") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Email">
              <ItemTemplate>
                  <asp:Label ID="lblEmail" runat="server" Text='<% #Eval("bqtEmail") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Phone">
              <ItemTemplate>
                  <asp:Label ID="lblPhone" runat="server" Text='<% #Eval("bqtPhone") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Cell No.">
              <ItemTemplate>
                  <asp:Label ID="lblContactNo" runat="server" Text='<% #Eval("bqtContactNo") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Location">
              <ItemTemplate>
                  <asp:Label ID="lblLocation" runat="server" Text='<% #Eval("bqtLocation") %>'></asp:Label>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField>
              <HeaderTemplate>
                  <center>Events</center>
              </HeaderTemplate>
              <ItemTemplate>
                  <asp:Button ID="btnStatus" runat="server" CssClass="btn btn-primary btn-sm" CommandName="Status" Text='<%# Eval("bqtStatus") %>' />
                  <asp:Button ID="btnEdiit" runat="server" CssClass="btn btn-danger btn-sm" CommandName="EditRow" Text="Edit" />
                  <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger btn-sm" CommandName="DeleteRow" Text="DELETE" />
              </ItemTemplate>
          </asp:TemplateField>
      </Columns>
      <HeaderStyle BackColor="#5cb85c" BorderColor="#4CAE4C" ForeColor="White"></HeaderStyle>
      <PagerStyle CssClass="pagination-ys" />
  </asp:GridView>
     <asp:Label ID="lblNoRecords" runat="server" Text="No Record Found!"></asp:Label>
    </div>
    <!-- /.col-lg-12 -->

    </ContentTemplate>
</asp:UpdatePanel>
8
asp.net c# gridview javascript jquery

8 ответов

можно использовать OnTextChanged вместо OnKeyPressed а также AutoPostBack="True"на textbox, и вы можете делать все, что хотите в коде за файлом, он работает правильно.

   <asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_Changed()" 
    AutoPostBack="True"> </asp:TextBox>

C# Код

Текст Изменен

public void txtSearch_Changed(object sender, EventArgs e)
{
    gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
    gvBanquet.DataBind();
}

редактировать

На EveryKeyPress

ASPX

      <asp:TextBox ID="txtSearch" runat="server"  
    AutoPostBack="True"> </asp:TextBox>
 <script>
    $("#<%=txtSearch.ClientID%>").keypress(function () {
        console.log("Handler for .keypress() called.");
        __doPostBack(this.name, 'OnKeyPress');
    });
</script>

C#

protected void Page_Load(object sender, EventArgs e){
    var ctrlName = Request.Params[Page.postEventSourceID];
    var args = Request.Params[Page.postEventArgumentID];

    if(ctrlName == txtSearch.UniqueID && args == "OnKeyPress"){
        MyTextBox_OnKeyPress(ctrlName, args);
    }
}

private void MyTextBox_OnKeyPress(string ctrlName, string args){
    //your code goes here
}
4

Я надеюсь, что это решение поможет, хотя его немного отличается от фактического метода, который вы использовали. Делать внимательно и если какие-либо изменения необходимы, не стесняйтесь комментировать. Сначала вам нужно использовать библиотеку CDN jquery в следующем разделе: (на всякий случай, если люди еще не использовали ее)

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

создайте кнопку внутри панели обновления (ту же самую, содержащую gridview) и сделайте ее невидимой, используя css не из видимого атрибута, используемого в asp.net как это:

 <asp:button ID="InvisButton" runat="server" style="display:none;" OnClick="InvisButton_Click" />

кнопка используется для запуска кода на стороне сервера, чтобы иметь возможность привязать GridView в (pagemethods или webmethods не позволяют использовать члены экземпляра, так как он использует общие функции.

поместите текстовое поле вне панели обновления и удалите autopostback=true(если вы его используете).

В конце тела используйте следующий код:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=txtSearch.ClientID%>').bind('keyup', function () {
            alert($('#<%=txtSearch.ClientID%>').val());
            $('#<%=InvisButton.ClientID%>').click();

        });
    });

</script>

код jquery используется для привязки события keyup ( аналогично ключу нажата, но после этого нажата клавиша) к определенной функции, где вы можете делать любой код, который хотите. Однако, $('#InvisButton').click () используется для запуска кода на стороне сервера кнопки с указанным идентификатором или его обработчиком событий click. в моем случае я использовал простой код, в вашем случае, возможно, вы могли бы использовать его следующим образом:

protected void InvisButton_Click(object sender, EventArgs e)
{
// place your wanted code here
gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();
}

Примечание:

Извините, если какие-либо ошибки функции происходят, я попытался преобразовать из vb.net на C# и изменение идентификаторов.

6

Вы можете использовать функцию WebMethod для вызова данных фильтра Такой

private static int PageSize = 5;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDummyRow();
    }
}

private void BindDummyRow()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("CustomerID");
    dummy.Columns.Add("ContactName");
    dummy.Columns.Add("City");
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();
}

[WebMethod]
public static string GetCustomers(string searchTerm, int pageIndex)
{
    string query = "[GetCustomers_Pager]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@SearchTerm", searchTerm);
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
    cmd.Parameters.AddWithValue("@PageSize", PageSize);
    cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    return GetData(cmd, pageIndex).GetXml();
}

private static DataSet GetData(SqlCommand cmd, int pageIndex)
{
    string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Customers");
                DataTable dt = new DataTable("Pager");
                dt.Columns.Add("PageIndex");
                dt.Columns.Add("PageSize");
                dt.Columns.Add("RecordCount");
                dt.Rows.Add();
                dt.Rows[0]["PageIndex"] = pageIndex;
                dt.Rows[0]["PageSize"] = PageSize;
                dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                ds.Tables.Add(dt);
                return ds;
            }
        }
    }
}

его вызвали .aspx-страницы

     function GetCustomers(pageIndex) {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetCustomers",
            data: '{searchTerm: "' + SearchTerm() + '", pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }

Дополнительные Ссылки: https://www.aspsnippets.com/demos/685/

4

измененный текст будет работать только при использовании AutoPostBack = true

AutoPostBack = true разрешает управление для отправки обратно на сервер. Он связан с событием.

<asp:TextBox ID="txtSearch" runat="server" AutoPostBack = "true"  OnTextChanged="txtSearch_TextChanged" >
</asp:TextBox>

protected void txtSearch_TextChanged(object sender, EventArgs e)
{
    gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
    gvBanquet.DataBind();
}

Edit:

На EveryKeyPress

ASPX

 <asp:textbox id="MyTextBox" runat="server" 
onkeypress="__doPostBack(this.name,'OnKeyPress');" ></asp:textbox>

C#

protected void Page_Load(object sender, EventArgs e){
    var ctrlName = Request.Params[Page.postEventSourceID];
    var args = Request.Params[Page.postEventArgumentID];

    if(args == "OnKeyPress"){
        gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
         gvBanquet.DataBind();
    }
}
3

вам не хватает селектора идентификаторов, замените пример кода на этот 

$(document).ready(function () {

$('#txtSearch').on("keyup", function () {
    // could bind bind GridView here??
    e.preventDefault();
})

})

3

вы не можете фильтровать текстовое поле с помощью jQuery, заразить .Не удалось вызвать элемент управления ASPX .Код CS из jQuery / Javascript. Вы можете достичь этого, добавив UpdatePanel в свой .Код ASPX, а затем добавить тег AutopostBack=True.

3
  1. заменить: OnKeyPressed="txtSearch_KeyPressed()" С: AutoPostBack="true"
  2. Просмотр кода aspx в режиме разработки (где вы видите свой пользовательский интерфейс.)
  3. дважды щелкните текстовое поле.

  4. добавьте эти 2 строки для привязки в автоматически созданный метод:

    gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
gvBanquet.DataBind();

в принципе, каждый раз, когда символ вставляется в текстовое поле, будет происходить обратная передача, и новый метод, автоматически созданный visual studio, будет выполняться (что, если вы вставленный код свяжет данные).

*если вы привязываетесь к базе данных каждый раз, ваш код будет съедать память и будет очень медленным (скорее загружается с помощью Angularjs).

3

используется это '#<%=txtSearch.ClientID%>' синтаксис для идентификаторов элементов управления asp в jQuery вместо '#txtSearch'.

  • добавить этот скрипт:

    <script src="../Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#<%=txtSearch.ClientID%>').bind('keyup', function (e) {
            $('#<%=btnInvisible.ClientID%>').click();
        });
    });

</script>

  • и .Аспн код:

    <asp:TextBox ID="txtSearch" placeholder="Search..." runat="server"></asp:TextBox>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

        <asp:Button ID="btnInvisible" runat="server" style="display: none" 
            OnClick="btnInvisible_Click" />

        // Place GridView here

    </ContentTemplate>
</asp:UpdatePanel>

  • и в коде:

    protected void btnInvisible_Click(object sender, EventArgs e)
{
   gvBanquet.DataSource = DLBqt.SearchBanquet(txtSearch.Text.Trim());
   gvBanquet.DataBind();
}

  • результаты:

    enter image description here

    enter image description here

0