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以便在单击链接时将文本框的值传递给操作。例如，您可以编写一个custom helper来生成正确的标记，然后在单独的javascript文件中订阅锚点击事件，获取文本框的值，将其附加到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;
    });
});

重定向到ActionResult的HTML图像按钮

1 个答案: