通过不同的按钮调用创建动作答案

【问题标题】：call to create action via different button通过不同的按钮调用创建动作
【发布时间】：2014-07-18 16:47:18
【问题描述】：

ive MVC 5 应用程序在索引页面中有一个表，我应该如何从索引页面调用控制器中的创建操作而不是默认按钮。默认按钮是这样做的

@Html.ActionLink("Create New", "Create")

但我的桌子有点不同我使用以下按钮

<input type="button" value="Add" onclick="add()" class="data-button" id="add-row" />

我如何从这个按钮调用创建操作？

【问题讨论】：

标签： jquery asp.net asp.net-mvc asp.net-mvc-4 asp.net-mvc-5

【解决方案1】：

首先，为您的“创建”按钮添加一个id，以便轻松识别：

@Html.ActionLink("Create New", "Create", null, new { id = "create-button" })

然后单击Add 按钮从该按钮获取href 并重定向页面：

function add() {
    window.location.assign($('#create-button').prop('href'));
}

如果您希望将事件附加到 jQuery 中的 Add 按钮，请尝试以下操作：

<input type="button" value="Add" class="data-button" id="add-row" />

$('#add-row').click(function() {
    window.location.assign($('#create-button').prop('href'));
});

【讨论】：

#create = #create-button? :)
谢谢，但是我应该如何将它连接到以下按钮，当您单击它时，将调用创建操作
@shopiaT 点击该按钮，您正在调用add() 函数。
对于 jQuery，建议您不要使用 onClick 属性。更好的方法是让任何输入无代码，并从 jQuery 中选择它们以添加事件处理程序。这也允许添加多个事件。
TrueBlueAussie 说的是正确的，我更新了我的答案，向您展示如何在 jQuery 中捕获事件。

【解决方案2】：

有很多方法可以使用输入按钮调用动作方法。我添加了其中的两个，如下所示。

1.您可以使用javascript调用该操作。您可以添加以下javascript函数。

<input type="button" value="Add" onclick="add()" class="data-button" id="add-row" />
function add()
{
    window.location = @Url.Action("Create");
}

2.使用表单元素。如果您将按钮放在某个表单中，那么当用户单击按钮时，它将发布在指定的 url 上。

@using (Html.BeginForm("Create"))
{
    <input type="button" value="Add" onclick="add()" class="data-button" id="add-row" />
}

【讨论】：

对于 jQuery，建议您不要使用 onClick 属性。更好的方法是保留所有输入 无代码 并从 jQuery 中选择它们以添加事件处理程序。这也允许添加多个事件。
是的，你也可以使用 jQuery。
必须小心 Razor JS 注入。您在window.location = @Url.Action("Create"); 的注入部分周围缺少一些引号。没有它们，您将创建一个 JavaScript 错误。

【解决方案3】：

你必须这样做才能调用它：

HTML：

@Html.ActionLink("Create New", "Create", null, new { id = "linkCreate" })

<input type="button" value="Add" class="data-button" id="add-row" />

您必须编写按钮点击事件，并在其函数中使用click()调用该链接

JQUERY：

$(document).ready(function(){


    $("#add-row").click(function(event){

    $("#linkCreate").click();

   event.preventDefault();

    });

});

【讨论】：

【解决方案4】：

或者你可以像这样使用 $.Post

$('#add-row').click(function(){
    // data is the values that you are passing to the controller
    // '/Index/Create' is the Url of the action - Area/Controller/Action
   $.post('/Index/Create',data,function(){
        // This is the code for success function
         alert("new record has been added successfully");
   });
});

【讨论】：