tags:

views:

91

answers:

3

I am currently trying to make an html submit occur, but using the MVC helper method ActionLink as I do not want it to be a button, I want it to be an underlined link like the rest on my page. This is what I have currently

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

This jumps back to my action fine, but all the domains that are checked off to be deleted are not sent back. (if I use this, <input type="submit" name="DeleteAction" value="Delete" /> it works fine so I know it's not something wrong with submitting or retrieving the check boxes)

Here's what I have so far ...

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage>" %> <%@ Import Namespace="IProwlAdminUI.Helpers" %>

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

+1  A: 

You cannot make a hyperlink 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();
});
SLaks
Where would I put the jQuery statements? Directly in the View or do I create a separate javascript file for it? Also, will this know what action to submit the form to? (Sorry I haven't worked much with jquery or javascript)
DMan
You can put it in a `<script>` tag in the view.
SLaks
`$(this).closest('form')` will find the innermost `<form>` tag that contains the clicked element. Therefore, it will submit the form containing the link.
SLaks
Well I have added these lines to my View, and when I click the link nothing happens. The a href link is inside of the form, and the function was places just before the closing </asp:Content> tag (putting it outside this tag caused an error) Any insite on why this may be? I am not using the <form> tag, but rather the Html.BeginForm (so that I can specify the controller and action the form should return to).
DMan
You probably put the script in the `<head>` tag, which causes it to execute before the page loads. Therefore, when the script runs, there aren't any `.DeleteLink` elements to add event handlers to. Wrap the code in `$(function() { ... })` or move it below the forms.
SLaks
The `Html.BeginForm` method renders a normal `<form>` tag, so it doesn't matter.
SLaks
Including the <script> tag? sorry very new to this, and also it's not wrapped in anytag except the <asp:Content> tag because it is literally the last line before this ending tag occurs.
DMan
@DMan: No, only the code inside of it. If the `<script>` tag is already after the forms, it should already work. Can you show me the rendered source of your page on http://JSBin.com?
SLaks
how do I send that to you on there?
DMan
A: 

Instead of creating an action link, you are better off writing client-side javascript code which will submit the form for you when the link is clicked.

You can easily use jQuery to do this, using the submit method on a selector which 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>
casperOne
Your `formSelector` is a jQuery object, not a selector. Selectors are strings such as `#myForm` or `form:has(a.DeleteLink)`. Also, since the form submit will reload the page, there is no point in that variable in the first place.
SLaks
@SLaks: Yes, it's a jQuery object, but it's an object that represents the results of the selector, so it was more semantically correct IMO. I've changed it regardless. As for reloading the page, that's not true. If form submission fails (say you are using jQuery form validation) then the page will *not* always reload on click.
casperOne
This method does not work either, it just puts a # at the end of my URL
DMan
A: 

Adding to SLaks, you can ensure that your jQuery code fires at the appropriate time (regardless of location on the page) by 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 ensure that the code will not run before the page is finished loading.

Todd