使用Ajax将数据发布到控制器

Question

first of all as a win forms developer I'm don't have much experience in web development. I'm trying my best to get the hang of it

I have two tables TOURNAMENTS_M (Master) and TOURNAMENTS_D(detail) with scaffold controllers and view.

I have edited Master tables Create/and Edit views so that I'm able to display child records as well

When I press the remove button, I call the following function

function DeleteDetail(pId) {
    const con = confirm("are you sure ?");


    if (con === true) {

        $.ajax({
            url: "/TOURNAMENTS_M/Delete",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:
                { id: pId }
            })
            .done(function (result) {
                alert("Succeed");
            })
            .fail(function (result) {
                alert("I failed :'( ");
            });

    }
}

but all I get is the fail message :( what am I missing here? I really appreciate any help, been trying to make this work for hours

PS I'm using mvc core

UPDATE:

public async Task<IActionResult> Delete(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var tOURNAMENTS_M = await _context.TOURNAMENTS_M
            .FirstOrDefaultAsync(m => m.TM_ROWID == id);
        if (tOURNAMENTS_M == null)
        {
            return NotFound();
        }

        return View(tOURNAMENTS_M);
    }

this is how I call the function

@if (Model != null)
{

    var i = 0;
    foreach (var detail in Model.TOURNAMENTS_D)
    {

    <tr>

        <td> <input type='hidden' name="TD_LEVEL" id='@("TD_LEVEL")@i' value="@detail.TD_LEVEL" />@detail.TD_LEVEL </td>

        <td> <input type='hidden' name="TD_SB" id='@("TD_SB")@i' value="@detail.TD_SB" />@detail.TD_SB </td>

        <td> <input type='hidden' name="TD_BB" id='@("TD_BB")@i' value="@detail.TD_BB" />@detail.TD_BB </td>


        <td>
            <a asp-action="Edit" asp-route-id="@detail.TD_ROWID">Edit</a> |

            <button onclick="DeleteDetail(@detail.TD_ROWID) "  class="btn btn-primary">Remove</button>

        </td>
    </tr>
        i++;
    }

    //"<td><a id ='myRemove' data-itemId='0'  class='btn btn-primary'>Remove</a ></td> ";
}

Answer 1

As my suggestion in the comments worked, I will provide a bit more information:

Since you are using MVC Web Api out of the box, it is a RESTful API and therefore the method types are very important.

You are trying to perform a delete action which requires a 'DELETE' type of request according the RESTful API guidelines. MVC Web Api maps this method to the Delete method out of the box without making use of the [HttpDelete] attribute.

Overall, simply change the method type of your ajax call to 'DELETE':

function DeleteDetail(pId) {
  const con = confirm("are you sure ?");

  if (con === true) {
     $.ajax({
        ...
        type: "DELETE",
        ...
        });
  }
}