Mvc Html.ActionButton

Question

有人写过吗？我希望它表现得像一个链接,但看起来像一个按钮.只有一个按钮的表单不会这样做我不想要任何POST.

Answer 1

最简单的方法是使用一个小form标签method="get",在其中放置一个提交按钮:

<form method="get" action="/myController/myAction/">
    <input type="submit" value="button text goes here" />
</form>

您当然可以编写一个非常简单的扩展方法,它接受按钮文本和RouteValueDictionary(或带有routevalues的匿名类型)并构建表单,这样您就不必在任何地方重新执行它.

编辑:响应cdmckay的回答,这里是一个替代代码,使用TagBuilder类而不是常规StringBuilder来构建表单,主要是为了清楚:

using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;

namespace MvcApplication1
{
    public static class HtmlExtensions
    {
        public static string ActionButton(this HtmlHelper helper, string value, 
                              string action, string controller, object routeValues)
        {
            var a = (new UrlHelper(helper.ViewContext.RequestContext))
                        .Action(action, controller, routeValues);

            var form = new TagBuilder("form");
            form.Attributes.Add("method", "get");
            form.Attributes.Add("action", a);

            var input = new TagBuilder("input");
            input.Attributes.Add("type", "submit");
            input.Attributes.Add("value", value);

            form.InnerHtml = input.ToString(TagRenderMode.SelfClosing);

            return form.ToString(TagRenderMode.Normal);
        }
    }
}

另外,与cdmckay的代码相反,这个代码实际上会编译;)我知道这段代码可能会有相当多的开销,但我希望你不需要在每个代码上运行很多次页.如果你这样做,你可以做一些优化.

Answer 2

如果你希望它表现得像一个链接,但"看起来"像一个按钮,只需使用带有CSS类的ActionLink.

<%: Html.ActionLink("Back", "Index", null, new { @class = "link-button" })%>

这是我正在使用的Button的CSS.

.link-button {
    -moz-border-radius:0.333em 0.333em 0.333em 0.333em;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
    background:-moz-linear-gradient(center top , white, #306AB5 4%, #274976) repeat scroll 0 0 transparent;
    border-color:#306AB5 #2B5892 #274771;
    border-style:solid;
    border-width:1px;
    color:white;
    cursor:pointer;
    display:inline-block;
    font-size:1.167em;
    font-weight:bold;
    line-height:1.429em;
    padding:0.286em 1em 0.357em;
    text-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
}


.link-button {
    color: white;
    border-color: #a1a7ae #909498 #6b7076;
    background: #9fa7b0 url(../images/old-browsers-bg/button-element-grey-bg.png) repeat-x top;
    background: -moz-linear-gradient(
        top,
        white,
        #c5cbce 5%,
        #9fa7b0
    );
    background: -webkit-gradient(
        linear,
        left top, left bottom,
        from(white),
        to(#9fa7b0),
        color-stop(0.05, #c5cbce)
    );
    -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }
    .link-button:hover {
        border-color: #a1a7b0 #939798 #6e7275;
        background: #b1b5ba url(../images/old-browsers-bg/button-element-grey-hover-bg.png) repeat-x top;
        background: -moz-linear-gradient(
            top,
            white,
            #d6dadc 4%,
            #b1b5ba
        );
        background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(white),
            to(#b1b5ba),
            color-stop(0.03, #d6dadc)
        );
    }
    .link-button:active {
        border-color: #666666 #ffffff #ffffff #979898;
        background: #dddddd url(../images/old-browsers-bg/button-element-grey-active-bg.png) repeat-x top;
        background: -moz-linear-gradient(
            top,
            #f1f1f1,
            #dddddd
        );
        background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(#f1f1f1),
            to(#dddddd)
        );
    }

Answer 3

两个版本进行扩展...

<button 
    onclick="javascript:window.location=('@Url.Action("Review", "Order", null)')"
    >Review Order</button>

不引人注目的版本:

<button data-action="@Url.Action("Review", "Order", null)">Review Order</button>

$(document).on('click', "[data-action]", 
    function(e) { window.location = $(this).attr('data-action'); }
);

如果您的用户没有打开javascript,那么表单标记就是您的选择.但是,如果您的链接已经在表单中,这会使情况变得困难.但是,您可以将操作和方法更改为GET.