私のASP.NET MVCプロジェクトでオートコンプリート機能を実装したい

Question

私はclsUtilitiesという名前のクラスとPhoneBook_SearchCustomersという名前のクラスを持っています。私はFNameとそれに対応するIdを取りたいです。私のDataTableはIdとFNameの両方を持っています。今度はDataTableをリストに変換します。 List<object> ids = (from row in ss.AsEnumerable() select row["FName"]).ToList();。 Idを同じ行に入力する方法がわからないので、これをJavaScriptに渡すことができます。

マイclsUtilitiesクラス

public DataSet CreateCommandwithParams(string queryString, SqlParameter[] prms) 
     { 
      string mConnString = ConfigurationManager.ConnectionStrings["TestConnection"].ConnectionString; 
      using (SqlConnection conn = new SqlConnection(mConnString)) 
      { 
       SqlCommand cmd = new SqlCommand(queryString, conn); 
       cmd.CommandType = CommandType.Text; 
       if (prms != null) 
       { 
        foreach (SqlParameter p in prms) 
        { 
         cmd.Parameters.Add(p); 
        } 
       } 
       DataSet ds = new DataSet(); 
       SqlDataAdapter da = new SqlDataAdapter(); 
       da.SelectCommand = cmd; 
       conn.Open(); 
       da.Fill(ds); 
       return ds; 
      } 

     } 

マイホームコントローラー

[HttpPost] 
     public JsonResult AutoComplete(string prefix) 
     { 
      clsUtilities cUtils = new clsUtilities(); 
      DataSet ds; 
      SqlParameter[] prms = new SqlParameter[1]; 
      string sSQLName; 
      sSQLName = " PhoneBook_SearchCustomers @FName"; 
      prms[0] = new SqlParameter("@FName", SqlDbType.VarChar); 
      prms[0].Value = prefix; 
      ds = cUtils.CreateCommandwithParams(sSQLName, prms); 
      DataTable ss = ds.Tables[0]; 
      List<object> ids = (from row in ss.AsEnumerable() select row["FName"]).ToList(); 
      return Json(ids); 

     } 

私はJavaScript

$(function() { 
     $("#txtCustomer").autocomplete({ 
      source: function (request, response) { 
       // debugger; 
        $.ajax({ 
        url: '/Home/AutoComplete/', 
        data: "{ 'prefix': '" + request.term + "'}", 
        dataType: "json", 
        type: "POST", 
        data: JSON.stringify({ prefix: request.term, count: 20 }), 
        contentType: "application/json; charset=utf-8", 
        success: function (data) { 
         response($.map(data, function (item) { 
          debugger; 
          return item; 

         })) 
        }, 
        error: function (response) { 
         alert(response.responseText); 
        }, 
        failure: function (response) { 
         alert(response.responseText); 
        } 
       }); 
      }, 

      select: function (e, i) { 
       debugger; 
       $("#hfCustomer").val(i.item.val); 
      }, 
      minLength: 1 
     }); 
}); 

コントローラからval値を取得する方法を私を導いてください。 valは未定義を示しています。前もって感謝します。

Answer 1

はdataTypeあなたすでに正確なので、送信する前にJSONデータを文字列化しないでください。

$("#name").autocomplete({ 
     source :function(request, response) { 
      $.ajax({ 
        url: "/Home/AutoComplete/", 
        dataType: "json", 
        data: { 
         prefix: request.term 
       }, 
       success: function(data) { 
        response($.map(data, function(item) { 
         return { 
          label : item.Value, 
          key: item.Key 
        }; 
       })); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     $("#hfCustomer").val(ui.item.label); 
     $("#hfCustomer").attr("id", ui.item.key); 
     return false; 
    } 
}); 

し、サーバー側であなたのような件のデータ（IDと値）を送信することができます：

[HttpPost] 
public JsonResult AutoComplete(string prefix) 
{ 
    clsUtilities cUtils = new clsUtilities(); 
    DataSet ds; 
    SqlParameter[] prms = new SqlParameter[1]; 
    string sSQLName; 
    sSQLName = " PhoneBook_SearchCustomers @FName"; 
    prms[0] = new SqlParameter("@FName", SqlDbType.VarChar); 
    prms[0].Value = prefix; 
    ds = cUtils.CreateCommandwithParams(sSQLName, prms); 
    DataTable ss = ds.Tables[0]; 
    List<KeyValuePair<string, string> results = ss.Select(p=>new KeyValuePair<int, string>(int.Parse(p["FId"]), p["FName"]).ToList(); 
    return Json(results); 
} 

Answer 2

私が変更しましたJsonResultこれのようなオートコンプリート関数は今私のために働いていました。

[HttpPost] 
     public JsonResult AutoComplete(string prefix) 
     { 
      clsUtilities cUtils = new clsUtilities(); 
      DataSet ds; 
      SqlParameter[] prms = new SqlParameter[1]; 
      string sSQLName; 
      sSQLName = " PhoneBook_SearchCustomers @FName"; 
      prms[0] = new SqlParameter("@FName", SqlDbType.VarChar); 
      prms[0].Value = prefix; 
      ds = cUtils.CreateCommandwithParams(sSQLName, prms); 
      DataTable ss = ds.Tables[0]; 
      List<Test> phoneBookList = new List<Test>(); 
      phoneBookList = (from DataRow dr in ss.Rows 
          select new Test() 
          { 
           FName = dr["FName"].ToString(), 
           Id = Convert.ToInt32(dr["Id"]) 

          }).ToList(); 
      return Json(phoneBookList); 
     } 

とJavaScriptで、成功へのいくつかの変更と選択します。

$(function() { 
     $("#txtCustomer").autocomplete({ 
      source: function (request, response) { 
        $.ajax({ 
         url: '/Home/AutoComplete/', 
         data: "{ 'prefix': '" + request.term + "'}", 
         dataType: "json", 
         type: "POST", 
        contentType: "application/json; charset=utf-8", 
        success: function (data) { 
         response($.map(data, function (item) { 
          //debugger; 
          return { 
           value: item.FName, 
           id: item.Id 
          }; 
        })) 
        }, 
        error: function (response) { 
         alert(response.responseText); 
        }, 
        failure: function (response) { 
         alert(response.responseText); 
        } 
       }); 
      }, 
      select: function (event, ui) { 
       //debugger; 
       $("#hfCustomer").val(ui.item.value); 
       $("#hfCustomer").val(ui.item.id); 
      }, 
      minLength: 1 
     }); 
});