ASP.NET MVC에서 AJAX를 사용하여 테이블 새로 고침

Question

ajax를 사용하여 MVC에서 테이블을 업데이트하려고합니다. 이미 아약스를 사용하여 데이터베이스에 데이터를 삽입했습니다. 난 그냥 새 행을 삽입 한 후 테이블을 업데이 트하려는.

추신. 나는 수색을 시도했다 그러나 아무것도 나를 도왔다, 나는 아직도 혼란 스럽다. 삽입 새 레코드에 대한

Here is my code: 

Main page View: 

<div id="theTable"> 
    @Html.Partial("_IPTable") 
</div> 
    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script src="~/Scripts/Admin.js"></script>"` 

Partial page View: 

<table id="table">` 
    <tr> 
     <th>ID</th> 
     <th>Line</th> 
     <th>Supplier</th> 
    </tr> 

    @foreach (var item in ViewBag.IPTable)` 
    { 
     <tr> 
      <td> 
       @item.ID 
      </td> 
      <td> 
       @item.Line 
      </td> 
      <td> 
       @item.Supplier 
      </td> 
     </tr> 

    } 
</table>enter code here 

Controller view: 

public ActionResult Admin() 
     { 
      // get data from database 
      return View(); 
     } 
public ActionResult _IPTable() 
     { 

      return PartialView(); 
     } 

Ajax 코드는 :

<script> 
$(document).ready(function() { 
//function will be called on button click having id btnsave 
$("#btnSave").click(function() { 
    $.ajax(
    { 
     type: "POST", //HTTP POST Method 
     url: "AdminInsert", // Controller/View 
     data: { //Passing data 
      //Reading text box values using Jquery 
      Line: $("#txtLine").val(), 
      Supplier: $("#txtSupplier").val() 
     } 
    }); 
}); 

}); </script> 

Answer 1

당신은 당신의 테이블을 렌더링하는 데 필요한 HTML 마크 업을 반환하는 액션 메소드를 만들 수 있습니다. 테이블 데이터를 전달할 뷰 모델을 만들어 봅시다.

public class ItemVm 
{ 
    public string ItemId {set;get;} 
    public string Line {set;get;} 
    public string Supplier {set;get;} 
} 

이제 조치 방법으로 테이블에서 데이터를 가져 와서 뷰 모델 클래스 목록에로드하고보기로 보냅니다. 이후 나는 귀하의 테이블 구조/데이터 액세스 메카니즘에 대해 잘 모르겠습니다. 항목을 하드 코딩하겠습니다. 실제 데이터로 대체 할 수 있습니다. 이제

public ActionResult TableData() 
{ 
    var items = new List<ItemVm>{ 
     new ItemVm { ItemId="A1", Line="L1", Supplier="S1" }, 
     new ItemVm { ItemId="A2", Line="L2", Supplier="S2" }  
    }; 
    return PartialView("TableData",items); 
} 

당신의 부분보기가 강하게 이제 우리의 뷰 모델

@model List<ItemVm> 
<table> 
@foreach(var item in Model) 
{ 
    <tr><td>@item.ItemId</td><td>@item.Line</td></td>@item.Supplier</td></tr> 
} 
</table> 

의 컬렉션에 입력되어 있는지 확인 당신이 액션 메소드를 호출하고 응답으로 DOM을 업데이트하기 만하면됩니다 돌아오고있어. 새 레코드를 삽입하려는 Ajax 호출의 success 이벤트 처리기에서이 작업을 수행 할 수 있습니다. jQuery load 메서드를 사용하여 DOM의 관련 요소를 업데이트 할 수 있습니다.

$(document).ready(function() { 
    $("#btnSave").click(function() { 

    $.ajax(
    { 
     type: "POST", //HTTP POST Method 
     url: "AdminInsert", // Controller/View 
     data: { //Passing data 
      //Reading text box values using Jquery 
      Line: $("#txtLine").val(), 
      Supplier: $("#txtSupplier").val() 
     } 
    }).success(function() { 
      $("#theTable").load("/YourControllerName/TableData"); 
     }); 
}); 

이제 초기보기에서 새 부분보기를 사용할 수 있습니다. 그러나 ItemVm의 목록을 기대하기 때문에 ViewBag을 통해 전달하는 대신 명시 적으로 전달해야합니다.