Publishing a form to another MVC action depending on the submit button clicked

Question

I am using ASP.Net MVC 4 . I have several buttons on the view. I am currently invoking the same action method; and I distinguish the pressed button using the name attribute.

 @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> } 

// ACTION

  [HttpPost] public ActionResult Submit(SearchCostPage searchModel, string Command) { SessionHelper.ProjectCase = searchModel.ProjectCaseNumber; if (string.Equals(Command, Constants.SearchPage.ExportToExcel)) { } } 

QUESTIONS

• Is there a way to directly access the various methods of POST actions with different button presses (without special routing)?
• If there is no custom routing, how can we do this using custom routing?

Literature:

• Jimmy Bogard - POST Cleanup in ASP.NET MVC

Answer 1

BEST ANSWER 1:

ActionNameSelectorAttribute mentioned in

• How do you handle multiple submit buttons in the ASP.NET MVC Framework?

• ASP.Net MVC 4 Form with two buttons / submit actions

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

ANSWER 2

Link: dotnet-tricks - Handling multiple submit buttons in one form - MVC Razor

Second approach

Adding a new form for processing Cancel click. Now, by clicking the "Cancel" button, we will post the second form and redirect to the home page.

Third approach: Script client

 <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 2

You can choose the URL in which the form should be published (and therefore the action invoked) in different ways, depending on browser support:

• for new browsers that support HTML5, you can use the submit button formaction attribute
• for older browsers that do not support this, you need to use JavaScript, which changes the action attribute when the button is pressed and before sending

This way you do not need to do anything on the server side.

Of course, you can use the Url extension methods in your Razor to indicate the action of the form.

For browsers that support HMTL5: simply specify the submit buttons as follows:

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

For older browsers, I recommend using an unobtrusive script like this (include it in your “layout”):

 $(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); }); 

NOTE. This script will handle a click for any element on the page with type=submit and data-form-action attributes. When this happens, it takes the value of the data-form-action attribute and sets the action of the contained form to the value of this attribute. Since this is a delegated event, it will work even for HTML loaded using AJAX, without additional steps.

Then you just need to add the data-form-action attribute with the desired data-form-action url to your button, for example:

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

Please note that clicking the button changes the action of the form, and immediately after that the browser sends the form to the desired action.

As you can see, this does not require special routing, you can use the standard Url extension methods, and you have nothing special in modern browsers.

Answer 3

It seems to me that you have one command with two outputs, I would choose for this a change for both the client and the server.

On the client, use JS to create the URL you want to send (use jQuery for simplicity), i.e.

 <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" ... /> 

Now on the server side we can add a new route to handle excel request

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

You can set up 2 different actions

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

Or you can use the ActionName attribute as an alias

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

Answer 4

you can use ajax calls to call different methods without postback

 $.ajax({ type: "POST", url: "@(Url.Action("Action", "Controller"))", data: {id: 'id', id1: 'id1' }, contentType: "application/json; charset=utf-8", cache: false, async: true, success: function (result) { //do something } });