2010-08-10 2 views
7

В настоящее время я пытаюсь создать html submit, но с помощью вспомогательного метода MVC ActionLink, поскольку я не хочу, чтобы это была кнопка, я хочу, чтобы это была подчеркнутая ссылка, как и остальные на моей странице. Это то, что я в настоящее времяMVC make action link выполнить submit

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

Это подскакивает назад к моему действия штрафа, но все домены, которые проверяются прочь, чтобы быть удалены не возвращаются. (Если я использую это, <input type="submit" name="DeleteAction" value="Delete" /> он работает отлично, так что я знаю, что это не что-то не так с подачи или извлечения флажков)

Вот что я до сих пор ...

>»%>

Индекс

<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

Я написал об этом в своем сообщении в блоге [ASP.NET MVC LinkButton с расширениями HtmlHelper] (http://www.concurrentdevelopment.co.uk/blog/index.php/2011/02/asp-net- MVC-LinkButton-с-HtmlHelper-расширений /). Pete – PeterFearn

ответ

4

Вы не можете создать гиперссылку, чтобы отправить форму без Javascript.

Использование JQuery, вы можете написать

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

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

Куда бы я поставил инструкции jQuery? Непосредственно в представлении или я создаю для него отдельный файл javascript? Кроме того, будет ли это известно, какие действия необходимо отправить форме? (Извините, я не много работал с jquery или javascript) – DMan

+0

Вы можете поместить его в тег '

1

Вместо того чтобы создать ссылку действий, вы лучше писать Клиентский JavaScript код, который будет представлять форму для вас, когда связь щелчок.

Вы можете легко использовать jQuery сделать это, используя submit method на селектор, который выбирает форму:

<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

Ваш 'formSelector' - это объект jQuery, а не селектор. Селекторы представляют собой строки, такие как '# myForm' или' form: has (a.DeleteLink) '. Кроме того, поскольку форма submit будет перезагружать страницу, в этой переменной нет смысла. – SLaks

+0

@SLaks: Да, это объект jQuery, но это объект, который представляет результаты селектора, поэтому он был более семантически корректным IMO. Я изменил его независимо. Что касается перезагрузки страницы, это неверно. Если подача формы не удалась (скажем, вы используете проверку формы jQuery), страница будет * не * всегда загружаться при нажатии. – casperOne

+0

Этот метод также не работает, он просто помещает # в конец моего URL-адреса – DMan

2

Добавление к SLaks, вы можете убедиться, что ваш Jquery код срабатывает в соответствующее время (независимо от того, расположение на странице) с помощью следующих действий:

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

обертыванием код в $(document).ready(...) вы убедитесь, что код не будет работать, прежде чем страница загрузилась.

1

Большинство ответов, которые я видел, полагаются на jQuery или на какой-то причудливый ajax submit, чего я не хотел. Поэтому я написал метод расширения HtmlHelper, который создает обычную форму со скрытыми вводами и кнопками. Это незавершенная работа ... все еще может справиться с этой задачей.Вот класс:

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

Чтобы использовать его, в бритве Вы пишете:

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

И как результат, в HTML вы получите:

<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

, если вы используете загрузчик, чтобы чтобы кнопка выглядела как ссылка, просто добавьте класс btn-link, например

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

Это может быть сделано путем вызова класса из JavaScript в C#

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

Для Razor Синтаксис

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

Затем вызовите Jquery сделать кнопку.

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

Update 1 # небольшое объяснение, где мы можем использовать это.

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

Переход к исходному вопросу MVC сделать ссылку действие выполнить отправить
Index.cshtml пример CHTML Просмотр файла

@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

. Вы действительно должны добавить объяснение, почему этот код должен работать - вы также можете добавлять комментарии в самом коде - в его текущей форме, это не дает никаких объяснений, которые могут помочь остальной части сообщества понять, что вы сделали, чтобы решить/ответить на вопрос. – ishmaelMakitla

0

Я попытался подход Саммита выше в бритве, но необходимо, чтобы сделать некоторые изменения. Включение имени контроллера в ссылку действия заставило страницу обойти JQuery и напрямую отправить форму. Итак, я попытался следующие:

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

Оттуда я был в состоянии получить доступ к кнопке по идентификатору и использовать метод 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; 

}); 

Я хотел бы добавить, что я хотел формы представить, но не обязательно хочу быть переведен на другую страницу и/или действия.