ActionResult로 리디렉션되는 HTML 이미지 버튼

Question

MVC 프로젝트에서 ActionResult로 리디렉션되는 HTML 이미지 버튼을 만들려고합니다. 검색 창입니다.

현재 난 그냥 이런 일이 : 나는이 두 가지의 조합으로 대체 할

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

그리고 : 우선에

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

을하고 버튼 단추를 제출 단추가 아닌 링크 단추로 만드십시오. 검색 텍스트 상자에서 키워드를 가져 와서 검색 컨트롤러로 보냅니다.

<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를 사용해야합니다. 예를 들어 custom helper을 작성하면 적절한 마크 업을 생성 한 다음 별도의 자바 스크립트 파일에서 앵커의 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; 
    }); 
});