根据单击的提交按钮将表单发布到不同的MVC发布操作

Question

我在用ASP.Net MVC 4.我在视图上有多个按钮..目前我调用相同的动作方法; 我正在区分使用name属性的单击按钮.

@using (Html.BeginForm("Submit", "SearchDisplay", new { id = Model == null ? Guid.NewGuid().ToString() : Model.SavedSearch }, FormMethod.Post))
{
    <div class="leftSideDiv">
        <input type="submit" id="btnExport" class="exporttoexcelButton" 
        name="Command" value="Export to Excel" />
    </div>

    <div class="pageWrapperForSearchSubmit">
        <input type="submit" class="submitButton" 
         value="Submit" id="btnSubmitChange" />
    </div>
}

//行动

    [HttpPost]
    public ActionResult Submit(SearchCostPage searchModel, string Command)
    {
        SessionHelper.ProjectCase = searchModel.ProjectCaseNumber;

        if (string.Equals(Command, Constants.SearchPage.ExportToExcel))
        {

        }
   }

质询

1. 有没有办法在不同的按钮点击(没有自定义路由)指向不同的POST操作方法？
2. 如果没有自定义路由,我们怎样才能使用自定义路由？

参考文献:

1. Jimmy Bogard - 清理ASP.NET MVC中的POST

Answer 1

您可以选择必须以不同方式发布表单的URL(以及调用的操作),具体取决于浏览器支持:

• 对于支持HTML5的较新浏览器,您可以使用提交按钮的格式属性
• 对于不支持此功能的旧浏览器,您需要使用一些JavaScript来更改表单的action属性,单击按钮时以及提交之前

通过这种方式,您无需在服务器端执行任何特殊操作.

当然,您可以Url在Razor中使用扩展方法来指定表单操作.

对于支持HMTL5的浏览器:只需定义您的提交按钮,如下所示:

<input type='submit' value='...' formaction='@Url.Action(...)' />

对于旧版浏览器,我建议使用这样一个不引人注目的脚本(将其包含在"主布局"中):

$(document).on('click', '[type="submit"][data-form-action]', function (event) {
  var $this = $(this);
  var formAction = $this.attr('data-form-action');
  $this.closest('form').attr('action', formAction);
});

注意:此脚本将处理页面中具有type=submit和data-form-action属性的任何元素的单击.发生这种情况时,它会获取data-form-action属性值并将包含表单的操作设置为此属性的值.由于它是一个委托事件,它甚至可以用于使用AJAX加载的HTML,而无需采取额外步骤.

然后,您只需添加一个data-form-action带有所需操作URL 的属性到您的按钮,如下所示:

<input type='submit' data-form-action='@Url.Action(...)' value='...'/>

请注意,单击该按钮会更改表单的操作,然后,浏览器会将表单发布到所需的操作.

如您所见,这不需要自定义路由,您可以使用标准Url扩展方法,并且在现代浏览器中没有什么特别的功能.

Answer 2

最佳答案1:

ActionNameSelectorAttribute 提到的

1. 如何在ASP.NET MVC框架中处理多个提交按钮？

2. ASP.Net MVC 4表单,带有2个提交按钮/操作

http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-scenarios.aspx

答案2

参考:dotnet-tricks - 在同一表格上处理多个提交按钮 - MVC Razor

第二种方法

添加新表单以处理取消按钮单击.现在,在取消按钮上单击,我们将发布第二个表单,并将重定向到主页.

第三种方法:客户端脚本

<button name="ClientCancel" type="button" 
    onclick=" document.location.href = $('#cancelUrl').attr('href');">Cancel (Client Side)
</button>
<a id="cancelUrl" href="@Html.AttributeEncode(Url.Action("Index", "Home"))" 
style="display:none;"></a>

Answer 3

这听起来像你对我有什么是2个输出一个命令,我会选择做的改变都客户端和服务器这一点.

在客户端,使用JS构建要发布的URL(为简单起见,使用JQuery)即

<script type="text/javascript">
    $(function() {
        // this code detects a button click and sets an `option` attribute
        // in the form to be the `name` attribute of whichever button was clicked
        $('form input[type=submit]').click(function() {
            var $form = $('form');
            form.removeAttr('option');
            form.attr('option', $(this).attr('name'));
        });
        // this code updates the URL before the form is submitted
        $("form").submit(function(e) { 
            var option = $(this).attr("option");
            if (option) {
                e.preventDefault();
                var currentUrl = $(this).attr("action");
                $(this).attr('action', currentUrl + "/" + option).submit();     
            }
        });
    });
</script>
...
<input type="submit" ... />
<input type="submit" name="excel" ... />

现在在服务器端,我们可以添加一个新路由来处理excel请求

routes.MapRoute(
    name: "ExcelExport",
    url: "SearchDisplay/Submit/excel",
    defaults: new
    {
        controller = "SearchDisplay",
        action = "SubmitExcel",
    });

您可以设置2个不同的操作

public ActionResult SubmitExcel(SearchCostPage model)
{
   ...
}

public ActionResult Submit(SearchCostPage model)
{
   ...
}

或者您可以将该ActionName属性用作别名

public ActionResult Submit(SearchCostPage model)
{
   ...
}

[ActionName("SubmitExcel")]
public ActionResult Submit(SearchCostPage model)
{
   ...
}