我怎样才能得到数据 tables 的价值呢？当我点击更新。我也想更新我的文本框，但我的数据 table 只更新

Question

这是我运行代码时的图像

这是我的控制器：

using ajaxcrud.DB.Core;
using ajaxcrud.DB.Data;
using ajaxcrud.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity.Migrations;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ajaxcrud.Controllers
{
    public class HomeController : Controller
    {
        private ajaxcrudContext db = new ajaxcrudContext();
       

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public JsonResult getOrderList()
        {
            var order = (from s in db.Orders

                            select new OrderFormModel
                            {
                                Id = s.Id,
                                FirstName = s.FirstName,
                                MiddleName = s.MiddleName,
                                LastName = s.LastName,
                                //OrderNumber = Convert.ToString(s.OrderNumber),
                                OrderNumber = s.OrderNumber,
                                OrderName = s.OrderName
                            }).ToList();

            return Json(new { data = order.ToList() }, JsonRequestBehavior.AllowGet);
        }

        //public ActionResult saveOrder(int? id)
        //{
        //    var model = new OrderFormModel();

        //    if (id != null)
        //        model.Id = Convert.ToInt32(id);

        //    model = PrepareOrderFormModel(model);

        //    return View(model);
        //}

        public ActionResult Index(int? id)
        {
            var model = new OrderFormModel();

            if (id != null)
                model.Id = Convert.ToInt32(id);

            model = PrepareOrderFormModel(model);

            return View(model);
        }

        public ActionResult saveOrder(OrderFormModel model)
        {
           if (ModelState.IsValid)
            {
                try
                {
                    if (model.Id > 0)
                    {
                        //dito mo lagay edit mo if greater than 0 ibig sabigin may pinasa kang Id so papasok sya as edit
                        using (var db = new ajaxcrudContext())
                        {
                            var orderUpdate = db.Orders.FirstOrDefault(x => x.Id == model.Id);

                            orderUpdate.Id = model.Id;
                            orderUpdate.FirstName = model.FirstName;
                            orderUpdate.MiddleName = model.MiddleName;
                            orderUpdate.LastName = model.LastName;
                            orderUpdate.OrderName = model.OrderName;
                            orderUpdate.OrderNumber = model.OrderNumber;
                            db.Orders.AddOrUpdate(orderUpdate);
                            db.SaveChanges();
                            //return Json(orderUpdate, JsonRequestBehavior.AllowGet);
                            return RedirectToAction("index", new { model.Id });
                        }
                    }
                    else
                    {
                        //eto naman is for add
                        using (var db = new ajaxcrudContext())
                        {
                            var order = new Order
                            {
                                FirstName = model.FirstName,
                                MiddleName = model.MiddleName,
                                LastName = model.MiddleName,
                                OrderNumber = model.OrderNumber,
                                OrderName = model.OrderName,
                            };
                            db.Orders.Add(order);
                            db.SaveChanges();
                            return Json(order, JsonRequestBehavior.AllowGet);
                        }
                    }
                    
                }
                catch (Exception ex)
                {
                    ModelState.AddModelError("CustomError", ex.Message);
                }
            }
            model = PrepareOrderFormModel(model);
            return View(model);
        }

        public OrderFormModel PrepareOrderFormModel(OrderFormModel model)
        {

            //var Orders = db.Orders.ToList();

            //model.Orders = Orders.Select(x => new SelectListItem
            //{
            //    Text = x.LastName,
            //    Value = x.Id.ToString()
            //});

            if (model.Id > 0)
            {
                var order = db.Orders.Find(model.Id);

                model.FirstName = order.FirstName;
                model.LastName = order.LastName;
                model.MiddleName = order.MiddleName;
                model.OrderNumber = order.OrderNumber;
                model.OrderName = order.OrderName;
            }
            return model;
        }

        public ActionResult Delete(OrderFormModel model)
        {
            if (model.Id > 0)
            {
                var orderId = db.Orders.FirstOrDefault(x => x.Id == model.Id);

                db.Orders.Remove(orderId);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(model);
        }


    }
}

这是我的观点：

@using ajaxcrud.Models
@model ajaxcrud.Models.OrderFormModel

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<br />
<br />
<br />
<br />
<form>

    @Html.HiddenFor(x => x.Id)
    <div class="row">

        <div class="col-md-2">
            <div class="form-group">
                @Html.LabelFor(x => x.FirstName, new { @class = "form-label" })
                @Html.TextBoxFor(x => x.FirstName, new { @class = "form-control", @id = "firstname", @name = "firstname" })
            </div>
        </div>

        <div class="col-md-2">
            <div class="form-group">
                @Html.LabelFor(x => x.MiddleName, new { @class = "form-label" })
                @Html.TextBoxFor(x => x.MiddleName, new { @class = "form-control", @id = "middlename", @name = "middlename" })
            </div>
        </div>

        <div class="col-md-2">
            <div class="form-group">
                @Html.LabelFor(x => x.LastName, new { @class = "form-label" })
                @Html.TextBoxFor(x => x.LastName, new { @class = "form-control", @id = "lastname", @name = "lastname" })
            </div>
        </div>

        <div class="col-md-2">
            <div class="form-group">
                @Html.LabelFor(x => x.OrderNumber, new { @class = "form-label" })
                @Html.TextBoxFor(x => x.OrderNumber, new { @class = "form-control", @id = "ordernumber", @name = "ordernumber" })
            </div>
        </div>

        <div class="col-md-2">
            <div class="form-group">
                @Html.LabelFor(x => x.OrderName, new { @class = "form-label" })
                @Html.TextBoxFor(x => x.OrderName, new { @class = "form-control", @id = "ordername", @name = "ordername" })
            </div>
        </div>


        <button type="submit" class="btn btn-primary btn-sm" id="btnSubmit">Save</button>
    </div>
</form>

<br />
<br />
<br />
<br />

<table id="EmptyBox" class="display table table-striped" style="width: 100%">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Last Name</th>
            <th>Order Number</th>
            <th>Order Name</th>
            <th></th>
        </tr>
    </thead>
</table>

@*<a href="@Url.Action("add", "order")" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> &nbsp;Add Order</a>*@

<script type="text/javascript">
    var table;
     $(function () { //load data table
         table = $('#EmptyBox').DataTable({
            "ajax": "@Url.Action("getOrderList", "home")",
             "columns": [
                { "data": "FirstName" },
                { "data": "MiddleName" },
                { "data": "LastName" },
                { "data": "OrderNumber" },
                { "data": "OrderName" },
                {
                    "render": function (data, type, full, meta) {
                        return "<button class='btn btn-primary btn-sm' onclick='edit(" + full.Id + ")'><i class='fas fa-user-edit'></i></button> <button class='btn btn-danger btn-sm' onclick='del(" + full.Id + ")'><i class='fas fa-user-edit'></i></button>"

                    }
                }
             ]
         });
     });

    // eto  is function papuntang controller na kung saan kinukuha nya yung  onclick na edit
    function edit(id) {
        window.location.href = "@Url.Action("index", "home")?id=" + id;
    }

    function del(id) {
        window.location.href = "@Url.Action("delete", "home")?id=" + id;
    }

    $('#btnSubmit').on('click', function () { //submit textbox value to data table
        //var order = {};
        //order.FirstName = $('#firstname').val();
        //order.MiddleNAme = $('#middlename').val();
        //order.LastName = $('#lastname').val();
        //order.OrderNumber = $('#ordername').val();
        //order.OrderName = $('#ordername').val();


        var order = $('form').serialize();
        $.ajax({
            type: 'POST',
            url: "@Url.Action("saveOrder", "Home")",
            data: order,
            dataType: 'json',
            success: function (data) {
                //alert('Successfully saved!');
                //table();
                table.html(data);
                console.log(data)
                //table.clear();
                //table.ajax.reload();
                //table.draw();
                
            },
            error: function (err) {
                console.log(err);
            }
        })
    });

</script>

我想更新数据表，就像我在文本框中的值一样。我尝试在我的模型状态中执行 ModelState.Clear 以删除文本框，但它不起作用。我的问题是当我单击更新我的数据表更新但文本框中的值没有更新时。请帮我解决这个问题。谢谢！

Answer 1

在jquery中的提交按钮点击事件（ajax调用成功事件）上编写明文文本框值函数，如下所示：

$('#btnSubmit').on('click', function () { //submit textbox value to data table

    var order = $('form').serialize();
    $.ajax({
        type: 'POST',
        url: "@Url.Action("saveOrder", "Home")",
        data: order,
        dataType: 'json',
        success: function (data) {
            //alert('Successfully saved!');
            //table();
            table.html(data);
            console.log(data)
            //table.clear();
            //table.ajax.reload();
            //table.draw();

           // Clear text box values
            $('#firstname').val("")
            $('#middlename').val("")
            // clear another fields here                
        },
        error: function (err) {
            console.log(err);
        }
    })
});

我怎样才能得到数据 tables 的价值呢？当我点击更新。我也想更新我的文本框，但我的数据 table 只更新

How can I get the data tables value too? when i click update. I want to update my textbox too but my data table only updates

asp.net

asp.net-mvc

asp.net-core

asp.net-mvc-4

asp.net-mvc-3