HTML image button that redirect to an ActionResult

Question

In an MVC project I'm trying to create an HTML image button that will redirect to an ActionResult. It's a search box.

Currently I just have something like this:

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

and for the button:

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

And I want to replace it with some combination of these two things: first thing, to make the button a link button and not a submit button. I want to take the keyword from the search text box and send it to the search controller:

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

this is how it works now. Should be somehow combined in the above code.

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

score 0 · Accepted Answer · edited May 23 '17 at 12:06

Using a form in this case would be more correct semantically:

@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" />
}

This way the value entered in the textbox will be automatically sent to the Search action when the image is clicked.

If you really needed to use a link (which wouldn't be semantically correct) you would need to use javascript in order to pass the value of the textbox to the action when the link is clicked. For example you could write a custom helper that will generate the proper markup and then in a separate javascript file subscribe to the click event of the anchor, fetch the value of the textbox, append it to the value of the href property on anchor, cancel the default action of the anchor and redirect to the new value:

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

Thanks for the help :) Now it looks just like your example (the first one), but my "Search" looks like that: public ActionResult Search(string keyword) {...} while the "keyword" is the textbox value. so how can I pass it here/ access it from here? tnx — user990635, Jan 31 '12 at 07:28
@user990635, in case you decide to follow my recommendation and use a form, then you should simply give the text input `name="keyword"`. And in case you decide to go the javascript way with an anchor, then you should simply use `keyword` as query string parameter: `window.location.href = href + 'keyword=' + encodeURIComponent(keyword);`. I have updated my answer. — Darin Dimitrov, Jan 31 '12 at 07:31

HTML image button that redirect to an ActionResult

1 Answers1