MVC activates an action link

Question

I am currently trying to make an html submit, but using the MVC ActionLink helper method, since I don't want this to be a button, I want it to be an underlined link, like the others on my page. This is what I have now

<%= Html.ActionLink("Delete Selected", "DeleteCheckBox", "Domains", "Default.aspx", new { type="submit" }) %> 

This goes back to my action, but all domains that were deleted for deletion are not sent back. (if I use this, <input type="submit" name="DeleteAction" value="Delete" /> it works fine, so I know that this is not something wrong with sending or retrieving checkboxes)

Here is what I still have ...

> "%>

Index

 <h2>Domain List</h2> <h2 style="color: #FF0000"><%= Html.Encode(ViewData[IProwlAdminUI.Utils.Global.ExceptionMessageKey]) %></h2> <h2 style="color: #FF0000"><%= Html.Encode(ViewData["Message"]) %></h2> <% using (Html.BeginForm("DeleteCheckBox", "Domains")) { %> <% if (ViewData.ContainsKey("DeleteMessage")) { %> <h2 style="color: #FF0000"><%= Html.Encode(ViewData["DeleteMessage"]) %></h2> <input type="submit" name="DeleteAction" value="Commit" /> <input type="reset" name="DeleteAction" value="Cancel" /> <% } %> <p> <%= Html.ActionLink("Create New", "Create") %> | <%= Html.ActionLink("Export List", "Export") %> | **<a href="javascript:void(0)" class="DeleteLink">Delete Selected</a>** <% if (ViewData.ContainsKey("Path")) { %> | <%= Html.ReferenceToFile("/download/Domains.xls", "Exported File") %> <% } %> </p> <div style="overflow:scroll; width:100%"> <% Html.Telerik().Grid(Model).Name("Domains") .DataKeys(dataKeys => dataKeys.Add(c => c.DomainId)).DataKeys(dataKeys => dataKeys.Add(c => c.Name)) .Columns(columns => { columns.Template(o => { %> <%= Html.ActionLink("Edit", "Edit", new { id = o.DomainId })%> <% }).Title("Edit"); columns.Template(o => { %> <% if (ViewData.ContainsKey("DeleteMessage")) { %> <input type='checkbox' checked="checked" id='<%= o.Name %>' name='DeleteIds' value='<%= o.DomainId %>' /> <% } %> <% else { %> <input type='checkbox' id='<%= o.Name %>' name='DeleteIds' value='<%= o.DomainId %>' /> <% } %> <% }).Title("Delete"); columns.Bound(o => o.DomainId); columns.Bound(o => o.Name); columns.Bound(o => o.SiteId); columns.Bound(o => o.ScrubAndRedirect); columns.Bound(o => o.ReportingSiteId); columns.Bound(o => o.TrafficCopClass); columns.Bound(o => o.SiteName); columns.Bound(o => o.FeedType); columns.Bound(o => o.Active); }).Sortable().Filterable().DataBinding(db => db.Server().Select("Index", "Domains")).Render();%> </div> <% if (!ViewData.ContainsKey("DeleteMessage")) { %> <input type="submit" name="DeleteAction" value="Delete" /> <% } %> <% } %> <p> <%= Html.ActionLink("Create New", "Create") %> | <%= Html.ActionLink("Export List", "Export") %> <% if (ViewData.ContainsKey("Path")) { %> | <%= Html.ReferenceToFile("/download/Domains.xls", "Exported File") %> <% } %> </p> **<script type="text/javascript"> $(function() { $('.DeleteLink').click(function() { $(this).closest('form')[0].submit(); }); }); </script>** 

Answer 1

You cannot create a hyperlink to submit a form without Javascript.

Using jQuery you can write

 <a href="javascript:void(0)" class="DeleteLink">Delete Selected</a> 

---

 $('.DeleteLink').click(function() { $(this).closest('form')[0].submit(); }); 

Answer 2

By adding to SLaks, you can make sure that your jQuery code runs at the appropriate time (regardless of the location on the page) using the following:

 <script type="text/javascript"> $(document).ready(function(){ $('.DeleteLink').click(function() { $(this).closest('form')[0].submit(); }); }); </script> 

By wrapping the code in $(document).ready(...) , you will make sure that the code will not run before the page is loaded.

Answer 3

Instead of creating an action link, you'd better write client-side javascript code that will submit the form for you when the link is clicked.

You can easily use jQuery by using the send method to a selector that selects the form:

 <form id="myForm"> <!-- Other form inputs --> <a id="myFormSubmit" href="#">Submit form</a> </form> <script> // Assuming you have jQuery loaded. $(document).ready(function() { // Can load the results of the selector // for the form here. // No need to load it every time in the // event handler. // Even though more often than not the // form will cause a reload of the page // if you are using the jQuery form validation // plugin, you could end up calling the click // event repeatedly. var myForm = $("#myForm"); // Add the event handler for the link. $("#myFormSubmit").click(function() { // Submit the form. myForm.submit(); // Return false, don't want // default click action to take place. return false; }); }); </script> 

Answer 4

Most of the answers I've seen rely on jQuery or some fancy ajax submit, which I didn't want. Therefore, I wrote the HtmlHelper extension method, which creates a regular form with hidden inputs and buttons. It works in the process ... can still handle this task. Here is the class:

 public static class HtmlHelperExt { public static HtmlString PostLink(this HtmlHelper html, string text, string action, object routeValues) { var tbForm = new TagBuilder("form"); tbForm.MergeAttribute("method", "POST"); tbForm.MergeAttribute("action", action); var inputDict = HtmlHelper.ObjectToDictionary(routeValues); var inputs = new List<string>(); foreach (var key in inputDict.Keys) { const string inputFormat = @"<input type='hidden' name='{0}' value='{1}' />"; var input = String.Format(inputFormat, key, html.Encode(inputDict[key])); inputs.Add(input); } var submitBtn = "<input type='submit' value='{0}'>"; inputs.Add(String.Format(submitBtn, text)); var innerHtml = String.Join("\n", inputs.ToArray()); tbForm.InnerHtml = innerHtml; // return self closing return new MvcHtmlString(tbForm.ToString()); } } 

To use it, in Razor you write:

 @Html.PostLink("ButtonText", "/Controller/Action", new { id = item.Id, hello="world" }) 

And as a result, in HTML you get:

 <form action="/Controller/Action" method="POST"> <input type="hidden" name="id" value="1"> <input type="hidden" name="hello" value="world"> <input type="submit" value="ButtonText"> </form> 

Answer 5

if you use bootstrap to make the button look like a link, just add the btn-link class like

 <input type="submit" name="ActionType" value="Edit" class="col-md-1 btn btn-link" /> 

Answer 6

This can be done by calling a class from javascript in C #

  <%= Html.ActionLink("Delete Selected", "DeleteCheckBox", "Domains", "Default.aspx", new { class= "dosubmit" }) %> 

Razor Syntax

 @Html.ActionLink("Delete Selected", "Index", "IndexController", "null", new { @class= "dosubmit" }) 

Then call jquery to submit.

 <script type="text/javascript"> $(function() { $('dosubmit').click(function(e) { e.preventDefault(); $(this).parents('form').first().submit(); }); }); </script> 

Update 1 # A little explanation where we can use this.

 <input type="submit" name="dosubmit" value="Submit something" /> 

Going to the original MVC question make action link execute submit
Index.cshtml example chtml View File

 @using(Html.BeginForm("Index","ControllerName",FormMethod.Post)) { // Call another view <a></a> with bootstrap button class @Html.ActionLink("Submit something", "Index", "IndexController", "null", new { @class= "dosubmit btn btn-success" }) } // Perform a post submit method with same button <script type="text/javascript"> $(function() { $('dosubmit').click(function(e) { e.preventDefault(); $(this).parents('form').first().submit(); }); }); </script> 

Answer 7

I tried to use the summit in Razor, but I needed to make some changes. Including the controller name in the action link caused the page to bypass jQuery and submit the form directly. So, I tried the following:

 @using (Html.BeginForm())... @Html.ActionLink("ButtonText", "Action", null, null, new { @id = "ButtonID", @class = "btn btn-primary btn-sm" }) 

From there, I was able to access the button by ID and use the onclick method.

 $("#ButtonID").on("click", function (e) { url = $(this).attr('href'); // without Action in link url shows as // /Controller e.preventDefault(); // use this or return false // now we can do an Ajax submit; }); 

I must add that I wanted the form to be submitted, but did not necessarily want to be transferred to another page and / or action.

Answer 8

I did it in another way, I placed the link inside the form tag and submitted the form by link

 <form id="formid" action= > http="javascript:document.getElementById("formId".submit()" </form>