Как записать нажатие клавиши ввода на Html.TextBoxFor и вызвать функцию jQuery

Question

Я хотел бы вызвать событие для функции в текстовом поле HTMLhelper, когда пользовательская клавиша нажимает ввод.Следующий блок кода не работает.Что я тут не так делаю?

@Html.LabelFor(model => model.Search.EmployeeID)
@Html.TextBoxFor(model => model.Search.EmployeeID, new { @class = "form-control", @id = "customEmployeeID", @onkeypress = "keypresshandle(event);" })

function keypresshandle(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        alert("Enter was pressed was presses");
    }
}

Answer 1

@ * используйте ключевое слово htmlAttributes * @

@Html.EditorFor(model => model.Search.EmployeeID, new { htmlAttributes = new { @class = "form-control", @onkeypress = "keypresshandle(event);" } })

@ *, пожалуйста, поместите тег сценария здесь * @

<script>
    function keypresshandle(e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            alert("Enter was pressed was pressed");
        }
    }
</script>

Answer 2

это то, как @Html.TextBoxFor отображает элемент управления, например:

Razor View:

@model Student
@Html.TextBoxFor(m => m.StudentName, new { @class = "form-control" })   

HTML Результат:

<input class="form-control" 
        id="StudentName" 
        name="StudentName" 
        type="text" 
        value="John" />

Я бы посоветовал вам пройти через Html Helpers , чтобы укрепить ваше представление о том, как это работает.

Пока тег управления вводом имеет name="propName", который совпадает со свойством модального объекта, ваш параметр obj контроллера получит его значение. Если у вас возникают проблемы при создании элементов управления с использованием @Html.TextBoxFor, используйте способ легенды:

function someFunction(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    alert("omg you pressed the Enter key. How dare you!");
  }
}

<input type="text" name="StudentName" id="StudentName" onkeypress="someFunction(event);" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>