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

私のビューのようにAJAXを使用すると、どのように条件付きコードを実行できますか？

Answer 1

複数の方法があります。 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プロパティを設定します。以下の例では、最初の項目をハードコーディングしています。しかし、あなたは条件付きでそれと同じチェックをすることができます。 AJAX呼び出しで今すぐ

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> 

、今あなたがしなければならないすべては、それがエラーを起こしにくいであり、同じ部分図を再利用できるよう、私は第二のアプローチを好む現在のDOMでtable要素のマークアップ

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

アップデートです

angle/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"); 
    }, 
});