【问题标题】:MVC razor form with multiple different submit buttons?具有多个不同提交按钮的 MVC 剃须刀表单?
【发布时间】:2013-11-08 03:26:07
【问题描述】:

Razor 视图在一个表单中有 3 个按钮。所有按钮的操作都需要表单值,这些值基本上是输入字段的值。

每次我单击任何按钮时,它都会将我重定向到默认操作。您能否指导我如何根据按钮按下将表单提交到不同的操作?

非常感谢您的时间、指导和帮助。

【问题讨论】:

标签: c# asp.net-mvc asp.net-mvc-4 razor


【解决方案1】:

你也可以试试这个:

<input type="submit" name="submitbutton1" value="submit1" />
<input type="submit" name="submitbutton2" value="submit2" />

然后在你的默认函数中调用你想要的函数:

if( Request.Form["submitbutton1"] != null)
{
    // Code for function 1
}
else if(Request.Form["submitButton2"] != null )
{
    // code for function 2
}

【讨论】:

  • 这不会使提交按钮将标签显示为“submit1”等吗?
  • 问题不在于标签。但是是的,在这个例子中,按钮将被标记为 submit1 和 submit2
  • @BerggreenDK:如果您需要不同的标签,可以使用
【解决方案2】:

这个优雅的解决方案适用于提交按钮的数量:

@Html.Begin()
{
  // Html code here
  <input type="submit" name="command" value="submit1" />
  <input type="submit" name="command" value="submit2" />

}

并且在您的控制器的操作方法中接受它作为参数。

public ActionResult Create(Employee model, string command)
{
    if(command.Equals("submit1"))
    {
      // Call action here...
    }
    else
    {
      // Call another action here...
    }
}

【讨论】:

  • 这太棒了!希望我能给你更多的支持!
  • @PaulZahra:这是我使用的。我不需要为了再次发布或重新发布而削减您的解决方案。请立即删除反对票。
  • @SimpleMan 我没有对解决方案主张版权...我并不是要暗示您进行了复制和粘贴练习...我想说的是它在事实上,这是我 14 分钟前发布的重复答案……因此我投了反对票……这不公平吗?
  • @PaulZahra 我不这么认为它是重复的。很多人在几分钟或几小时内发布相同的分析器。那么这是否意味着他们应该投反对票?你认为这对任何人都有好处吗?您是否逐行比较了我们的答案?你在哪里找到重复的?请合理证明。
  • 我不会编辑我的答案,因为我不认为它与你的重复。如果我根本没有这样做,那我为什么要编辑我的答案?
【解决方案3】:

在视图中

<form action="/Controller_name/action" method="Post>

 <input type="submit" name="btn1" value="Ok" />
 <input type="submit" name="btn1" value="cancel" />
 <input type="submit" name="btn1" value="Save" />
</form>

在行动中

string str =Request.Params["btn1"];
if(str=="ok"){


}
if(str=="cancel"){


}
if(str=="save"){


}

【讨论】:

    【解决方案4】:

    您可以使用 JS + Ajax。 例如,如果您有任何按钮,您可以说出它在单击事件时必须执行的操作。 代码如下:

     <input id="btnFilterData" type="button" value="myBtn">
    

    这里是 html 中的按钮: 在脚本部分,你需要使用这段代码(这部分应该在文档的末尾):

    <script type="text/javascript">
    $('#btnFilterData').click(function () {
        myFunc();
    });
    </script>
    

    最后,你需要添加ajax函数(在另一个脚本部分,应该放在文档的开头):

    function myFunc() {
        $.ajax({
            type: "GET",
            contentType: "application/json",
            url: "/myController/myFuncOnController",
            data: {
                 //params, which you can pass to yu func
            },
            success: function(result) {
    
            error: function (errorData) {
    
            }
        });
    };
    

    【讨论】:

    • 另一个保持角色分离的好答案。任何人都不需要触摸控制器来进行这种 UI 更改。
    【解决方案5】:

    我找到的最干净的解决方案如下:

    这个例子是要执行两个非常不同的动作;基本前提是使用值将数据传递给动作。

    在你看来:

    @using (Html.BeginForm("DliAction", "Dli", FormMethod.Post, new { id = "mainForm" }))
    {
        if (isOnDli)
        {
            <button name="removeDli" value="@result.WeNo">Remove From DLI</button>
        }
        else
        {
            <button name="performDli" value="@result.WeNo">Perform DLI</button>
        }
    }
    

    那么在你的行动中:

        public ActionResult DliAction(string removeDli, string performDli)
        {
            if (string.IsNullOrEmpty(performDli))
            {
                ...
            }
            else if (string.IsNullOrEmpty(removeDli))
            {
                ...
            }
    
            return View();
        }
    

    此代码应该易于更改,以实现主题的变化,例如将按钮的名称更改为相同的名称,则您只需要在操作等上设置一个参数,如下所示:

    在你看来:

    @using (Html.BeginForm("DliAction", "Dli", FormMethod.Post, new { id = "mainForm" }))
    {
    
            <button name="weNo" value="@result.WeNo">Process This WeNo</button>
    
            <button name="weNo" value="@result.WeNo">Process A Different WeNo This Item</button>
    }
    

    那么在你的行动中:

        public ActionResult DliAction(string weNo)
        {
            // Process the weNo...
    
            return View();
        }
    

    【讨论】:

      【解决方案6】:

      这对我有用。

      formaction="@Url.Action("Edit")"
      

      片段:

       <input type="submit" formaction="@Url.Action("Edit")" formmethod="post" value="Save" class="btn btn-primary" />
      
      <input type="submit" formaction="@Url.Action("PartialEdit")" formmethod="post" value="Select Type" class="btn btn-primary" />
      
       [HttpPost]
              [ValidateAntiForgeryToken]
              public ActionResult Edit( Quote quote)
              {
                 //code 
             }
       [HttpPost]
              [ValidateAntiForgeryToken]
              public ActionResult PartialEdit(Quote quote)
              {
                 //code
              }
      

      可能会帮助那些想要使用 2 种不同的操作方法而不是使用选择器或使用客户端脚本的一种方法的人。

      【讨论】:

      • 如何在没有 MVC 的 Razor 页面中使用它? formaction 不断将我带到默认的表单操作“Course”。我什么时候想去“Courses_Temp”?
      【解决方案7】:

      尝试在视图中以自己的形式包装每个按钮。

        @using (Html.BeginForm("Action1", "Controller"))
        {
          <input type="submit" value="Button 1" />
        }
      
        @using (Html.BeginForm("Action2", "Controller"))
        {
          <input type="submit" value="Button 2" />
        }
      

      【讨论】:

      • 如果我需要两个按钮的表单值,但我采取了不同的操作,例如编辑或删除,该怎么办
      【解决方案8】:

      您可以使用普通按钮(非提交)。使用 javascript 将表单的“action”属性(在“onclick”事件中)重写为您想要的内容,然后提交。使用自定义帮助器生成按钮(在项目根目录的 App_Code 文件夹中创建文件“Helper.cshtml”)。

      @helper SubmitButton(string text, string controller,string action)
      {   
          var uh = new System.Web.Mvc.UrlHelper(Context.Request.RequestContext);
          string url = @uh.Action(action, controller, null);   
          <input type=button  onclick="(
                                             function(e)
                                                       {
                                                         $(e).parent().attr('action', '@url'); //rewrite action url
                                                         //create a submit button to be clicked and removed, so that onsubmit is triggered
                                                         var form = document.getElementById($(e).parent().attr('id'));
                                                         var button = form.ownerDocument.createElement('input');
                                                         button.style.display = 'none';
                                                         button.type = 'submit';
                                                         form.appendChild(button).click(); 
                                                         form.removeChild(button);              
                                                        }
                                            )(this)" value="@text"/>
      }
      

      然后将其用作:

      @Helpers.SubmitButton("Text for 1st button","ControllerForButton1","ActionForButton1")
      @Helpers.SubmitButton("Text for 2nd button","ControllerForButton2","ActionForButton2")
      ...
      

      在您的表单中。

      【讨论】:

      • 虽然选择的答案和大多数其他答案都可以正常工作,但我宁愿选择这个答案,因为它可以很好地保持角色分离。不应针对此类 UI 更改修改控制器(前提是您已经准备好控制器逻辑)。因此,使用 javascript 将更改保留在它们所属的位置:仅 UI。
      【解决方案9】:

      最简单的方法是使用html5FormActionFormMethod

      <input type="submit" 
                 formaction="Save"
                 formmethod="post" 
                 value="Save" />
          <input type="submit"
                 formaction="SaveForLatter"
                 formmethod="post" 
                 value="Save For Latter" />
          <input type="submit"
                 formaction="SaveAndPublish"
                 formmethod="post"
                 value="Save And Publish" />
      
      [HttpPost]
      public ActionResult Save(CustomerViewModel model) {...}
      
      [HttpPost]
      public ActionResult SaveForLatter(CustomerViewModel model){...}
      
      [HttpPost]
      public ActionResult SaveAndPublish(CustomerViewModel model){...}
      

      还有很多其他的方式我们可以使用,看这篇文章ASP.Net MVC multiple submit button use in different ways

      【讨论】:

        【解决方案10】:

        除了@Pablo 的回答,对于较新的版本,您还可以使用 asp-page-handler 标签助手。

        在页面中:

        <button asp-page-handler="Action1" type="submit">Action 1</button>
        <button asp-page-handler="Action2" type="submit">Action 2</button>
        

        然后在控制器中:

            public async Task OnPostAction1Async() {...}
            public async Task OnPostAction2Async() {...}
        

        【讨论】:

          【解决方案11】:

          信息来自: http://www.codedigest.com/posts/46/multiple-submit-button-in-a-single-form-in-aspnet-mvc

          对于最近才来的小伙子,您可以使用 HTML 5 Formaction 属性。

          在您的&lt;input&gt;&lt;button&gt;

          只要定义:

          <button id="btnPatientSubmit" type="submit" class="btn btn-labeled btn-success" formaction="Edit" formmethod="post">
          

          注意添加了formation="Edit",它指定了我想在我的控制器中提交哪个ActionResult。

          这将允许您拥有多个提交按钮,每个按钮都可以提交到控制器中的独立 ActionResult(方法)。

          【讨论】:

            【解决方案12】:

            此答案将向您展示如何使用 razor 在 asp.net 中工作,以及如何控制多个提交按钮事件。例如,我们有两个按钮,一个按钮将我们重定向到“PageA.cshtml”,另一个将我们重定向到“PageB.cshtml”。

            @{
              if (IsPost)
                {
                   if(Request["btn"].Equals("button_A"))
                    {
                      Response.Redirect("PageA.cshtml");
                    }
                  if(Request[&quot;btn"].Equals("button_B"))
                    {
                      Response.Redirect(&quot;PageB.cshtml&quot;);
                    }
              }
            }
            <form method="post">
               <input type="submit" value="button_A" name="btn"/>;
               <input type="submit" value="button_B" name="btn"/>;          
            </form>
            

            【讨论】:

            • mvc 没有回发,这是误导。
            • @RandomUs1r 这似乎是 Razor 独立语法(实际上,property IsPost 存在,但没有记录)
            • IsPost 在 MVC 5 之后不再存在。
            【解决方案13】:

            如果您使用的是纯剃须刀,即没有 MVC 控制器:

            <button name="SubmitForm" value="Hello">Hello</button>
            <button name="SubmitForm" value="World">World</button>
            @if (IsPost)
            {
                <p>@Request.Form["SubmitForm"]</p>
            }
            

            单击每个按钮应呈现 Hello 和 World。

            【讨论】:

            • 但这并没有提交表单。还是我错了?除了第一个按钮的默认表单操作之外,您如何使用按钮调用一个完全不同的页面?
            【解决方案14】:

            没有看到使用标签助手(核心 MVC)的答案,所以这里(删除操作):

            在 HTML 上:

            <form action="" method="post" role="form">
            <table>
            @for (var i = 0; i < Model.List.Count(); i++)
            {
                <tr>
                    <td>@Model.List[i].ItemDescription</td>
                    <td>
                        <input type="submit" value="REMOVE" class="btn btn-xs btn-danger" 
                         asp-controller="ControllerName" asp-action="delete" asp-route-idForDeleteItem="@Model.List[i].idForDeleteItem" />
                    </td>
                </tr>
            }
            </table>
            </form>
            

            在控制器上:

            [HttpPost("[action]/{idForDeleteItem}"), ActionName("Delete")]
            public async Task<IActionResult> DeleteConfirmed(long idForDeleteItem)
            {
                ///delete with param id goes here
            }
            

            不要忘记在类声明之前使用[Route("[controller]")] - 在控制器上。

            【讨论】:

              猜你喜欢
              • 2011-08-07
              • 1970-01-01
              • 2012-06-04
              • 2018-11-24
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多