MVC使操作鏈接執行提交

我目前正在嘗試使HTML提交發生，但使用MVC幫助器方法ActionLink，因爲我不希望它是一個按鈕，我希望它是一個下劃線的鏈接像其餘在我的頁面上。這是我目前有MVC使操作鏈接執行提交

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

來源

2010-08-10 DMan

我已經在我的博客文章[ASP.NET MVC LinkButton with HtmlHelper extensions]中寫過關於此的內容（http://www.concurrentdevelopment.co.uk/blog/index.php/2011/02/asp-net- MVC-LinkButton的與 - 的HtmlHelper的擴展/）。 Pete – PeterFearn 2011-03-01 11:29:53

您無法使超鏈接提交沒有Javascript的表單。

使用jQuery，你可以寫

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

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

來源

2010-08-10 14:10:01 SLaks

我在哪裏可以放置jQuery語句？直接在視圖中還是爲它創建一個單獨的JavaScript文件？此外，這將知道什麼行動提交表單？（對不起，我沒有用jQuery或JavaScript工作太多） – DMan 2010-08-10 14:17:06

你可以把它放在'

而不是創建一個動作鏈接的，你最好編寫客戶端的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>

來源

2010-08-10 14:10:43 casperOne

你的'formSelector'是一個jQuery對象，而不是選擇器。選擇器是諸如'＃myForm'或'form：has（a.DeleteLink）'之類的字符串。此外，由於表單提交將重新加載頁面，因此首先在該變量中沒有任何意義。 – SLaks 2010-08-10 14:21:03

@SLaks：是的，它是一個jQuery對象，但它是一個表示選擇器結果的對象，所以它在語義上更加正確。無論如何我都改變了。至於重新加載頁面，這是不正確的。如果表單提交失敗（說你正在使用jQuery表單驗證），那麼頁面將不會在點擊時重新加載。 – casperOne 2010-08-10 14:28:24

這種方法也行不通，它只是在我的URL的末尾加上一個＃ – DMan 2010-08-10 15:32:41

添加到SLaks，可以保證在適當的時候jQuery代碼觸發時（不管頁面上的位置），通過以下：

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

通過$(document).ready(...)包裝的代碼可以確保在頁面加載完成之前的代碼將無法運行。

來源

2010-08-11 16:17:37 Todd

我看到的大部分答案都依賴於jQuery或做一些花哨的ajax提交，這不是我想要的。所以我編寫了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>

來源

2015-03-19 21:54:27 kape123

，如果你使用的是引導，以使按鈕看起來像一個鏈接只是添加btn鏈接類，例如

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

來源

2015-07-24 10:53:51

這可以通過從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>

更新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>

來源

2016-06-22 20:24:18 Sumit

你應該真的添加一些解釋爲什麼這個代碼應該工作 - 你也可以在代碼本身中添加註釋 - 在它的當前形式中，它沒有提供任何解釋，可以幫助社區的其他人瞭解您做了什麼來解決/回答問題。 – ishmaelMakitla 2016-06-22 20:33:34

我試圖峯會的做法以上剃刀，但做一些必要變化。在操作鏈接中包含Controller名稱會導致頁面繞過JQuery並直接提交表單。所以，我試過如下：

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

從那裏我可以通過ID訪問按鈕，使用的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; 

});

我要補充一點，我想要的形式提交，但並不一定要被轉移到另一頁面和/或行動。

來源

2017-04-13 17:10:14 rvb

相關問題