Javascript自动完成功能失败

时间:2017-12-07 08:29:58

标签: javascript c# jquery asp.net autocomplete

我有一个aspx Web表单页面,我希望使用来自数据库的数据来自动完成。问题是我得到的响应是网页html而不是数据库数据。我已经在aspx.cs中的web方法上放置了一个断点,它执行从数据库中获取的数据,但它并没有意味着javascript可能根本没有调用这个方法。但是,执行自动完成功能还会在控制台中记录一条虚拟消息,如果javascript执行出错,我将设置为打印。下面是我正在使用的代码:

<script type="text/javascript">
        console.log("Hello World :)");

        $(document).ready(function () {
            $("[id$=txtbxClassTeacher]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Controllers/Videos/GetTeacherName/",
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",

                        success: function (data) {
                            console.log(Jscript Successful");
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            console.log("jscript error");
                            console.log(response);
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            console.log("jscript failure");
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustomerId]").val(i.item.val);
                },
                minLength: 1
            });
        });

</script>

然后是网络方法:

public class VideosController : ApiController
{
    [HttpPost]
    public static List<string> GetTeacherName(string teacherName)
    {
        List<string> myResult = new List<string>();
        try
        {
            using (SqlConnection con = new SqlConnection("Data Source=***;Initial Catalog=***;Persist Security Info=True;User ID=***;Password=***"))
            {
                con.Open();
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "SELECT TOP 25 Name FROM dbo.Profiles WHERE Level=19 AND Name LIKE ''+@SearchTeacherName+'%'";
                    cmd.Connection = con;

                    cmd.Parameters.AddWithValue("@SearchTeacherName", teacherName);
                    SqlDataReader dr = cmd.ExecuteReader();
                    while (dr.Read())
                    {
                        myResult.Add(dr["Name"].ToString());
                    }
                    con.Close();
                    return myResult;
                }
            }
        }
        catch (Exception exc)
        {
            return myResult;
        }
    }
}

然后实现自动完成的文本框:

<div class="form-group">
     <label for="inputTitle" class="col-md-3 control-label">Class Teacher</label>
                                    <div class="col-md-8">
                                        <asp:TextBox runat="server" ID="txtbxClassTeacher" placeholder="Class Teacher" TextMode="SingleLine" CssClass="form-control"/>
                                        <asp:HiddenField ID="hfCustomerId" runat="server" />
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtbxClassTeacher" ErrorMessage="This field cannot be empty!"  CssClass="text-danger"></asp:RequiredFieldValidator>
                                    </div>
                                </div>

谢谢你的帮助

0 个答案:

没有答案