CRUD API từ JS sử dụng Web Resource

Fri Apr 20, 2018 3:06 pm

Code:: <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> </head> <body style="word-wrap: break-word;"> <br> <div class="container"> <hr> <div class="col-sm-1"> <button type="button" class="btn btn-success" id="create">+</button> </div> <div style="margin-left: 100px"> <form class="form-inline"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search..." id="search"> <div class="input-group-btn"> <button type="button" class="btn btn-danger" id="sclick"> Search </button> </div> </div> </form> </div> <div style="margin-left: 100px"> <form class="form-inline"> <div class="btn-group"> <button type="button" class="btn btn-success" id="aclick">Ascending</button> <button type="button" class="btn btn-success" id="dclick">Descending</button> </div> </form> </div> </div> <div class="container"> <table class="table"> <thead> <tr> <th width="20%"> <center>Title</center> </th> <th width="60%"> <center>Summary</center> </th> <th width="10%"> </th> <th width="10%"> </th> </tr> </thead> <tbody> </tbody> </table> </div> <script> $(document).ready(function () { var value = ""; AjaxSearchContent(value); $(".CreateBox").hide(); //Get Ajax function AjaxGetContent(data) { data.value.forEach(element => { var Delete = "<td><center><div class = 'x' value = 'https://abcxyz.com/api/data/v9.0/new_tbooks(" + element.new_tbookid + ")'>Delete</div></center></td>"; var Edit = "<td><center><div class = 'edit'>Edit</div></center></td>"; var Editdone = "<td><center><div class = 'save' value = 'https://abcxyz.com/api/data/v9.0/new_tbooks(" + element.new_tbookid + ")'>Save</div></center></td>"; var TextBox = "<tr class = 'TextBox'><td>" + "<input class='form-control' id='ex1' type='text' value='" + element.new_title + "'>" + "</td>" + "<td>" + "<input class='form-control' id='ex2' type='text' value='" + element.new_summary + "'>" + "</td>" + Delete + Editdone + "</tr>"; var Record = "<tr class = 'Record'><td>" + element.new_title + "</td>" + "<td>" + element.new_summary + "</td>" + Delete + Edit + "</tr>"; $("tbody").append(Record); $("tbody").append(TextBox); $(".TextBox").hide(); }); var Create = "<tr class = 'CreateBox'> <td>" + "<input class = 'form-control' id = 'ex3' type='text'> </td> <td>" + "<input class = 'form-control' id = 'ex4' type='text'> </td> <td>" + "<center> <div id = 'createsave' value = 'https://abcxyz.com/api/data/v9.0/new_tbooks'>Save</div> </center> </td> <td>" + "<center> <div id = 'cancel'>Cancel</div> </center> </td> </tr>"; $("tbody").append(Create); $(".CreateBox").hide(); $(".x").click(function (event) { var confim = confirm("Do you Want To Delete This ?"); if (confim) { var value = $(this).attr("value"); AjaxDeleteContent(value); } else { event.preventDefault(); } }); $("#cancel").click(function (event) { AjaxSearchContent(value); }); $(".edit").click(function (event) { $(".TextBox").show(); $(".Record").hide(); $(".CreateBox").hide(); }); $(".save").click(function (event) { var confim = confirm("Do you Want To Update This ?"); if (confim) { var value = $(this).attr("value"); var title = document.getElementById("ex1").value; var summary = document.getElementById("ex2").value; AjaxUpdateContent(value, title, summary); } else { event.preventDefault(); } }); $("#create").click(function (event) { $(".TextBox").hide(); $(".Record").hide(); $(".CreateBox").show(); }); $("#createsave").click(function (event) { var confim = confirm("Do you Want To Create This ?"); if (confim) { var value = $(this).attr("value"); var title = document.getElementById("ex3").value; var summary = document.getElementById("ex4").value; AjaxCreateContent(title, summary); } else { event.preventDefault(); } }); } //Delete Ajax function AjaxDeleteContent(id) { $.ajax({ url: id, type: "DELETE", //dataType: "JSON", async: true, success: function () { AjaxSearchContent(value); }, error: function () { alert("Error") } }); } $(document).ready(function () { $("#sclick").click(function () { var value = $("#search").val(); AjaxSearchContent(value); }); }); $(document).ready(function () { $("#aclick").click(function() { AjaxAscContent(); }); }); $(document).ready(function () { $("#dclick").click(function() { AjaxDesContent(); }); }); //Des Ajax function AjaxDesContent() { $("tbody").html(null); $.ajax({ type: "GET", datatype: "json", contentType: 'application/json', url: "https://abcxyz.com/api/data/v9.0/new_tbooks?$orderby=new_title desc", beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0"); XMLHttpRequest.setRequestHeader("OData-Version", "4.0"); XMLHttpRequest.setRequestHeader("Accept", "application/json"); XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations="*""); }, async: true, success: function (data) { AjaxGetContent(data); } }) } //Asc Ajax function AjaxAscContent() { $("tbody").html(null); $.ajax({ type: "GET", datatype: "json", contentType: 'application/json', url: "https://abcxyz.com/api/data/v9.0/new_tbooks?$orderby=new_title asc", beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0"); XMLHttpRequest.setRequestHeader("OData-Version", "4.0"); XMLHttpRequest.setRequestHeader("Accept", "application/json"); XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations="*""); }, async: true, success: function (data) { AjaxGetContent(data); } }) } //Search Ajax function AjaxSearchContent(value) { $("tbody").html(null); $.ajax({ type: "GET", datatype: "json", contentType: 'application/json', url: "https://abcxyz.com/api/data/v9.0/new_tbooks?$filter=contains(new_summary, '" + value + "') or contains(new_title, '" + value + "')", beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0"); XMLHttpRequest.setRequestHeader("OData-Version", "4.0"); XMLHttpRequest.setRequestHeader("Accept", "application/json"); XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations="*""); }, async: true, success: function (data) { AjaxGetContent(data); } }) } //Edit Ajax function AjaxUpdateContent(id, title, summary) { if (document.getElementById("ex1").value == "") { alert("Title Not Null!"); } else { var entity = {}; entity.new_title = title; entity.new_summary = summary; $.ajax({ type: "PATCH", url: id, data: JSON.stringify(entity), contentType: 'application/json', dataType: "JSON", async: true, success: function (data) { AjaxSearchContent(value); }, error: function () { alert("Error") } }); } } //Create Ajax function AjaxCreateContent(title, summary) { if (document.getElementById("ex3").value == "") { alert("Title Not Null!"); } else { var entity = { new_title: title, new_summary: summary }; $.ajax({ type: "POST", url: "https://abcxyz.com/api/data/v9.0/new_tbooks", data: JSON.stringify(entity), contentType: 'application/json', dataType: "JSON", async: true, success: function (data) { AjaxSearchContent(value); }, error: function () { alert("Error") } }); } } }) </script> </body> </html>

Trên là code khi các bạn preview bằng Web Resource, còn nếu thông qua form thì đường link abcxyz.com nên được gán động bằng cú pháp:

Code:: window.parent.Xrm.Page.context.getClientUrl();