【问题标题】:Cancel button in form表单中的取消按钮
【发布时间】:2012-03-28 18:14:41
【问题描述】:

我在表单中有一个取消按钮:

@using (Html.BeginForm("ConfirmBid","Auction"))
        {
          some stuff ...

                    <input type="image" src="../../Content/css/img/btn-submit.png" class="btn-form" />
                    <input type="image" src="../../Content/css/img/btn-cancel.png" class="btn-form" />

        }

问题是我希望这个按钮在我单击它时转到特定视图。我该怎么做?

【问题讨论】:

    标签: c# asp.net-mvc-3 button razor cancel-button


    【解决方案1】:

    您可以使用 @Html.ActionLink 辅助方法将取消按钮转换为锚标记,并应用 css 类使链接看起来像一个按钮,然后在该链接的控制器操作中,您可以返回特定的查看。

    @Html.ActionLink("Cancel","Index","Products",null, new { @class="clsButtonFake"})
    

    在表单中使用 2 个提交按钮。一个用于实际提交,一个用于取消。并在您的控制器操作中,检查哪个按钮调用了操作方法。 你可以阅读更多关于它here in this answer.

    【讨论】:

      【解决方案2】:

      很多答案在 Chrome 或 ie 浏览器中都有效,但不是全部。

      这一切都奏效了 -

      <input type="button" value="Cancel" onclick="location.href='@Url.Action("Index","Home")';"/>
      

      【讨论】:

        【解决方案3】:

        这是我的按钮 HTML:

        <button type="button"
                class="btn btn-inverse"
                id="cancel"
                onclick="window.history.back()">
                <i class="icon-remove icon-large"></i>
                <br />@Localization.Cancel
        </button>
        

        然后在某些视图中自定义onclick 属性,我这样做:

        <script>
        
            $(document).ready(function ()
            {
                $("#cancel").
                    attr("onClick",
                    "document.location.href='@Html.Raw(Url.Action("Index", "Standard",
                     new { ManualId = Model.ManualId, ChapterId = Model.ChapterId }))'");
            });
        
        </script>
        

        【讨论】:

        • 什么是 Localization.Cancel ?
        • 请注意,如果重新加载(回发)表单,window.history.back() 将不起作用。它只会带您回到表单的早期版本。
        • @MatthewLock 这是一个来自 .resx 文件的本地化字符串。关于重载,你说的很对……不是在所有情况下都有效,但没关系。
        【解决方案4】:

        或者一个样式化的提交按钮:

        <input type="submit" value="Save Form" name="Save" class="submit-button btn-form" /> 
        

        然后是取消按钮的Javascript:

        <input type="button" onclick="document.location.href('Home/Index')" value="Cancel" class="cancel-button btn-form" />
        // Note: This avoids any of the validation that may happen in the model that 
        // normally gets triggered with a submit
        

        【讨论】:

          【解决方案5】:

          因此,使用 Shyju 的方法,您可以使用内置的 MVC ActionLink 帮助器。这样做,您需要通过 css 完成任何图像或图标。但是,这更容易缓存,尤其是当您在 css 中为图像使用 base64 字符串时。

          我喜欢 Adauto 的方法,因为它让您可以更好地控制标记。 MVC Html Helpers 很不错,但他们似乎仍然抱着“不用担心,我们会为您处理”的 WebForms 思维模式。

          我要添加的一件事是 Url.Content。

          <a href="@Url.Action("CancelBid", "Auction")"><img src="@Url.Content("~/Content/css/img/btn-submit.png" class="btn-form" /></a>
          

          让你的视图必须知道内容相对于它的位置的位置从来都不是一个好主意。

          【讨论】:

          • 谢谢!我专注于答案而忘记了其余的(Url.Content)。
          【解决方案6】:
          <a href="/Auction/[ActionName]">
              <input type="image" src="@Url.Content("~/Content/css/img/btn-cancel.png")" class="btn-form" />
          </a>
          

          如果你想保留它作为按钮的外观,你可以这样做:

          <a href="/Auction/[ActionName]">
              <input type="button" value="Cancel">
          </a>
          

          其中[ActionName] 是返回所需视图的操作的名称。

          【讨论】:

            【解决方案7】:
            <a href="@Url.Action("CancelBid", "Auction")"><img src="../../Content/css/img/btn-submit.png" class="btn-form" /></a>
            

            【讨论】:

              【解决方案8】:

              我最终制作了一个助手,这样我就可以重复使用取消按钮。我添加了一个js确认,以防人们在填写表格后不小心点击了取消按钮。

              @helper FormCancelButton(string cancelUrl)
              {
                  <button type="button" class="btn" onclick="if (confirm('Cancel changes?')) location.href = '@cancelUrl';">Cancel</button>
              }
              

              然后我这样称呼它:

              @FormCancelButton(Url.Action("Index", "User" ))
              

              如果您真的很感兴趣,您也可以尝试detect the dirty state of the form,并且仅在表单已更改时才显示确认对话框。

              【讨论】:

                【解决方案9】:
                     <asp:Button runat="server" class="btn btn-danger"
                       CausesValidation="false" onclick="Cancel_Click" Text="Cancel"/>
                
                
                     protected void Cancel_Click(object sender, EventArgs e)
                     {
                        Response.Redirect("Test.aspx");
                     }
                

                【讨论】:

                • 这是网页表单,不是 MVC
                猜你喜欢
                • 1970-01-01
                • 2011-12-28
                • 1970-01-01
                • 1970-01-01
                • 2012-01-23
                • 2012-03-17
                • 2014-06-02
                • 2012-02-05
                相关资源
                最近更新 更多