代码之家  ›  专栏  ›  技术社区  ›  Dan TheCodeJunkie

mvc html.actionButton

  •  11
  • Dan TheCodeJunkie  · 技术社区  · 16 年前

    有人写过吗?我希望它的行为像一个链接,但看起来像一个按钮。只有一个按钮的表单是不行的,我不想要任何帖子。

    7 回复  |  直到 10 年前
        1
  •  17
  •   Tomas Aschan    15 年前

    最简单的方法就是 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的代码相反,这段代码实际上是编译的;)我知道这段代码中可能有很多开销,但我希望您不需要在每个页面上运行很多次。如果你这样做了,也许你可以做一些优化。

        2
  •  13
  •   Brett Allred    14 年前

    如果你想让它表现得像一个链接,但“看起来”像一个按钮,只需使用一个css类的actionlink。

    <%: Html.ActionLink("Back", "Index", null, new { @class = "link-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)
            );
        }
    
        3
  •  6
  •   Valamas ConsultUtah    10 年前

    两个版本作为扩展…

    <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的用户,那么表单标记就是一种方法。尽管如此 如果你的链接已经在表单中 . 但是,您可以更改要获取的操作和方法。

        4
  •  3
  •   cdmckay    15 年前

    托马斯回答的代码:

    public static class HtmlExtensions
    {
      public static string ActionButton(this HtmlHelper helper, string value, 
          string action, string controller, object routeValues)
      {
        UrlHelper urlHelper = new UrlHelper(helper.ViewContext);
        var action = urlHelper.Action(action, controller, routeValues);
    
        var html = new StringBuilder();
        html.AppendFormat("<form method='get' action'{0}'>", action).AppendLine()
            .AppendFormat("    <input type='submit' value='{0}' />", value).AppendLine()
            .AppendFormat("</form>").AppendLine();
    
        return html.ToString();
      }
    }
    
        5
  •  0
  •   Torben Junker Kjær    13 年前

    我修改了tomas lyckens代码以返回mvchtmlstring,而不仅仅是一个字符串。这确保了输出是html,而不是作为文本转义。我还用xml很好地记录了它。多亏了托马斯,他做了所有真正的工作。

        /// <summary>
        /// Returns an HTML submit button (enclosed in its own form) that contains the virtual path of the specified action.
        /// </summary>
        /// <param name="helper">The HTML helper instance that this method extends.</param>
        /// <param name="buttonText">The visible text of the button.</param>
        /// <param name="action">The name of the action.</param>
        /// <param name="controller">The name of the controller.</param>
        /// <param name="routeValues">An object that contains the parameters for a route. The parameters are retrieved through reflection by examining the properties of the object. The object is typically created by using object initializer syntax.</param>
        /// <returns></returns>
        public static MvcHtmlString ActionButton(this HtmlHelper helper, string buttonText, string action, string controller, object routeValues)
        {
            string 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", buttonText);
    
            form.InnerHtml = input.ToString(TagRenderMode.SelfClosing);
    
            return MvcHtmlString.Create(form.ToString(TagRenderMode.Normal));
        } 
    
        6
  •  0
  •   Tony Wall    13 年前

    这里是一个VB.NET版本,有一个额外的东西,控制器和路由参数是可选的,所以它可以在不重复控制器名称的情况下使用,如果它与页面的当前/默认控制器相同。

    Public Module MvcExtensions
    
        ''' <summary> 
        ''' Returns an HTML submit button (enclosed in its own form) that contains the virtual path of the specified action. 
        ''' </summary> 
        ''' <param name="helper">The HTML helper instance that this method extends.</param> 
        ''' <param name="text">Text displayed in the button.</param> 
        ''' <param name="action">Action name.</param> 
        ''' <param name="controller">Optional controller name, using current when null.</param> 
        ''' <param name="routeValues">
        ''' An object that contains the parameters for a route. The parameters are retrieved
        ''' through reflection by examining the properties of the object.
        ''' The object is typically created by using object initializer syntax.
        ''' </param> 
        ''' <returns>
        ''' HTML output.
        ''' </returns> 
        <Extension()> _
        Public Function ActionButton(helper As HtmlHelper, text As String, action As String,
                                     Optional controller As String = Nothing, Optional routeValues As Object = Nothing) As MvcHtmlString
    
            ' Validate parameters
            If String.IsNullOrEmpty(text) Then Throw New ArgumentNullException("text")
    
            ' Get post back URL for action
            Dim actionUrl As String = New UrlHelper(helper.ViewContext.RequestContext).Action(action, controller, routeValues)
    
            ' Build form tag with action URL
            Dim form = New TagBuilder("form")
            form.Attributes.Add("method", "get")
            form.Attributes.Add("action", actionUrl)
    
            ' Add button
            Dim input = New TagBuilder("input")
            input.Attributes.Add("type", "submit")
            input.Attributes.Add("value", text)
            form.InnerHtml = input.ToString(TagRenderMode.SelfClosing)
    
            ' Return result as HTML
            Return MvcHtmlString.Create(form.ToString(TagRenderMode.Normal))
    
        End Function
    
    End Module
    

    然后,它可以像其他的MVC控件一样调用,页面上的代码最少。

    这从一开始就应该进入核心mvc框架;这似乎是一个非常明显的需求。我认为当用户执行创建或更改内容的操作时,按钮比链接直观得多。链接应该只导航到相关信息(不改变任何内容)。如果我有一个网格,我会使用actionlink进行任何数据导航(例如,单击产品名称转到产品页面),但只有actionbutton用于编辑和删除等真正的“操作”。

        7
  •  0
  •   numaroth type-a1pha    10 年前

    如果您想要一个功能类似于链接的按钮,应该可以:

    <input type="button" value="Button Text"
      onclick="@("location.href='http://stackoverflow.com/q/901372/2460971'")" />
    

    如果希望按钮使用控制器操作,则只需进行少量更改:

    <input type="button" value="Button Text"
      onclick="@("location.href='" + Url.Action("ActionName", "ControllerName") + "'")" />