在ASP.NET MVC中使用具有自动完成功能的处理程序

时间:2019-06-04 10:59:19

标签: jquery asp.net ajax asp.net-mvc jquery-ui-autocomplete

在我的.cshtml文件(视图)中触发自动完成功能时,是否可以更改路径?

举个例子,这是我的代码:

自动完成的文本框:

<form class="form-inline" id="formFilters" runat="server">
    <div>
        <input type="text" id="visitor" placeholder="pick a visitor" class="form-control" style="margin-right:20px;" />           
    </div>

自动完成脚本:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <script>
  $(document).ready(function () {
     $('#visitor').autocomplete({
         source: 'VisitorHandler.ashx'
     });
  });
</script>

VisitorHandler.ashx.cs:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace Visitor_Management
{
    /// <summary>
    /// Summary description for VisitorHandler
    /// </summary>
    public class VisitorHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string Name= context.Request["term"] ?? "";
            List<string> VisitorNames = new List<string>();
            string cs = ConfigurationManager.ConnectionStrings["VisitorSQLCommand"].ConnectionString;

            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("spGetVisitors",con);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.Add(new SqlParameter()
                {
                    ParameterName = "@input",
                    Value = Name
                });

                con.Open();

                SqlDataReader dr = cmd.ExecuteReader();

                while (dr.Read())
                {
                    string NameSurname= dr["Name"].ToString() + " " + dr["Surname"].ToString();
                    VisitorNames.Add(NameSurname);
                }
            }

            JavaScriptSerializer js = new JavaScriptSerializer();
            context.Response.Write(js.Serialize(VisitorNames));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

存储过程spGetVisitors是正确的,对其进行了测试。返回Name,Surname值,其中@input文本的名称或姓氏匹配。最后,就像您看到的一样,我将名称和姓氏组合在一个字符串中。

当我运行我的应用程序并加载所有内容时,它给我一个路径错误:

enter image description here

如我所见,我的路线不正确。它应该调用

http://localhost:54159/VisitorHandler.ashx?term=d

我的问题是:如何更改.autocomplete上的路径或如何使用route将VisitorHandler.ashx放在当前路径中?

1 个答案:

答案 0 :(得分:3)

使用相对于根的URL(/VisitorHandler.ashx)代替源的相对URL:

$(document).ready(function () {
    $('#visitor').autocomplete({
        source: '/VisitorHandler.ashx'
    });
});

注意:在MVC世界中,请考虑用控制器替换处理程序。您正在混合两种不同的技术。