Why my link when clicked calls wrong action result

Question

I have this problem. I have edit page and one of its properties are hyper links. One div is displaying video list I want that if I click any link (e.g. "Delete") it will trigger ajax call to delete the selected item. However I have strange problem. Every time I click any link it calls "Edit" page which is the current page instead of the "delete" method. My link is rendered this way.

<a href="#" class="video" id="@Model.VirtualTourGalleries[i].Virtual_Tour_Id">Delete</a>

Please help. Here's my code.

HTML

<div class="fieldElem">
        <div class="editor-label">Virtual Tours & Videos</div>
        <div class="editor-field">  
            <table id="gridVirtualTours">
                <thead>
                    <tr>
                        <th>VIDEO</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.VirtualTourGalleries != null)
                    {
                        for(var i = 0; i < Model.VirtualTourGalleries.Count(); i++)
                        {
                            @Html.HiddenFor(model => model.VirtualTourGalleries[i].Virtual_Tour_Id)
                            <tr>
                                <td>@Model.VirtualTourGalleries[i].Virtual_Tour_Title</td>
                                <td><a href="#" class="video" id="@Model.VirtualTourGalleries[i].Virtual_Tour_Id">Delete</a></td>
                            </tr>

                        }
                    }
                </tbody>
                <tfoot>
                </tfoot>
            </table>

        </div>
    </div>

jQuery Function

$("#gridVirtualTours").on('click', '.video', function () {
            var tr = $(this).closest('tr');
            $.ajax({
                url: "deletevideo",
                type: 'POST',
                data: { videoid: $(this).attr('id') },
                success: function (result) {
                    if (result) tr.remove();
                }
            });
        });

Controller

[HttpPost]
        public ActionResult DeleteVideo(int? videoid)
        {
            return Json("", JsonRequestBehavior.AllowGet);
        }

Debugging Images

When "Delete" is clicked it calls the "Edit" not the "Delete"

Answer 1

Try this

url: '@Url.Action("DeleteVideo","ControllerName")',

Instead of

url: "deletevideo",

Answer 2

change the code like this:

$("#gridVirtualTours").on('click', '.video', function (e) {
            e.stopPropagation();
            var thisElement = $(this);
            var tr = $(this).closest('tr');
            $.ajax({
                url: "@Url.Action("DeleteVideo" , "Controller" , new {area ="area if it's not in base controller folder"})",
                type: 'POST',
                data: { videoid: thisElement.attr('id') },
                success: function (result) {
                    if (result) tr.remove();
                }
            });
        });

Answer 3

Use proper case sentive action name in jquery ajax URL property. i.e. url: "DeleteVideo",