HTML-кнопка изображения, которая перенаправляет на ActionResult

Question

В проекте MVC я пытаюсь создать кнопку изображения HTML, которая будет перенаправлять на ActionResult.Это окно поиска.

В настоящее время у меня просто есть что-то вроде этого:

<input type="text" id="Text1" name="seachKeyword" class="searchTextBox" value="Search" style="color:blue; " onfocus="this.value==this.defaultValue?this.value='':null"/>

и для кнопки:

<input type="image" src="somesrc" width="100" height="100" class="aaa" value="something" alt="something" />

И я хочу заменить его на несколькоСочетание этих двух вещей: во-первых, сделать кнопку кнопкой ссылки, а не кнопку отправки.Я хочу взять ключевое слово из текстового поля поиска и отправить его в контроллер поиска:

<a href="somehow redirect to the search controller with the textbox value">
<img src="somesrc" alt="something" width="100" height="100" />
</a>

Вот как это работает сейчас.Должно быть как-то объединено в приведенном выше коде.

[HttpPost]
public ActionResult Index(string id)
{
    return RedirectToAction("Search", "Something", new { keyword = id, pageNumber = 1 });
}

Answer 1

Использование формы в этом случае будет более корректным семантически:

@using(Html.BeginForm("Search", "Something"))
{
    <input type="text" id="Text1" name="keyword" class="searchTextBox" value="Search" style="color:blue;" onfocus="this.value==this.defaultValue?this.value='':null"/>
    <input type="image" src="somesrc" width="100" height="100" class="aaa" value="something" alt="something" />
}

Таким образом, значение, введенное в текстовое поле, будет автоматически отправлено в действие поиска при нажатии на изображение.

Если вам действительно нужно использовать ссылку (которая не будет семантически правильной), вам нужно будет использовать javascript, чтобы передать значение текстового поля действию при нажатии на ссылку.Например, вы можете написать пользовательский помощник , который будет генерировать правильную разметку, а затем в отдельном файле javascript подписаться на событие click якоря, получить значение текстового поля, добавить его к значениюСвойство href для привязки, отменить действие привязки по умолчанию и перенаправить на новое значение:

$(function() {
    $('#id_of_anchor').click(function() {
        var keyword = $('#id_of_search_textbox').val();
        var href = this.href;
        if (href.indexOf('?') > -1) {
            href += '&';
        } else {
            href += '?';
        }
        window.location.href = href + 'keyword=' + encodeURIComponent(keyword);
        return false;
    });
});