Форма Представление при вводе Пресса

Question

У меня есть форма в моем проекте ASP.NET, которая принимает пользователей и добавляет их в URL-адрес для поиска в wiki. Форма отлично работает при входе в поисковый запрос и нажимает кнопку «поиск», однако, когда вы вводите поле ввода и нажимаете «ввод», страница обновляется, и окно очищается.

мой HTML

 <form> 
      <label id="sideBarLabel"> Services 
       <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" /> 
      </label> 
      <a href="#" id="searchWikiButton" class="button" onclick="searchWiki();">Search Wiki</a> 
     </form> 

мои JS

function searchWiki(){ 
    var siteQuery = $('#query-string').val(); 
    window.location.href = "/dosearchsite.action?queryString=" + siteQuery; 

} 

Может кто-нибудь помочь?

Answer 1

Ваш поисковый запросWiki() Метод js вызывается только в том случае, если на вашей кнопке поднят значок onclick, но не при отправке вашей формы. Существует несколько способов добиться того, что вы хотите:

Добавить метод Js поймать onsubmit событие вашей формы:

$("form").on("submit", searchWiki()); 

Или добавить тег на вашей форме:

<form onsubmit="searchWiki()"> 

Или укажите атрибут действия в вашей форме:

<form action="/dosearchsite.action"> 

Обратите внимание, что в ASP. NET, ModelBinder свяжет ваши входы формы с параметрами действия контроллера, используя атрибут name входов. Это означает, что вы не должны указывать их в URL-адресе самостоятельно. Вы также должны объявить свою форму с помощью Html.BeginForm или Ajax.BeginForm, если хотите, чтобы ваша форма была отправлена ​​ajax.

@Html.BeginForm("ActionName", "ControllerName") 
{ 
    <label id="sideBarLabel">Services 
     <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" /> 
    </label> 
    <input type="submit" class="button" value="Search Wiki"/> 
} 

Это вызовет поискWiki, когда вы нажмете enter.

Answer 2

$('#query-string').keypress(function(event) { 
if (event.keyCode == 13) { 
searchWiki(); 
event.preventDefault();}});