如何在 jquery 中更新模型视图数据？

Question

如何更新页面的模型数据？我想充分利用它的存在

在视图中

@model List<Table.Invoice_Details>
@foreach (Table.Invoice_Details invoice_Details in Model)
{
    @Html.TextBoxFor(modelitem => invoice_Details.ID_Invoice_Details, new { id = "ID_Invoice_Details-" + invoice_Details.ID_Invoice_Details })
    @Html.TextBoxFor(modelitem => invoice_Details.Sale_Price, new { id = "Sale_Price-" + invoice_Details.ID_Invoice_Details })
<button id="btnSave-" + @invoice_Details.ID_Invoice_Details>save</button>  
}

在脚本中：

<script>
        $('button[id*=btnSave-]').click(function ()
        {
            var FullID = $(this).attr('id');
            var ID_Number = ID.substring(FullID.indexOf('-') + 1);
    
            var Sale_Price = $('Sale_Price-' + ID_Number).val();
    
            $.get(
                {
                    url: '/Invoice/SaveInvoice',
                    contents: 'application/json; charset=utf-8',
                    type: 'post',
                    dataType: 'json',
                    data: { ID_Invoice_Details: ID_Number, Sale_Price: Sale_Price },
                    success: function (result) {
                        //[Here I want to update model with the new data]
                    }
                })
    
        })
    </script>

控制器：

private Table.Smart_PosEntities Cn = new Table.Smart_PosEntities();

   public JsonResult SaveInvoice(int ID_Invoice_Details, int Sale_Price) 
{
    Table.Invoice_Details invoice_Details = Cn.Invoice_Details.Where(L => L.ID_Invoice_Details == ID_Invoice_Details).FirstOrDefault();
    invoice_Details.Sale_Price = Sale_Price;
    Cn.SaveChanges();
return Json(new
{
    ID_Invoice_Details = ID_Invoice_Details,
    Sale_Price = Sale_Price
}
, JsonRequestBehavior.AllowGet);
}

我只想将新数据更新到@Model，以充分利用 它的存在以及在计算中使用它，因为在 控制有一列显示乘以后的行总和 数量，我不想在 jquery 中使用计算

Answer 1

使用 ajax 更新部分视图的最佳方法是使用partialview。

1.添加类JsonData

public class JsonData
{
    public string HtmlMsg { get; set; }
    public string HtmlBody { get; set; }
    public bool Success { get; set; }
}

2.添加ViewHelper类

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

public static class ViewHelper
{
    public static string RenderPartialToString(this ControllerBase controller, string partialViewName, object model)
    {
        IView view = ViewEngines.Engines.FindPartialView(controller.ControllerContext, partialViewName).View;
        return RenderViewToString(controller, view, model);
    }
    public static string RenderViewToString(this ControllerBase controller, IView view, object model)
    {
        using (var writer = new StringWriter())
        {
           controller.ViewData.Model = model;
           var viewContext = new ViewContext(controller.ControllerContext, view, controller.ViewData, controller.TempData, writer);
           view.Render(viewContext, writer);
           return writer.GetStringBuilder().ToString();
        }
    }
}

3.将 SaveInvoice 更改为：

public JsonResult SaveInvoice(int ID_Invoice_Details, int Sale_Price) 
{
    Table.Invoice_Details invoice_Details = Cn.Invoice_Details.Where(L => L.ID_Invoice_Details ==      ID_Invoice_Details).FirstOrDefault();
    invoice_Details.Sale_Price = Sale_Price;
    Cn.SaveChanges();
    var model = //fill list

   return Json(new JsonData()
   {
        HtmlMsg = "",
        HtmlBody = this.RenderPartialToString("_MyPartial", model),
        Success = true,
   });
}

4.在您的视图中更改为

@model List<Table.Invoice_Details>
<div id="myPartial">
      @Html.Partial("_MyPartial", Model)
 </div>

5.添加部分视图_MyPartial

@model List<Table.Invoice_Details>
@foreach (Table.Invoice_Details invoice_Details in Model)
{
    @Html.TextBoxFor(modelitem => invoice_Details.ID_Invoice_Details, new { id = "ID_Invoice_Details-" + invoice_Details.ID_Invoice_Details })
    @Html.TextBoxFor(modelitem => invoice_Details.Sale_Price, new { id = "Sale_Price-" + invoice_Details.ID_Invoice_Details })
   <button id="btnSave-@invoice_Details.ID_Invoice_Details">save</button>  
}

6.将脚本更改为

$('button[id*=btnSave-]').click(function() {
  var FullID = $(this).attr('id');
  var ID_Number = FullID.substring(FullID.indexOf('-') + 1);

  var Sale_Price = $('Sale_Price-' + ID_Number).val();

  $.get({
    url: '/Invoice/SaveInvoice',
    contents: 'application/json; charset=utf-8',
    type: 'post',
    dataType: 'json',
    data: {
      ID_Invoice_Details: ID_Number,
      Sale_Price: Sale_Price
    },
    success: function(result) {
      $("#myPartial").html(result.HtmlBody);
    }
  });
})