MVC使动作链接执行提交

时间:2010-08-10 14:05:44

标签: c# asp.net-mvc actionlink

我目前正在尝试进行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>**

8 个答案:

答案 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>