通过 Jquery 保存到 MVC 模型输入后如何在 Html 中显示记录

Posted 2023-05-08

【中文标题】通过 Jquery 保存到 MVC 模型输入后如何在 Html 中显示记录

【英文标题】：How to Display Record in Html after Saving in to MVC Model Input via Jquery

【发布时间】：2020-03-01 12:50:53

【问题描述】：

其实我只是想用 jquery 在 html 前端显示 Max 记录，而且我已经成功地将数据保存在模型中，这是我的 jquery 代码：

$("#btnSave").click(function () 

            //var itemcode;
            //var qty;
            var books = $('#CbTable');
            if (books.val() === '') 
                alert("Please select an Table from the list and then proceed!");
                $('#CbTable').focus();

                return false;
            

            else 

                var a = [];
                $('#tablefinaldata').find('tbody').find('tr').each(function () 


                    //InvNo: $('#TbInvNo').val();
                    Item_Code = $(this).find("#code").html();
                    SaleQty = $(this).find("#itemqty").html();
                    UnitRP = $(this).find("#itemprice").html();
                    a.push(Item_Code + "," + SaleQty + "," + UnitRP);





                );


                var allData = 

                    InvNo:$('#TbInvNo').val(),
                    VAT: $('#TbGST').val(),
                    GrossSale: $('#TbOrderTotal').val(),
                    discount: $('#TbDiscount').val(),
                    CusCash: $('#TbCash').val(),
                    CusBal: $('#TbBalance').val(),
                    CrBank: $('#CbBank').children("option:selected").val(),
                    TblId: $('#CbTable').children("option:selected").val(),
                    PymtType: $("input[name='RbCashStatus']:checked").val(),
                    Dinetype: $("input[name='dinetype']:checked").val()


                

                var posdata =  collection: allData, Data: a 
                $.ajax(
                    url: '@Url.Action("SaveData", "POS")',
                    type: 'POST',
                    data: posdata,
                    success: function (res) 
                        //$.get('/POS/SaveData', function (Data) 
                        //    alert(Data)


                        );

                    
                );






            



    );

这是我的控制器，其中方法返回 InvNo 这正是我想要在前端获得并在使用我已经在上面附加的点击提及成功保存记录后显示在 html 输入中的内容：

   public JsonResult SaveData(POSMater collection, string[] Data)
         

            if (collection.InvNo.ToString() ==null)
            

                TblPOSMaster master = new TblPOSMaster();
                var maxValue = (from b in db.TblPOSMasters select b.InvNo).FirstOrDefault();
                int MaxInvNo = maxValue + 1;
                collection.InvNo = MaxInvNo;
                master.InvNo = collection.InvNo;
                master.CompId = 1;
                master.ShopId = 1;
                master.Saleperson = 1;
                master.SaleType = "S";
                master.CusId = 1;
                master.saleDate = DateTime.Now;
                master.PymtType = collection.PymtType;
                master.CrBank = collection.CrBank;
                master.CrCardNo = collection.CrCardNo;
                master.GrossSale = collection.GrossSale;
                master.discount = collection.discount;
                master.TaxCodeId = 1;
                master.VAT = collection.VAT;
                master.NetSale = collection.NetSale;
                master.CusCash = collection.CusCash;
                master.CusCardAmt = collection.CusCardAmt;
                master.CreditAmt = collection.CreditAmt;
                master.CusBal = collection.CusBal;
                master.ExchangeRate = 1;
                master.PointEarned = collection.PointEarned;
                master.PointEarnedValue = collection.PointEarnedValue;
                master.PointRedeem = collection.PointRedeem;
                master.InvNo_Sale_Return = collection.InvNo_Sale_Return;
                master.AddBy = collection.AddBy;
                master.AddDate = DateTime.Now;
                master.UpdateBy = collection.UpdateBy;
                master.UpdateDate = DateTime.Now;
                master.Dinetype = collection.Dinetype;
                master.TblId = collection.TblId;
                master.Pax = collection.Pax;
                master.CashStatus = "P";
                master.OrderStatus = "B";
                master.DisAprBy = collection.DisAprBy;
                master.RefNo = collection.RefNo;
                master.DealRmk = collection.DealRmk;
                master.IsDeal = collection.IsDeal;
                master.DlvrId = collection.DlvrId;
                db.TblPOSMasters.Add(master);
                db.SaveChanges();
                for(int i=0;i<Data.Length;i++)
                
                    string rcvData = Data[i].ToString();
                    string[] arr = rcvData.Split(','); 
                    TblPOSTran Trans = new TblPOSTran();
                    Trans.InvNo = collection.InvNo;
                    Trans.Item_Code = arr[0];
                    Trans.SaleQty = decimal.Parse(arr[1]);
                    Trans.UnitRP = decimal.Parse(arr[2]);
                    db.TblPOSTrans.Add(Trans);
                    db.SaveChanges();
                    return Json(collection.InvNo, JsonRequestBehavior.AllowGet);
                    //return Json(collection.InvNo);
                


            
            else
            


            

            return Json(collection.InvNo);
        

【问题讨论】：

从控制器返回您希望显示的项目并在 ajax 成功回调上更新您的 dom

我已经返回了你在控制器中看到的项目 return Json(collection.InvNo, JsonRequestBehavior.AllowGet);

您似乎只返回了发票编号，而不是整个发票

【参考方案1】：

在 ajax 调用成功方法中获得响应后，在 $("#display").html(res) 等 DIV 标记中显示值，因为您只返回一个值 invoiceNumber

【参考方案2】：

我已经通过稍微修改代码解决了上述问题。

 var posdata =  collection: allData, Data: a 
                $.ajax(
                    url: '@Url.Action("SaveData", "POS")',
                    type: 'POST',
                    data: posdata,
                    success: function (res) 
                        $('#TbInvNo').val(res.InvNo);

                    
                );