javascript - MVC 中的动态 CRUD 操作

Question

我已经为我的 TreeView 列表创建了 CRUD 操作，但它们是静态的 - 页面在将数据提交到 Controller 时重新加载。如何使其动态化，以便在添加、删除或编辑元素时无需重新加载页面。在这种情况下，我只想知道如何执行 ADD 操作。

查看:

@helper PopulateDivs(List<Tree_List.Controllers.Element> elements)
{

    <ul>
        @foreach (var element in elements)
        {
            <li>
                <div class="element_wrapper" data-id="@element.ID" data-parent="@element.PARNET_ID" @*style="display:none"*@>
                    <button class="toggler_btn" type="button" data-id="@element.ID" data-parent="@element.PARNET_ID">+</button>
                    @element.NAME
                    <button class="add_btn" type="button" data-id="@element.ID">Add</button>
                    <button class="edit_btn" type="button" data-id="@element.ID" data-parent="@element.PARNET_ID">Edit</button>
                    <button class="delete_btn" type="button" data-id="@element.ID">Delete</button>
                    <ul id="childItems-@element.ID"></ul>
                </div>
            </li>
        }
    </ul>
}

Controller 创建方法:

     //MODAL POPUP FOR CREATE

        public ActionResult CreateNewItem(int id)
        {
            if (id == 0)
            {
                H_Table item = new H_Table();
                return PartialView(item);
            }
            else
            {
                H_Table item = db_connection.H_Table.Find(id);
                return PartialView(item);
            }

        }

        //POST: CREATE ITEM

        [HttpPost]
//        [ValidateAntiForgeryToken]
        public ActionResult CreateNewItem(string name, int parent)
        {
            H_Table item = new H_Table();
            if (parent == 0)
            {
                item.NAME = name;
                item.PARENT_ID = null;
            }
            else
            {
                item.PARENT_ID = parent;
                item.NAME = name;
            }

            if (ModelState.IsValid)
            {
                db_connection.H_Table.Add(item);
                db_connection.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(item);
        }

JS:

        $('body').on('click', '.add_btn', function () {
        $.get("/List/CreateNewItem", { id: $(this).data('id') }, function (data) {
            $('#modal_window').replaceWith('<div id="modal_window">' + data + '</div>');
            $('#modal_window').show();
        });
    });

创建的部分 View :

    @model Tree_List.Models.H_Table

<form action="/List/CreateNewItem" method="post">
    <div class="form-horizontal">
        <h4>CREATE NEW ITEM</h4>
        <div class="form-group">
            <div class="control-label col-md-2">NAME</div>

            <div class="col-md-10">
                <input name="name" type="text" value="" />
            </div>
        </div>

        <div class="form-group">
            <div class="control-label col-md-2">PARENT</div>
            <div class="col-md-10">
                <input name="parent" type="text" value="@Model.ID" readonly />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Answer 1

为了能够让页面在不重新加载或回发的情况下自行更新，您的 html 列表必须是 ajax 组件。您将无法通过简单的

实现此行为

 @foreach (var element in elements)
        {
            <li>
                ...
            </li>
        }

我不熟悉 asp.net ajax 组件，所以我建议你检查一下(telerik 有一些)。或者，您可以只更新 Javascript:通过 ajax 调用填充列表，并通过在“ADD”调用后添加一行来更新列表。

虽然在这样的情况下通常最好开始寻找前端框架(react、Angular 等)。