document.getelementbyid无法识别剃刀元素

Question

在我的index.cshtml文件中，我有一个razor元素（@ 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。如果我使用剃须刀那么＆＃39; mainpagequery＆＃39;是强调因为它无法看到它，如果我使用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您的ID被覆盖到模型的属性名称。

如果使用f12找到元素，您会发现如下所示。 （注意ID＆＃34; SearchQuery124 ＆＃34;我刚刚将其重命名为某些内容）

所以在你的情况下改变如

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

Answer 2

试试这个

而不是@Html.EditorFor使用

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