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發佈數據並刷新頁面上的部分

回答

相關問題