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

Posted 2023-04-01

【中文标题】如何在 jquery 中更新模型视图数据？

【英文标题】：How can I update model view data in jquery?

【发布时间】：2021-10-10 15:05:48

【问题描述】：

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

在视图中

@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 中使用计算

【问题讨论】：

您无法使用 ajax 更新整个视图模型。您必须使用按钮提交表单并返回更新的视图。

感谢您的回答，但在我的示例中这怎么可能？

Serge 是对的。您必须使用 JQuery 或 javascript 来更新控件：$('#ID_Invoice_Details).val();

@ebrahemb 您可以尝试使用 ajax 返回部分视图。但这对您来说太复杂了，我认为使用它没有多大意义。如果您在视图内创建一个表单并使用提交按钮提交，将会简单得多。只是任何教科书中的常见案例。

这没有任何意义，因为一旦页面被渲染，@Model 就不存在了。 C#（和 razor 代码）在您的服务器上执行，而不是在本地客户端上。

【参考方案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);
    
  );
)

【讨论】：

感谢您的努力和感激，但我想要的只是更新模型，而不是页面

好吧，不更新视图，模型就没意义了。