Autocomplete mit MVC 4/Razor

Question

Ich denke, ich vermisse etwas offensichtlich beim Versuch, Autocomplete-Funktionalität in MVC 4 hinzuzufügen. Von dem, was ich in anderen Posts gefunden habe, konnte ich ein Beispiel zusammen aber die Methode in meinem Controller ist nicht angerufen werden.

Was ich bisher versucht ...

_Layout

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

-Controller

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

Ansicht (Ich habe hart daran, die Home/Zahlen für jetzt codiert)

<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> 

Wenn ich meine laufen App und geben Sie in das Textfeld nichts passiert. Ich habe einen Haltepunkt in die "Numbers" -Funktion gesetzt und es scheint, dass es nie aufgerufen wird.

Mein Projekt hier

Answer 1

http://www.filedropper.com/testapp werden Wenn Sie die @Scripts.Render Linien am unteren Rand des im Layout body Element haben und nach dem @RenderBody() müssen Sie Ihr Skript in der scripts Abschnitt setzen:

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

Da Ihr Skript von jQuery abhängt, sollte jQuery zuerst geladen werden.

Oder einfach Ihre @Scripts.Render Erklärung in die head im Layout bewegen, dann müssen Sie nicht Ihren Code in den scripts Abschnitt setzen (aber Sie sind besser dran, den Abschnitt mit der Verwendung)

Answer 2

ich Sie vorschlagen zu steuern Fehler in Chrome, um sicherzustellen, dass jQuery-Bibliotheken ordnungsgemäß funktionieren. wenn es kein Problem ist, versuchen Sie dieses Skript:

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

Dann in Ihrem Razor (C#):

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

Wenn Sie Razor Html-Helfer statt mit 'Input' Tag verwenden möchten, The ID-Attribut ist derselbe Name von Model.Member. Beachten Sie, dass Sie in Controller eine Zeichenfolge mit dem Namen "term" eingeben müssen, wie in Ihrem Code geschrieben. Aus Sicherheitsgründen müssen Sie die Verwendung von Parametern in der js-Datei vermeiden, die die Site-Technologie anzeigt. Die oben angegebene Methode verwendet niemals die js-Datei, um die Adresse der Ressource zu erhalten.

Answer 3

Dies ist das Gesamtcode-Projekt eines Autocomplete-Textfelds.

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

Answer 4

Für View

<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> 

Für Controller:

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); 
    } 
} 

Standard-Router-Einstellung Halten Sie sonst Aktion rufen nicht

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 } 
     ); 
    } 
}