MVC 4/Razor的自動完成

Question

我想我在嘗試在MVC 4中添加自動完成功能時丟失了一些明顯的東西。從我在其他帖子中發現的內容中，我已經能夠組合一個示例，但是在我的控制器中的方法是沒有被調用。

我至今嘗試過...

_layout

@Styles.Render("~/Content/themes/base/css") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/jqueryval") 

控制器

Public Function Numbers(term As String) As ActionResult 
    Return Json(New String() {"one", "two", "three", "four", "five", "six"}, JsonRequestBehavior.AllowGet) 
End Function 

視圖（我已經硬編碼家庭/數字現在）

<div class="editor-label"> 
    @Html.LabelFor(Function(model) model.Number) 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(Function(model) model.Number) 
    @Html.ValidationMessageFor(Function(model) model.Number) 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $("#Number").autocomplete({ 
      source: 'Home/Numbers', 
      minLength: 1 
     }); 
    }); 
</script> 

當我運行我的應用程序並在文本框中鍵入沒有任何反應。我已經在「Numbers」函數中放置了一個斷點，它似乎永遠不會被調用。

我的項目都可以在這裏http://www.filedropper.com/testapp

Answer 1

發現如果你有@Scripts.Render線在佈局body元素的底部和@RenderBody()後，你需要把你的腳本在scripts部分：

@section scripts 
<script type="text/javascript"> 
    $(function() { 
     $("#Number").autocomplete({ 
      source: '@Url.Action("Numbers","Home")', 
      minLength: 1 
     }); 
    }); 
</script> 
End Section 

因爲你的腳本依賴於jQuery所以jQuery應該先加載。

或者只動@Scripts.Render申報到head佈局，那麼你不需要把你的代碼到scripts部分（但你是使用一節更好）

Answer 2

我建議你控制Chrome中的錯誤，以確保jQuery庫正常工作。 如果沒有問題，試試這個腳本：

$(document).ready(function() { 
    $("#Number").each(function() { 
     $(this).autocomplete({ source: $(this).attr("data-autocomplete") }); 
    }); 
}); 

然後在你的剃鬚刀（C＃）：

<input type="text" id="Number" data-autocomplete="@Url.Action("Action","Controller")" autocomplete="on" /> 

如果你想使用的，而不是使用 'input' 標籤剃刀HTML輔助，該id屬性是Model.Member的同名。請注意，在Controller中，您必須輸入字符串，其中包含代碼中所寫的'term'名稱。 出於安全原因，您必須避免在顯示站點技術的js文件中使用參數。上面聲明的方法從不使用js文件來獲取資源的地址。

Answer 3

這是自動完成文本框示例的總代碼項目。

http://blogs.msdn.com/b/stuartleeks/archive/2012/05/02/asp-net-mvc-amp-jquery-ui-autocomplete-part-2-editorfor.aspx

Answer 4

有關的ViewPage

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 

<input type="text" id="txtmasterserach" name="txtmasterserach" placeholder="City, region, district or specific hotel" autocomplete="off"/> 
<input type="hidden" name="hidenkeyvalues" id="MovieID" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#txtmasterserach").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "/Company/getautobox", 
        type: "POST", 
        dataType: "json", 
        data: { Prefix: request.term }, 
        success: function (data) { 
         response($.map(data, function (item) { 
          return { value: item.Id, label: item.name }; 
         })) 
        } 
       }) 
      }, 
      select: function (event, ui) { 
       $("#MovieID").val(ui.item.value); 
       $("#txtmasterserach").val(ui.item.label); 
       event.preventDefault(); 
       return false; 
      }, 
      focus: function (event, ui) { 
       $("#MovieID").val(ui.item.value); 
       // $("#txtmasterserach").val(ui.item.label); 
       event.preventDefault(); 
       return false; 
      }, 
      messages: { 
       noResults: "", results: "" 
      } 
     }); 
    }); 
    </script> 

對於控制器：

public class companyController : Controller 
{ 
public JsonResult getautobox(String Prefix) 
    { 
     SqlConnection con = new SqlConnection(); 
     con.ConnectionString = ConfigurationManager.ConnectionStrings["Connection"].ConnectionString; 
     SqlCommand cmd = new SqlCommand("procedurename", con); 
     cmd.Parameters.AddWithValue("@prefix", Prefix); 
     cmd.CommandType = CommandType.StoredProcedure; 
     DataSet ds = new DataSet(); 
     SqlDataAdapter da = new SqlDataAdapter(cmd); 
     da.Fill(ds); 
     List<autosearchdatalist> auto = new List<autosearchdatalist>(); 
     if (ds.Tables[0].Rows.Count > 0) 
     { 
      for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
      { 
       auto.Add(new autosearchdatalist 
       { 
        Id = ds.Tables[0].Rows[i]["Id"].ToString(), 
        name = ds.Tables[0].Rows[i]["hotelname"].ToString() 
       }); 
      } 
     } 
     if (ds.Tables[1].Rows.Count > 0) 
     { 
      for (int i = 0; i < ds.Tables[1].Rows.Count; i++) 
      { 
       auto.Add(new autosearchdatalist { 
        Id = ds.Tables[1].Rows[i]["Id"].ToString(), 
        name = ds.Tables[1].Rows[i]["hotelname"].ToString() 
       }); 
      } 
     } 
     if (ds.Tables[2].Rows.Count > 0) 
     { 
      for (int i = 0; i < ds.Tables[2].Rows.Count; i++) 
      { 
       auto.Add(new autosearchdatalist 
       { 
        Id = ds.Tables[2].Rows[i]["Id"].ToString(), 
        name = ds.Tables[2].Rows[i]["hotelname"].ToString() 
       }); 
      } 
     } 
     String msg = ""; 
     return Json(auto); 
    } 
} 

保持路由器設置默認否則動作不會叫

public class RouteConfig 
{ 
    public static void RegisterRoutes(RouteCollection routes) 
    { 
     routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 

     routes.MapRoute(
      name: "Default", 
      url: "{controller}/{action}/{id}", 
      defaults: new { controller = "company", action = "Index", id = UrlParameter.Optional } 
     ); 
    } 
}