asp.net-mvc - MVC Core使用ajax发布数据并刷新页面上的某个部分

Question

我正在开发 AspNet Core 2.0 MVC 网站。问题是:我在一个页面中有 2 个表单，第一个表单用于提交模型，这是通过以下操作完成的:

    [HttpPost]
    public IActionResult AddProductToSale([FromForm]ProductViewModel product)
    {
        ProductViewModel p = new ProductViewModel()
        {
            Id = 1,
            Gender = GenderType.Ambos,
            AvailableStock = 5,
            Name = "Zapatillas Nike",
            Size = "42",
            Type = ProductType.Zapatillas,
            UnitPrice = 1500
        };

        SaleViewModel.Products.Add(p);

        return Json(p);
    }

.js 脚本是:

function addProductToSale() {
    $.ajax({
        url: '/Home/AddProductToSale',
        type: "POST",
        dataType: "html",
        data: $("#frmAddProduct").serialize(),
        success: function (data) {
            console.log(data);
        },
        error: function () { alert('error'); }
    });
}

数据通过 JavaScript 顺利传输到操作。但我有另一种形式来保存之前添加的所有产品。这是我不知道如何实现。有人可以告诉我如何刷新页面的第二部分吗？

提前致谢

Answer 1

如果您想使用新添加的产品更新页面的某个部分，可以通过多种方式进行

<强>1。使用新的 ajax 调用重新加载整个列表

当保存新产品的 ajax 调用成功后，您可以进行另一个 ajax 调用以再次加载整个列表。您将在第一个 ajax 调用的 done 事件中进行此调用。

例如，假设您正在以表格数据形式呈现页面中的产品列表

<div id="product-list" data-url="@Url.Action("ProductList")">
  <!-- Your code to render the table which displays the list of products -->
</div>

在脚本中，

function addProductToSale() {
    $.ajax({
        url: '@Url.Action("AddProductToSale")',
        type: "POST",
        data: $("#frmAddProduct").serialize()
    }).done(function(res) {
            var $productList= $("#product-list");
            var url=$productList.data("url");
            $productList.load(url);
        }
    }).fail(function(a, b, c) {
        console.log(c);
    });
}

假设您有一个操作方法，它返回呈现产品列表所需的标记

public IActionResult ProductList()
{
  var list = new List<ProductViewModel>();
  // to do :Load this list from the database
  return PartialView(list);
}

在强类型化为 ProductViewModel 的分部 View 中，您将渲染表格

@model List<ProductViewModel>
<table class="table">
  @foreach(var item in Model)
  {
     <tr>
         <td>@item.Name</td>
     </tr>
  }
</table>

<强>2。让 AddProductToSale 返回新产品的 JSON 响应

在此方法中，您的 AddProductToSale 将返回新 View 模型对象的 JSON 表示形式，并且在 done 事件中，您可以为新表行构建标记并将其附加到现有表中。

在本例中，我们假设您已经有一张 table

<div id="product-list">
    <table class="table" id="tbl-list">
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div>

在done事件中

 done(function(product) {
    var $tbl= $("#tbl-list");
    var r='<tr><td>'+product.name+'</td></tr>';
    $tbl.prepend(r);
 }

这里我们在 javascript 中手动创建该行的标记，并使用 jQuery prepend 方法将其添加到表格的顶部。

另一个选项是进行 ajax 调用以从服务器获取新表行的标记，您将传递新创建的 Id(您的 Add 方法应返回该 ID)，并将其传递给它将读取的方法使用 id 的记录并返回单行的标记并将其添加到表中。

[HttpPost]
public IActionResult AddProductToSale([FromForm]ProductViewModel product)
{
    // to do : Save 
    return Json(new { status="success", id= 101 }); // to do : Get the real id
}

在 ajax 调用中，

.done(function(res) {
            if (res.status === 'success') {
                var $tbl = $("#tbl-list");
                $.get('/Product/GetProductRow?id='+res.id,function(r) {
                   $tbl.prepend(r);
                });
            }
        })

假设您有一个 GetProductRow 方法，该方法返回新行的标记

public IActionResult GetProductRow(int id)
{
    var t = _context.Products.FirstOrDefault(a => a.Id == id);
    return Content("<tr><td>" + t.Name + "</td></tr>");
}

我只是在这里对标记进行了硬编码并作为字符串返回，但您可以返回返回标记的部分 View