AJAX를 사용하여 MVC 테이블을 변환 할 수있는 방법을 이해하지 못하겠습니까?

Question

그래서 MVC 뷰에서 AJAX를 사용하여 테이블을 채우는 방법에 대해 더 잘 이해하고 있습니다. 내보기에서 테이블을 구축하고있어 이제 AJAX를 사용하여 테이블로 변환하려고합니다.

몇 가지 동영상을 시청하고 몇 가지 예를 살펴 보았지만 모두가 간단한 값을 사용하여 기존 표에 추가합니다. 각 행을 만들 때 볼 논리는 없지만 논리가 필요할 때 무엇을합니까?

예를 들어, 여기에 내 MVC보기입니다. 내 목록을 반복하고 각 레코드 항목을 조건부로보고 일부 단추를 표시할지 여부를 결정합니다.

<tbody> 
@foreach (var item in Model.listExceptions) 
{ 
    <tr> 
     <td>@item.InsertDateTime.ToString("MM/dd/yyyy HH:mm")</td> 
     <td>@item.CommentText</td> 
     <td> 
      @if (item.Status.ToUpper() != "A" && item.Status.ToUpper() != "D" && Model.isAdmin == true) 
      { 
       <a href="@Url.Action("ExceptionApproveDeny", "Exception", new { rid=item.RID, arg="A", shift=item.ShiftDate })" 
        onclick="return confirm('APPROVE this exception?')" 
        class="btn btn-sm btn-success"> 
        <span class="fa fa-check-square-o" aria-hidden="true"></span> Approve 
       </a> 

       <a href="@Url.Action("ExceptionApproveDeny", "Exception", new { rid=item.RID, arg="D", shift=item.ShiftDate })" 
        onclick="return confirm('DENY this exception?')" 
        class="btn btn-sm btn-danger"> 
        <span class="fa fa-close" aria-hidden="true"></span> Deny 
       </a> 
      } 
     </td> 
    </tr> 
} 
</tbody> 

그러나, 나는 AJAX 작업을 찾은 모든 예제는 수동으로 테이블 행을 만들고 단지 테이블의 말미에 추가합니다. 이것은 내가 본 예제 중 하나의 코드입니다.

보기 에서처럼 AJAX를 사용하는 것처럼 조건부 코드를 실행할 수 있습니까?

Answer 1

여러 가지 방법이 있습니다. 한 가지 방법은 URL을 포함하도록 EmpDetails 액션에서 반환 할 뷰 모델 또는 데이터 구조에 새 속성을 추가하는 것입니다. 컨트롤러 코드 내에서 Url.Action 도우미를 사용하여 URL을 생성하고 보낼 수 있습니다.

public class ItemVm 
{ 
    public int Id { set;get;} 
    public string Name { set;get;} 
    public string Address{ set;get;} 
    public string ApprovalUrl { set;get;} 
} 

그리고 컨트롤러 동작에서 ApprovalUrl 속성을 설정합니다. 아래 예제에서는 첫 번째 항목을 하드 코딩하고 있습니다. 하지만 당신은 조건부로 당신이 질문하는 것과 같은 수표를 가지고 그것을 할 수 있습니다.

public ActionResult EmpDetails() 
{ 
    var list = new List<ItemVm>(); 

    list.Add(new ItemVm { Id=1, Name="John", 
       ApprovalUrl=Url.Action("ExceptionApproveDeny",new { rid=1,arg="A"}) }); 

    list.Add(new ItemVm { Id=1, Name="Scott" }); 
    return Json(list,JsonRequestBehavior.AllowGet); 
} 

지금 아약스 호출에서, 당신은 ApprovalUrl 당신이 루프에서 반복하고 사용하는 각 항목에 대한 존재를 확인.

$.getJSON("@Url.Action("EmpDetails")",function(json) { 
     var tr; 
     $.each(json,function(i, item) { 
       tr = $('<tr/>'); 
       tr.append("<td>" + item.Name + "</td>"); 
       if (item.ApprovalUrl) { 
        tr.append("<td> <a href='" + item.ApprovalUrl + "'>Approve</a></td>"); 
       } else { 
        tr.append("<td></td>"); 
       } 
       $('#yourTableId').append(tr); 
     }); 
}); 

또 다른 옵션은 JSON 데이터를 반환하는 대신 ENTIER table.So의 HTML 마크 업을 반환하는 것입니다, 당신은 당신이 질문에서 공유 동일한 코드를 가질 수있는 내부 부분 뷰 결과를 반환합니다.

public ActionResult EmpDetails() 
{ 
    var items = new List<ItemVm>(); 
    // to do :load items 
    return PartialView(items); 
} 

이 동작 방법에 대한보기에는 조건부로 링크를 렌더링하는 것과 관련하여 질문 할 때와 동일한 코드가있을 수 있습니다.

@model List<ItemVm> 
<table class="table"> 
    @foreach (var item in Model) 
    { 
     <tr> 
      <td>@item.Name</td>    
      <!-- add code for other td here--> 
     </tr> 
    } 
</table> 

그리고 지금 당신이 할 일은 덜 오류 경향과 같은 부분도 재사용 할 수 있습니다로

$.get("@Url.Action("EmpDetails")",function(result) { 
    $('#yourTableId').html(result); 
}); 

내가 두 번째 방법을 선호하는 현재 DOM 테이블 요소 마크 업을 업데이트입니다

angular/react 또는 view와 같은 것을 사용하는 경우 기본 데이터 소스 배열을 새 json 데이터로 설정하면 라이브러리/프레임 워크가 정의한 템플릿에서 사용자를 위해 ui를 업데이트합니다.

클라이언트의 데이터를 신뢰하지 마십시오.. 항상 서버의 내용을 확인하십시오. 따라서 데이터 업데이트를 수행하기 전에 필요한 검사를 수행하기 위해 ExceptionApproveDeny 작업 방법을 업데이트하는 것이 좋습니다.

Answer 2

다음 샘플 코드는 Jquery 사용에 사용할 수 있습니다. 간단하고 부분 뷰와 다른 것들을 사용하여 복잡한 것을 만들지 않았습니다.

보기에서 사용하는 것과 동일한 조건을 사용할 수 있지만 HTML 추가를 사용하여 수동으로 추가해야합니다.

$.ajax({ 
    url: '/home/EmpDetails', 
    type: 'Get', 
    success: function(data){ 
      // Here you need to make one more call to get whether user is 
      // Admin or not. 
      // for that you can make callback function here. 
      GetIfUserIsAdmin(function(isAdmin){ 
      // here you can use $.each loop and based on condition which you 
      // are adding in your view you can put same condition and append 
      // HTML 
      // If you are using angular you have to just create a template 
      // and pass the value and based on your template angular will   
      // generate desired HTML based on your conditions which you give 
      // while building your template. 
     }) 
    }, 
    error: function(){ 
     app.log("Device control failed"); 
    }, 
}); 

function GetIfUserIsAdmin(callback){ 
    // Here you need to make a ajax call which will provide you IsUser is  
    // Admin or not and call the callback function with that flag 
    // information from the success event of your ajax function. 
    $.ajax({ 
    url: '/home/IsAdmin', 
    type: 'Get', 
    success: function(isUserAdmin){ // you can pass only true or false here 
        if(data != '' && data != undefined && data != null){ 
      callback(isUserAdmin); 
      } 
      else{ 
      console.log('Check is User is admin function in you code.') 
      } 

    }, 
    error: function(){ 
     app.log("Device control failed"); 
    }, 
});