我目前正在尝试进行html提交,但是使用MVC辅助方法ActionLink,因为我不希望它是一个按钮,我希望它是一个带下划线的链接,就像我页面上的其余部分一样。这就是我目前的
<%= Html.ActionLink("Delete Selected", "DeleteCheckBox", "Domains", "Default.aspx", new { type="submit" }) %>
这会跳回我的操作,但是所有已检出要删除的域都不会被发回。 (如果我使用它,<input type="submit" name="DeleteAction" value="Delete" />
它工作正常,所以我知道提交或检索复选框没有问题。
这是我到目前为止所拥有的......
&gt;“%&gt;指数
<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 :(得分:4)
如果没有Javascript,您无法提交超链接提交表单。
使用jQuery,您可以编写
<a href="javascript:void(0)" class="DeleteLink">Delete Selected</a>
$('.DeleteLink').click(function() {
$(this).closest('form')[0].submit();
});
答案 1 :(得分:2)
添加到SLaks,您可以通过使用以下内容确保您的jQuery代码在适当的时间触发(无论页面上的位置如何):
<script type="text/javascript">
$(document).ready(function(){
$('.DeleteLink').click(function() {
$(this).closest('form')[0].submit();
});
});
</script>
通过将代码包装在$(document).ready(...)
中,您可以确保在页面加载完成之前代码不会运行。
答案 2 :(得分: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>
答案 3 :(得分:1)
我看到的大部分答案都依赖于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());
}
}
要使用它,请在Razor中写道:
@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>
答案 4 :(得分:0)
如果你使用bootstrap,使按钮看起来像链接只需添加btn-link类,例如
<input type="submit" name="ActionType" value="Edit" class="col-md-1 btn btn-link" />
答案 5 :(得分:0)
这可以通过在C#中调用javascript中的类来完成。
<%= 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>
答案 6 :(得分:0)
我在Razor尝试了Summit的方法,但需要做出一些改变。在操作链接中包含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;
});
我应该补充一点,我希望提交表单,但不一定要转移到另一个页面和/或Action。
答案 7 :(得分:0)
我以其他方式做到了 我把链接放在表单标签内 并通过链接提交表单
<form id="formid" action= > http="javascript:document.getElementById("formId".submit()"
</form>