Question

我已经为我的树视图列表创建了CRUD操作，但它们是静态的 - 页面在将数据提交给控制器时重新加载。如何使其动态化，因此无论何时添加，删除或编辑元素，页面都不会重新加载。在这种情况下，我只想知道如何为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>
}

创建的控制器方法：

     //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();
        });
    });

创建部分视图：

    @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组件。您无法通过简单的

获得此行为

if (GMDSP1.Rows.Count > 0)
            {
             DataTable _dt1 = new DataTable();
             DataTable _dt2 = new DataTable();
                DataGridViewRow gvdr = GMDSP1.CurrentRow;
                DataRow[] drArr = _dt1.Select("Name= '" + gvdr.Cells["Name1"].Value.ToString() + "'");
                if (drArr.Length > 0)
                {
                    DataRow dr = _dt2.NewRow();
                    if (_dt2.Columns.Count == 0)
                    {
                        foreach (DataColumn dc in _dt1.Columns)
                        {
                            DataColumn newDC = new DataColumn(dc.ColumnName, dc.DataType);
                            _dt2.Columns.Add(newDC);
                        }
                    }

                    dr["ID"] = drArr[0]["ID"].ToString();
                    dr["Name"] = drArr[0]["Name"].ToString();


                        _dt2.Rows.Add(dr);
                        _dt1.Rows.Remove(drArr[0]);

                        _dt1.AcceptChanges();
                        _dt2.AcceptChanges();


                    GMDSP1.DataSource = _dt1;
                    GMDSP2.DataSource = _dt2;

我不熟悉asp.net ajax组件，所以我建议你检查一下（telerik有一些）。或者您可以只更新您的Javascript：从ajax调用填充列表并通过在＆＃34; ADD＆＃34;之后添加一行来更新列表。调用

尽管在这样做时开始寻找前端框架（反应，角度等）通常会更好。

MVC中的动态CRUD操作

1 个答案: