URL метода контроллера по нажатию кнопки

Question

У меня есть кнопка для добавления данных и еще одна кнопка для редактирования данных. При нажатии кнопки Add я получаю правильную url, но кнопка edit не работает должным образом.

// Add button
<a class="btn btn-success" style="margin-bottom:10px;" onclick="PopupForm('@Url.Action("AddorEdit", "Vehicles")')"><i class="fa fa-plus"></i> Add New</a>

При проверке этой кнопки я получаю onclick="PopupForm('/Vehicles/AddorEdit')"

полный js код для кнопки редактирования,

var Popup, dataTable;

$(document).ready(function () {
    dataTable = $("#tbl_vehicle").DataTable({

        "ajax":{
            "url": "/Vehicles/GetVehicle",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            { "data": "VehicleType" },
            { "data": "Amount" },
            { "data": "RenewPeriod" },
            { "data": "RegisteredDate",
                "render": function(data)
                {
                    var date = moment(data).format("YYYY-MM-DD");
                    return date;
                }
            },
            { "data": "RegisteredBy" },
            { "data": "Status",
                    "render" : function(data)
                {
                    if(data === "1") return "Active"
                    else return "Passive"
                }
            },
            { "data": "ModifiedBy" },
            { "data": "ModifiedDate" },
            {
                "data": "Id",
                "render": function(data)
                {
                    var myUrl = "Vehicles/AddorEdit/" + data;

                    var result= "<a class='btn btn-warning btn-sm' onclick='PopupForm(" + myUrl + ")'><i class='fa fa-edit'></i> Edit </a><a class='btn btn-danger btn-sm' style='margin-left:5px;'><i class='fa fa-trash'></i> Delete </a>"
                    console.log(result);
                    return result;

                },
                "width": "150px"
            }
        ],
        "language": {
            "emptyTable" : "No data available, please click on <b>Add</b> button"
        }

    });

});

При проверке этой кнопки я получаю onclick="PopupForm(/Vehicles/AddorEdit/28)", в параметре нет '. При нажатии этой кнопки редактирования всплывающая форма также не открывается.

javascript код для PopupForm и SubmitForm

function PopupForm(url) {
            var formDiv = $('<div/>');
            $.get(url).done(function (response) {
                formDiv.html(response);

                Popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'fill details',
                    height: 500,
                    width: 700,
                    close: function () {
                        Popup.dialog('destroy').remove();
                    }
                });
            });
        }

        function SubmitForm(form) {
            //console.log($(form).serialize());
            $.ajax({

                type: "POST",
                url: "/Vehicles/AddorEdit",  //form.action,
                data: $(form).serialize(),

                success: function (data) {
                    if(data.success)
                    {
                        Popup.dialog('close');
                        //dataTable.DataTable(ajax.reload());
                        $("#tbl_vehicle").DataTable().ajax.reload();
                    }
                }
            });

Answer 1

Вы должны согласовать ' правильный путь

return "<a class='btn btn-warning btn-sm' onclick='PopupForm('"+myUrl+"')'><i class='fa fa-edit'></i> Edit </a><a class='btn btn-danger btn-sm' style='margin-left:5px;'><i class='fa fa-trash'></i> Delete </a>"

Проверьте мой образец ниже:

var myUrl = "/Vehicles/AddorEdit" + 28;
var result = "<a class='btn btn-warning btn-sm' onclick='PopupForm('"+myUrl+"')'><i class='fa fa-edit'></i> Edit </a><a class='btn btn-danger btn-sm' style='margin-left:5px;'><i class='fa fa-trash'></i> Delete </a>";
console.log(result);

Answer 2

Ну, вы не можете передать значение на стороне клиента этому @Url.Action() в качестве параметра, поскольку метод @Url.Action() обрабатывается на стороне сервера. Вы можете объединить переменные на стороне клиента с URL-адресом на стороне сервера, сгенерированным этим методом, который является строкой в ​​выходных данных. Попробуйте что-то вроде этого:

var myUrl = '@Url.Action("AddorEdit","Vehicles")?data=' + data;

Поскольку вы используете DataTables, вы можете сделать что-то вроде:

{
    "data": "Id",
    "render": function (data) {

        var link ='@Url.Action("AddorEdit", "Vehicles", new { id = "data" })';
        link = link.replace("data", data);
        var result = "<a class='btn btn-warning btn-sm' onclick=\"PopupForm('"+link+"')\"><i class='fa fa-edit'></i> Edit </a><a class='btn btn-danger btn-sm' style='margin-left:5px;'><i class='fa fa-trash'></i> Delete </a>"                                   
        return result;

    },
    "width": "150px"
}