简体   繁体   English

关于文本更改事件的回发事件

[英]Postback event on text changed event

I want to postback on every keypress/textchanged event in textbox but my javascript is not running. 我想在文本框中的每个keypress / textchanged事件上回发,但是我的JavaScript没有运行。 Am i missing something...???? 我想念什么吗... ????

My Html textbox is this: 我的HTML文本框是这样的:

<asp:TextBox ID="Txt_Search" runat="server" AutoCompleteType="Disabled" 
  onkeypress="Postback();" OnTextChanged="Txt_Search_TextChanged" AutoPostBack="true">
</asp:TextBox>

My Javascript code is this: 我的Javascript代码是这样的:

    function Postback() {
    __doPostBack('<%= Txt_Search.ClientID %>', '');
};

My on textchanged event is this: 我的textchanged事件是这样的:

 protected void Txt_Search_TextChanged(object sender, EventArgs e)
    {
        FolderStructure.Nodes.Clear();
        Searchtxt();
    }

如下修改代码并检查

__doPostBack('Txt_Search', '');

here is demo for dynamic search in asp.net. 这是在asp.net中进行动态搜索的演示。

Your textbox should be: 您的文本框应为:

<asp:TextBox ID="PopertyName" placeholder="Property Name" href="#"
                                propertyid="" runat="server" class="dropdownAnchor"
                                autocomplete="off" onkeydown="SearchProperty()"></asp:TextBox>

here we will call a function named searchProperty() onkeydown event. 在这里,我们将调用一个名为searchProperty()的函数onkeydown事件。

so, your ajax should be, 因此,您的ajax应该是

function SearchProperty() {                            
                        $.ajax({
                            url: '<%=Page.ResolveUrl("~/Dashboard/NewDashboard.aspx/GetProperty") %>',
                            data: "{ 'prefix': '" + $("#PopertyName").val() + "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                               //Your code to bind result that received from your back end.
                            },
                            error: function (response) {
                                alert(response.responseText);
                            },
                            failure: function (response) {
                                alert(response.responseText);
                            }
                        });
                    };

these function will call a GetPoprty() method on newDashboard.aspx.cs file. 这些函数将在newDashboard.aspx.cs文件上调用GetPoprty()方法。

so my back end method is, 所以我的后端方法是

[WebMethod]
public static List<Model.Property> GetProperty(string prefix)
{
   // Here you get your text in prefix 
 }

I create sample projects ASP.NET WebForms and AJAX. 我创建示例项目ASP.NET WebForms和AJAX。

I Suggest you can use AJAX process .NET Generic Handler File. 我建议您可以使用AJAX流程.NET通用处理程序文件。 Please you research about Generic Handler file. 请您研究通用处理程序文件。

Before create Generic Handler file "Search.ashx" and Paste above the code. 在创建通用处理程序文件“ Search.ashx”之前,并粘贴到代码上方。

            public void ProcessRequest(HttpContext context)
    {

        var search = HttpContext.Current.Request.Form["term"];

        //Dummy Data
        List<string> searchList = new List<string> { "Red", "Orange", "Ping", "Blue", "White", "Black" };

        string result = string.Empty;

        if (!string.IsNullOrEmpty(search))
        {
            searchList = searchList.Where(x => x.ToLower().Contains(search.ToLower())).ToList();

            if (searchList != null && searchList.Count() > 0)
            {
                foreach (var item in searchList)
                {

                    result += "<li>" + item + "</li>";

                }
            }
        }
        else
        {
            result="<li> Not Found </li>";
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write(result);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

and Create Your Search Page, YourFile.aspx, my file name Search.aspx. 并创建您的搜索页YourFile.aspx,我的文件名为Search.aspx。

ASPX Page Code : ASPX页面代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication7.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="txtSearch" class="js-search" value="Search" />

        <div class="searchResult">
            <ul>


            </ul>
        </div>

    </div>
    </form>

    <script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>

    <script>

        $(function () {
            $(".js-search").on('keyup', function () {

                var term = $('.js-search').val();
                if (term.length > 2) {
                    sendSearchRequest({ "term": term });
                }
            });

            function sendSearchRequest(value) {

                var datas = $.ajax({
                    type: "POST",
                    url: '/Search.ashx',
                    cache: false,
                    async: false,
                    data: value,
                    success: function (term) {
                        $('.searchResult').empty();
                        $('.searchResult').append(term);
                    }

                });

            }
        });
    </script>
</body>
</html>

This example when all three letters entered send ajax request search.ashx file and contains search term and get result on search page. 此示例在输入所有三个字母时发送ajax请求search.ashx文件,其中包含搜索词并在搜索页面上获得结果。

I hope that helps. 希望对您有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM