document.getelementbyid не распознающий элемент бритвы

Question

В моем файле index.cshtml у меня есть элемент бритвы (@ Html.EditorFor), который является текстовым полем. Javascript не распознает элемент. Если я изменил тип элемента на синтаксис без бритвы, тогда javascript сможет его увидеть. Я пропустил какой-то синтаксис здесь.

index.cshtml

<div class="jumbotron"> 
<h1>my application</h1> 
@using (Html.BeginForm("Results", "Home", FormMethod.Post)) 
{ 
    <div class="form-group"> 
     //javascript can't see mainpagequery 
     @Html.EditorFor(model => model.SearchQuery, new { htmlAttributes = new { @class = "form-control", id = "mainpagequery" }}) 
     @Html.ValidationMessageFor(model => model.SearchQuery, "", new { @class = "text-danger" }) 
     //javascript can see mainpagequery in the non razor element here 
     <input type="text" class="form-control" placeholder="Search" id="mainpagequery"> 
    </div> 
    <button type="submit" class="btn btn-default">Search</button> 
} 

Вот мой JavaScript. Если я использую бритву, то «mainpagequery» - это подчеркивание, потому что оно не может его увидеть, если я использую html, тогда все в порядке. Я знаю, что я нажимаю свой javascript, потому что вижу, что всплывает предупреждающее сообщение.

$(document).ready(function() { 
console.log("ready!"); 
alert("mainpage autocomplete function entered"); 

var input = document.getElementById('mainpagequery'); 
var options = { 
    types: ['(cities)'], 
    componentRestrictions: { country: "us" } 
}; 
var mainpagequery = new window.google.maps.places.Autocomplete(input, options); 
}); 

Answer 1

Попробуйте

@Html.EditorFor Вместо использования

@Html.TextBoxFor(model => model.SearchQuery, new { @class = "form-control" , id = "mainpagequery"}) 

Answer 2

В случае @Html.EditorFor ваш идентификатор получить переопределенная к имени свойства модели.

Если вы нашли элемент, использующий f12, вы найдете его следующим образом. (Обратите внимание, идентификатор "SearchQuery124" Я просто переименовал его к чему-то)

Так что в вашем случае в изменении макияжем как

$(document).ready(function() { 
    console.log("ready!"); 
    alert("mainpage autocomplete function entered"); 

    var input = document.getElementById('SearchQuery').value; 
    console.log(input); 
    var options = { 
     types: ['(cities)'], 
     componentRestrictions: { country: "us" } 
    }; 
    var mainpagequery = new window.google.maps.places.Autocomplete(input, options); 
});