我不知道如何轉換MVC表建設使用AJAX？

Question

因此，我正在研究如何使用AJAX在MVC視圖中填充表格。我已經在我的視圖中創建了一個表格，現在我想將它轉換爲使用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的例子都是手動創建一個表格行，並將其附加到表格末尾。這是我看到的一個例子中的代碼。

$(document).ready(function() { 
    //Call EmpDetails jsonResult Method 
    $.getJSON("Home/EmpDetails", 
    function (json) { 
    var tr; 
    //Append each row to html table 
    for (var i = 0; i < json.length; i++) { 
      tr = $('<tr/>'); 
      tr.append("<td>" + json[i].Id + "</td>"); 
      tr.append("<td>" + json[i].Name + "</td>"); 
      tr.append("<td>" + json[i].City + "</td>"); 
      tr.append("<td>" + json[i].Address + "</td>"); 
      $('table').append(tr); 
     } 
    }); 

我該如何運行條件代碼，就像我在View中使用AJAX一樣？

Answer 1

有多種方法可以做到這一點。一種方法是將新屬性添加到您從動作EmpDetails返回的視圖模型或數據結構中以包含URL。您可以在控制器代碼中使用Url.Action helper來生成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); 
} 

現在在Ajax調用，你檢查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); 
     }); 
}); 

另一種選擇是返回的HTML標記爲entier table.So而不是返回JSON數據，則返回其內部可以有你的問題共享相同的代碼的局部視圖的結果。

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> 

，現在你所要做的就是更新表元素標記在當前的DOM

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

我傾向於第二種方法，因爲它是不太容易出錯和相同的局部視圖可以被重用

如果你使用類似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"); 
    }, 
});