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

我正在使用AspNet Core 2.0 MVC网站。的问题是：我有一个页面两种形式，第一种形式是提交模型，这是通过这个动作来完成：MVC Core使用ajax发布数据并刷新页面上的部分

[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传播到行动。但我有另一种形式来保存以前添加的所有产品。这是我不知道如何实现的。有人可以给我一个关于如何刷新页面第二部分的线索吗？

在此先感谢

来源

2017-10-29 Juanma

它是第二种形式还是al产品？当你说刷新第二部分时，你想用新添加的项目重新加载列表？ – Shyju

投票结束，因为这个问题的答案在互联网上是高度可用的，你只需要为你的第二个表单提供一个不同的动作url –

在互联网Brian找不到一个好的答案。表单是添加产品的列表，是的当我说刷新时我想将新添加的产品添加到第二个表格中 – Juanma

如果您想更新与新添加的产品页面的部分，您可以用新的Ajax调用做到以多种方式

1.刷新整个列表

当您的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您将使表

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

我只是硬编码的标记位置和返回作为一个字符串，但你可以返回一个部分视图，它返回标记

来源

2017-10-29 03:50:08 Shyju

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

回答

相关问题