Проблема с редактированием данных с использованием модального и частичного просмотра

Question

Привет всем, я пишу простое приложение, и теперь я хочу переписать свои операции CRUD, используя модальные формы Jquery / ajax и bootstrap. Я абсолютно новичок в jquery и имею некоторые проблемы с редактированием данных. Я вызываю действие Get для редактирования в методе контроллера return и нахожу правильную запись, но при загрузке данные модальной формы не были заполнены и когда я сохраняю данные обновления, но также добавляю новую пустую запись в базу данных. Кто-нибудь может помочь?

Страница указателя:

@section scripts{
    <script src="~/Scripts/jquery-3.5.0.min.js"></script>
    <link href="~/Scripts/DataTable/css/jquery.dataTables.css" rel="stylesheet" />
    <script src="~/Scripts/DataTable/js/jquery.dataTables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

    <script>
        var Popup, dataTable;
        $(document).ready(function ()
            {
               dataTable = $('#TableCat').DataTable({
                    "ajax": {
                    "type" : "GET" ,
                    "url" : "@Url.Action("GetData","ProductCategory")" ,
                    "datatype" : "json"
                    },
                    "columns":
                    [
                    { "data" : "Category"},
                    {
                      "data": "Id", "render": function (data) {
                             return '<a class="btn btn-danger" onclick="Delete(\'' + data + '\')" style="margin-right: 12px"><span class="glyphicon glyphicon-trash"></span>Delete</a><a data-toggle="modal" data-target="#myModal" class="btn btn-success" onclick="Edit(\'' + data + '\')" style="margin-right: 12px"><span class="glyphicon glyphicon-pencil"></span>Edit</a>';
                      }
                    }
                    ],
                    "language": {
                        "processing": "<img src='https://gph.is/2gESFHh' />",
                        "emptytable": "No data found, You may click on <b> Add New </b> button"
                    },
                });
        });

        function Delete(Id) {
            if (confirm("Are you really want to delete this record?"))
            {
                $.ajax({
                    type : 'GET' ,
                    url : '@Url.Action("Delete","ProductCategory")/' + Id ,
                    datatype: 'json',
                    success: function (response) {
                        if (response == "success") {
                            alert("Data updated successfully");
                            location.reload();
                        }
                    }
                });
            }
        }
         function Edit(Id) {
            if (confirm("Are you really want to change this record?"))
            {
                $.ajax({
                    type : 'Get' ,
                    url : '@Url.Action("AddOrEditPartial","ProductCategory")/' + Id ,
                    datatype: 'json',
                    success: function (response) {
                        if (response == "success") {
                            alert("Data updated successfully");
                            location.reload();
                        }
                    }
                });
            }
        }
    </script>
}


<a data-toggle="modal" data-target="#myModal" class="btn btn-success" style="margin-bottom: 12px; margin-top:12px "><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>

<table id="TableCat" class="display">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Category)
            </th>
            <th>

            </th>
        </tr>
    </thead>
</table>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">ProductCategory</h4>
            </div>
            <div class="modal-body">

                    @Html.Partial("AddOrEditPartial")            
            </div>
        </div>
    </div>
</div>

Контроллер

 [HttpGet]
        public ActionResult AddOrEditPartial(string Id)
        {
            ProductCategory data = new ProductCategory();
            data = context.Find(Id);
            return PartialView(data);

        }

        [HttpPost]
        public ActionResult AddOrEditPartial(ProductCategory pr)
        {
            bool status = false;
            if (ModelState.IsValid)
            {

                var data = context.Find(pr.Id);
                if (data != null)
                {
                    data.Category = pr.Category;
                    context.Commit();
                }
                else
                {
                    context.Insert(pr);
                    context.Commit();
                }

                return RedirectToAction("Index");
            }
            return new JsonResult { Data = new { status = status } };

        }

PartialView

@model MyShop.Core.Models.ProductCategory
@{
    Layout = null;
}


<div class="panel-group">
    <div class="panel-default">
        <div class="panel panel-success">
            <div class="panel-heading">Succes Implement Add Button</div>
                <div class="panel-body">
                    <div class="col-sm-10 col-sm-offset-1">
                        @using (Html.BeginForm("AddOrEditPartial", "ProductCategory", FormMethod.Post, new { id = "formsubmit" }))
                        {
                            @Html.AntiForgeryToken()

                            <div class="form-horizontal">
                                <hr />
                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.Category, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-10">
                                            <input type="submit" value="Save" class="btn btn-success" id="btnSubmit" />
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Я обнаружил проблему JQuery / ajax получить запрос на редактирование должен быть

 function Edit(Id) {
            if (confirm("Are you really want to change this record?"))
            {
                $.ajax({
                    type : 'Get' ,
                    url: '@Url.Action("AddOrEditPartial","ProductCategory")/' + Id,
                    data: { Id: Id }
                }).done(function(result) {
                        $('#modbody').html(result);
                });
            }
        }