Загрузить MVC Core View (вызывая Action) одним нажатием кнопки в таблице данных Jquery - PullRequest
0 голосов
/ 24 августа 2018

У меня есть таблица данных в виде MVC, и в каждой таблице данных в каждой записи есть кнопка редактирования.

enter image description here

Когда нажата кнопка редактирования, мне нужно передать идентификатор записи в метод действия MVC и загрузить представление MVC для формы редактирования из действия MVC.

Это мой код таблицы данных JQuery.

function PopulateQueryGrid(data) {
        $('#querytable').dataTable({
            destroy: true,
            data: data,
            columns: [
                { "data": "type", "name": "Product Type", "autoWidth": true },
                {
                    "data": "isDeleted",
                    "render": function(data, type, full) {
                        if (full.isDeleted !== true) {
                            return "<div style='background-color:PaleGreen;width:100px;text-align:center;padding:2px'> Active </div>";
                        } else {
                            return "<div style='background-color:orange;width:100px;text-align:center;padding:2px'> Deleted </div>";
                        }
                    }
                },
                {
                    "data": "id",
                    "render": function(data, type, full) {

                        **// 1 does not work
                        //return '<input type="button" value="Edit" class="btn btn-info" onclick=\'editItem(' + JSON.stringify(full) + ')\' />';


                        // 2 does not work
                        //return '<form asp-controller="ProductType" asp-action="EditProductType" method="get"><input type="hidden" name="typeId" id="typeId" value="' +
                            //full.id +
                            //'" /><input type="submit" class="btn btn-info" value="Edit" /></form>';**

                    }
                },
                {
                    "data": "ID",
                    "render": function(data, type, full) {

                        return '<input type="button" value="Delete" class="btn btn-danger" onclick=\'deleteItem(' +
                            JSON.stringify(full) +
                            ')\' />';
                    }
                }
            ]
        });
    }


    function editItem(item) {

        $.ajax({
            url: '/ProductType/EditProductType',
            data: { typeId : item.id },
            type: 'GET',
            contentType: 'application/json; charset=utf-8',

            error: function() {
                alert("error");
            }
        });
    }

    function deleteItem(item) {
        alert("delete : " + item.id);
    }

И это действие MVC, которое мне нужно вызвать после нажатия кнопки «Редактировать».

public async Task<IActionResult> EditProductType(int typeId)
    {
        try
        {
            var productType = await _productTypesService.GetProductTypeByIdAsync(typeId);
            return View(productType);
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
            throw;
        }
    }

Ниже приведена HTTP-версия того же метода действия.

    [HttpPost]
    public IActionResult EditProductType(ProductTypeViewModel vm)
    {
        try
        {
            if (ModelState.IsValid)
            {
                _productTypesService.EditProductTypeAsync(vm);
                return RedirectToAction("Index");
            }

            return RedirectToAction("EditProductType", vm);
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
            throw;
        }
    }

До сих пор я пытался достичь этого двумя способами (оба указаны в приведенном выше коде таблицы данных), но ни один из них не сработал.

  1. Jquery Ajax
  2. Создание формы для каждой кнопки редактирования и отправка данных в действие MVC при нажатии кнопки

Вопрос - как передать значения в действие контроллера MVC с помощью нажатия кнопки таблицы данных JS и загрузить представление (форму) MVC из этого действия?

Ценю вашу помощь. Спасибо.

1 Ответ

0 голосов
/ 25 августа 2018

Спасибо за предложение / комментарии.Как и предлагалось в комментариях, я заставил его работать, используя тег <a>.

{
                    "data": "id",
                    "render": function(data, type, full) {

                        return '<a class="btn btn-info" href="/ProductType/EditProductType?typeId=' + full.id  + '">Edit</a>';
                    }
                },
...