为什么我的 onClick() 按钮会在我的控制器中调用 HttpPost 方法？

Question

我有一个 onClick() 执行 JS 脚本的按钮，但出于某种原因，它一直在我的控制器中执行我的 SubmitForm() Action 方法，我不明白为什么

  @using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post,

                new
                {
                    traName = Request.Form["nameOfTra"],
                    amount = Request.Form["amountRequested"],
                    memberName = Request.Form["commiteeMember"],
                    date = Request.Form["agmDate"],
                    signed = Request.Form["signed"],
                    dated = Request.Form["dated"],
                    numberOfRows =  Request.Form["numberOfRows"]

}))
{
<h1 style="text-align: center;"> TRA grant application </h1>
<h4 style="text-align: center;">This is the TRA Grant form for the association named below who agree to use these funds to cover the cost of administration of the TRA</h4>
<p>
    <label for="nameOfTralbl">Name of TRA:</label>
    <input type="text" name="nameOfTra" value="" />
</p>
<h4> List of items the money will be spent on</h4>

<table id="traTable">
    <tr>
        <td>Description of Items</td>
        <td>Quantity</td>
        <td>Cost</td>
    </tr>
    <tr>
        <td><input type='text' size="30" /></td>
        <td><input type='text' size="30" /></td>
        <td><input type='text' size="30" /></td>
    </tr>
</table>
<br />
<button onclick="addRow()">Add Item</button>
<input type="hidden" id="rows" value="1" name="numberOfRows" />

<script>
    function addRow() {
        var table = document.getElementById("traTable");
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML = "<input type='text' size='30' id='cell1_" + $('#rows').val() + "'/>";
        cell2.innerHTML = "<input type='text' size='30' id='cell2_" + $('#rows').val() + "'/>";
        cell3.innerHTML = "<input type='text' size='30' id='cell3_" + $('#rows').val() + "'/>";
        $('#rows').val(parseInt($('#rows').val()) + 1)

    }
</script>

 public ActionResult SubmitForm(string traName,  float? amount,
            string memberName, string date, string signed, string dated, int? numberOfRows, HttpPostedFileBase file, HttpPostedFileBase file2, HttpPostedFileBase file3){}

我的 Submitform() 操作中有一些我不想执行的额外逻辑，我不明白为什么它一直调用这个它应该只调用脚本的操作。

Answer 1

您没有向 SubmitForm() 声明提交按钮。在 FormBegin 中添加您的提交按钮：

<input type="submit" value="Submit Button" />

@编辑：

变化：

<button onclick="addRow()">Add Item</button>

收件人：

<input type="button" onclick="addRow()" value="Add Item"/>

为什么我的 onClick() 按钮会在我的控制器中调用 HttpPost 方法？

Why does my onClick() button call the HttpPost method within my controller?

asp.net

asp.net-mvc-4