2010-08-10 24 views
7

Actualmente estoy tratando de hacer un envío de html, pero usando el método MVC helper ActionLink ya que no quiero que sea un botón, quiero que sea un enlace subrayado como el resto en mi página. Esto es lo que tengo actualmenteenlace MVC make action realiza un envío

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

Esto salta de nuevo a mi multa acción, pero todos los dominios que están marcados fuera se va a eliminar, no son enviados de vuelta. (Si uso esto, <input type="submit" name="DeleteAction" value="Delete" /> que funciona bien, así que sé que no es algo malo en la presentación o recuperación de las casillas de verificación)

Esto es lo que tengo hasta ahora ...

>" %>

Índice

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

+0

He escrito sobre esto en mi blog [ASP.NET MVC LinkButton con extensiones HtmlHelper] (http://www.concurrentdevelopment.co.uk/blog/index.php/2011/02/asp-net- mvc-linkbutton-with-htmlhelper-extensions /). Pete – PeterFearn

Respuesta

4

No puede hacer que un hipervínculo envíe un formulario sin Javascript.

Usando jQuery, puede escribir

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

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

¿Dónde pondré las declaraciones de jQuery? ¿Directamente en la Vista o creo un archivo javascript por separado? Además, ¿sabrá a qué acción enviar el formulario? (Lo siento, no he trabajado mucho con jquery o javascript) – DMan

+0

Puedes ponerlo en una etiqueta '

1

En lugar de crear un vínculo de acción, es mejor escribir del lado del cliente código javascript que se envíe el formulario para que cuando el enlace se hace clic.

Usted puede utilizar fácilmente jQuery a ello, el uso de la submit method en un selector que selecciona la forma:

<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> 
+0

Su 'formSelector' es un objeto jQuery, no un selector. Los selectores son cadenas como '# myForm' o' form: has (a.DeleteLink) '. Además, dado que el formulario enviado volverá a cargar la página, no tiene sentido esa variable en primer lugar. – SLaks

+0

@SLaks: Sí, es un objeto jQuery, pero es un objeto que representa los resultados del selector, por lo que fue más correcto desde el punto de vista semántico. Lo he cambiado independientemente. En cuanto a volver a cargar la página, eso no es verdad. Si el envío del formulario falla (digamos que está utilizando la validación del formulario jQuery), la página * no * siempre se volverá a cargar al hacer clic. – casperOne

+0

Este método tampoco funciona, solo pone un # al final de mi URL – DMan

2

Agregando a SLaks, puede asegurarse de que sus fuegos de código jQuery en el momento adecuado (sin tener en cuenta ubicación de la página) utilizando la siguiente:

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

al envolver el código en $(document).ready(...) se asegura de que el código no se ejecutará antes de que la página haya terminado de cargarse.

1

La mayoría de las respuestas que he visto se basan en jQuery o hacen algún ajax de lujo, que no es lo que quería. Así que escribí el método de extensión HtmlHelper que crea una forma simple con entradas y botones ocultos. Es un trabajo en progreso ... todavía puede hacer el trabajo.Aquí está la clase:

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

Para usarlo, en la maquinilla de afeitar se escribe:

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

Y como resultado, en HTML que se obtiene:

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

si está utilizando bootstrap, a hacer que un botón se vea como un enlace simplemente agregue la clase btn-link, por ejemplo

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

Esto se puede hacer por clase llamando desde JavaScript en C#

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

Para Razor Sintaxis

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

A continuación, llame jQuery para hacer submit.

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

Actualización 1 # pequeña explicación en la que podemos utilizar esto.

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

ir a la pregunta original MVC hacer enlace de acción realizar una presento
Index.cshtml ejemplo chtml Ver archivo

@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> 
+0

Realmente debería agregar alguna explicación sobre por qué debería funcionar este código, también puede agregar comentarios en el código en sí, en su forma actual, no proporciona ninguna explicación que pueda ayudar al resto de la comunidad a comprender lo que hizo para resolver/responder la pregunta. – ishmaelMakitla

0

Me trató el enfoque de la Cumbre anterior en la maquinilla de afeitar, pero tenía que hacer algo cambios. Incluir el nombre del Controlador en el enlace de acción hizo que la página omitiera el JQuery y enviara directamente el formulario. Por lo tanto, he intentado lo siguiente:

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

Desde allí pude acceder al botón de Identificación y utilizar el método onclick.

$("#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; 

}); 

debo añadir que quería enviar el formulario, pero no necesariamente quieren ser transferidos a otra página y/o acción.

Cuestiones relacionadas