Question

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

    [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);
    });
}

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

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

在部分视图中，强类型为ProductViewModel，您将呈现表格

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

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

在这种方法中，您的AddProductToSale将返回新视图模型对象的JSON表示，并且在done事件中，您可以为新表行构建标记并将其附加到现有表格行表

在这种情况下，我们假设您已经有一个表

<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并返回单行的标记并将其添加到表中。

[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>");
}

我刚刚在这里对标记进行了硬编码并以字符串形式返回，但是您可以返回一个返回标记的局部视图

MVC Core使用ajax发布数据并刷新页面上的部分

1 个答案: