繁体   English   中英

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

[英]Postback event on text changed event

我想在文本框中的每个keypress / textchanged事件上回发,但是我的JavaScript没有运行。 我想念什么吗... ????

我的HTML文本框是这样的:

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

我的Javascript代码是这样的:

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

我的textchanged事件是这样的:

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

如下修改代码并检查

__doPostBack('Txt_Search', '');

这是在asp.net中进行动态搜索的演示。

您的文本框应为:

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

在这里,我们将调用一个名为searchProperty()的函数onkeydown事件。

因此,您的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);
                            }
                        });
                    };

这些函数将在newDashboard.aspx.cs文件上调用GetPoprty()方法。

所以我的后端方法是

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

我创建示例项目ASP.NET WebForms和AJAX。

我建议您可以使用AJAX流程.NET通用处理程序文件。 请您研究通用处理程序文件。

在创建通用处理程序文件“ 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;
        }
    }

并创建您的搜索页YourFile.aspx,我的文件名为Search.aspx。

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>

此示例在输入所有三个字母时发送ajax请求search.ashx文件,其中包含搜索词并在搜索页面上获得结果。

希望对您有所帮助。

暂无
暂无

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

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