Ajax调用未在控制器/操作中命中url路径

Question

我正在尝试按照说明从此链接http://www.dotnetawesome.com/2016/12/crud-operation-using-datatables-aspnet-mvc.html制作一个粗糙表。

但是由于Ajax调用未在控制器/操作中到达URL路径，所以我被卡住了>>

这是我的桌子的代码

<h2>Part 1 : Implement jQuery Datatable in ASP.NET MVC</h2>
<div style="width:90%; margin:0 auto" class="tablecontainer">
    <a class="popup btn btn-primary" href="/InventoryLocation/Save/0" style="margin-bottom:20px; margin-top:20px;">Add New Employee</a>
    <table id="myDatatable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Armario</th>
                <th>Cajon</th>
            </tr>
        </thead>
    </table>
</div>


<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script>
    $(document).ready(function () {
        var oTable = $('#myDatatable').DataTable({
            "ajax": {
                "url": '/InventoryLocation/GetEmployees',
                "type": "get",
                "datatype": "json"
            },
            "columns": [
                { "data": "ubicacion_id", "autoWidth": true },
                { "data": "armario", "autoWidth": true },
                { "data": "cajon", "autoWidth": true },
                {
                    "data": "ubicacion_id", "width": "50px", "render": function (data) {
                        return '<a class="popup" href="/InventoryLocation/Save/' + data + '">Edit</a>';
                    }
                },
                {
                    "data": "ubicacion_id", "width": "50px", "render": function (data) {
                        return '<a class="popup" href="/InventoryLocation/Delete/' + data + '">Delete</a>';
                    }
                }
            ]
        })
        $('.tablecontainer').on('click', 'a.popup', function (e) {
            e.preventDefault();
            OpenPopup($(this).attr('href'));
        })
        function OpenPopup(pageUrl) {
            var $pageContent = $('<div/>');
            $pageContent.load(pageUrl, function () {
                $('#popupForm', $pageContent).removeData('validator');
                $('#popupForm', $pageContent).removeData('unobtrusiveValidation');
                $.validator.unobtrusive.parse('form');

            });

            $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                .html($pageContent)
                .dialog({
                    draggable: false,
                    autoOpen: false,
                    resizable: false,
                    model: true,
                    title: 'Popup Dialog',
                    height: 550,
                    width: 600,
                    close: function () {
                        $dialog.dialog('destroy').remove();
                    }
                })

            $('.popupWindow').on('submit', '#popupForm', function (e) {
                var url = $('#popupForm')[0].action;
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $('#popupForm').serialize(),
                    success: function (data) {
                        if (data.status) {
                            $dialog.dialog('close');
                            oTable.ajax.reload();
                        }
                    }
                })

                e.preventDefault();
            })
            $dialog.dialog('open');
        }
    })
</script>
这是控制器的名称，当我将调试器放在那儿时它不会被点击而没有作用

public ActionResult GetEmployees()
{
    InventoryLocationContext inventoryLocation = new InventoryLocationContext();
    var inventoLocationData = inventoryLocation.GetAllInvenotryLocation().OrderBy(a => a.armario).ToList();
    return Json(new { data = inventoLocationData }, JsonRequestBehavior.AllowGet);            
}
这是我复制粘贴的控制器的名称，以确保它具有正确的名称。

InventoryLocationController.cs
这是代码。

using CustomAuthorizationFilter.Infrastructure;
using erp_colombia.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;

namespace erp_colombia.Controllers
{
    public class InventoryLocationController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public JsonResult GetEmployees()
        {
            InventoryLocationContext inventoryLocation = new InventoryLocationContext();
            var jsonData = new
            {
                jsonData = inventoryLocation.GetAllInvenotryLocation().OrderBy(a => a.armario).ToList()
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }


        [HttpGet]
        public ActionResult Save(int id)
        {
            InventoryLocationContext inventoryLocationContext = new InventoryLocationContext();

            var v = inventoryLocationContext.GetAllInvenotryLocation().Where(a => a.ubicacion_id == id).FirstOrDefault();
            return View(v);            
        }


        [HttpPost]
        public ActionResult Save(InventoryLocation emp)
        {
            InventoryLocationContext inventoryLocationContext = new InventoryLocationContext();

            bool status = false;
            if (ModelState.IsValid)
            {
                    if (emp.ubicacion_id > 0)
                    {
                        //Edit 
                        var v = inventoryLocationContext.GetAllInvenotryLocation().Where(a => a.ubicacion_id == emp.ubicacion_id).FirstOrDefault();
                        if (v != null)
                        {
                            v.armario = emp.armario;
                            v.cajon = emp.cajon;
                        }
                    }
                    else
                    {
                        //Save
                        inventoryLocationContext.updateToDB(emp);
                    }
                    status = true;              
            }
            return new JsonResult { Data = new { status = status } };
        }

        [HttpGet]
        public ActionResult Delete(int id)
        {
            InventoryLocationContext inventoryLocationContext = new InventoryLocationContext();
            var v = inventoryLocationContext.GetAllInvenotryLocation().Where(a => a.ubicacion_id == id).FirstOrDefault();
                if (v != null)
                {
                    return View(v);
                }
                else
                {
                    return HttpNotFound();
                }            
        }


    }
}
这是我的routeconfig代码

    routes.MapRoute(
        name: "InventoryLocation",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "InventoryLocation", action = "Index", id = UrlParameter.Optional }
    );
这是我的文件的图像

这是我在Firefox中收到的jquery警告。

任何帮助都会非常有用

我正在尝试按照说明从此链接http://www.dotnetawesome.com/2016/12/crud-operation-using-datatables-aspnet-mvc.html制作粗糙表。但是我被困住了，就像我的Ajax调用一样...

Answer 1

通过这样做，您的问题将得到解决