MVC 코어는 아약스를 사용하여 데이터를 게시하고 페이지의 섹션을 새로 고칩니다.

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 호출 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); 
} 

우리는 수동으로 자바 스크립트 행에 대한 마크 업을 작성하고 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 
} 

그리고 아약스 호출

,

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

난 그냥 열심히 여기 돌아 마크 업 코딩

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

새 행을위한 마크 업을 반환하는 GetProductRow 방법을 문자열로 표시 할 수 있지만 마크 업을 반환하는 부분 뷰를 반환 할 수 있습니다.