قبلا در مورد قسمت 1 سریال صحبت کردیم .
اینم مراحل قسمت 2 سریال
مرحله 1: طراحی رابط کاربری برای انجام عملیات CRUD با Office 365 SharePoint List.
به منظور ادامه بیشتر، فایل های جدیدی را مانند تصویر زیر به راه حل پروژه اضافه می کنم.
کد منبع: برای ایجاد رابط کاربری به کنترل های html در صفحه نیاز داریم. لطفا به کد زیر برای ایجاد رابط کاربری بالا مراجعه کنید.
- <%@ Page Language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
- <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
- <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
- <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
- <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
- <SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
- <script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
- <script src="../Scripts/AdvanceLibrary.js" type="text/javascript"></script>
- <link href="../Content/App.css" rel="stylesheet" />
- </asp:Content>
- <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
- <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" />
- <div>
- <div class="bodyLeft">
- <div>
- List Name :
- <input type="text" id="txtListName" />
- </div>
- <hr />
- <div>
- <h2><b>List Creation</b></h2>
- <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWCreateList()">Create List</a>
- </div>
- <hr />
- <div>
- <h2><b>Add List Item</b></h2>
- <%-- <br />
- List Name :
- <input type="text" id="txtExistingListName" />--%>
- <table>
- <tr>
- <th>Field Name</th>
- <th>Field Value</th>
- </tr>
- <tr>
- <td>
- <input type="text" id="Input1" />
- </td>
- <td>
- <input type="text" id="Val1" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="text" id="Input2" />
- </td>
- <td>
- <input type="text" id="Val2" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="text" id="Input3" />
- </td>
- <td>
- <input type="text" id="Val3" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="text" id="Input4" />
- </td>
- <td>
- <input type="text" id="Val4" />
- </td>
- </tr>
- </table>
- <br />
- <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWCreateListItem()">Add List Data</a>
- </div>
- <hr />
- <div>
- <h2><b>Update List Item</b></h2>
- <%-- <br />
- List Name :
- <input type="text" id="txUpdationList" />--%>
- <table>
- <tr>
- <th>Field Name</th>
- <th>Field Value</th>
- </tr>
- <tr>
- <td>
- <input type="text" id="UpdateField1" />
- </td>
- <td>
- <input type="text" id="UpdateVal1" />
- </td>
- <td>Where ID =
- <input type="text" id="txtUpdateID" />
- </td>
- </tr>
- </table>
- <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWUpdateListItem()">Update List Data</a>
- </div>
- <hr />
- <div>
- <h2><b>Delete List Item</b></h2>
- <%-- <br />
- List Name :
- <input type="text" id="txtListDeletion" />--%>
- Where ID =
- <input type="text" id="txtDeletionID" />
- <br />
- <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWDeleteListItem()">Delete List Data</a>
- </div>
- </div>
- <div class="bodyRight">
- <div id="message"></div>
- <div id="ListData"></div>
- </div>
- </div>
- </asp:Content>
مرحله 2: داده های لیست را با استفاده از کتابخانه جاوا اسکریپت سفارشی بخوانید.
- var clientContext;
- var factory;
- var appContextSite;
- var web;
- var collList;
- var itemCreateInfo;
- var param1, param2, param3;
- var oList, targetList, listFields, oListItem, oField, itemId;
- var ExsitingListNameVal;
- var targetList;
- window.Wingtip = window.Wingtip || {}
- Wingtip.JSOMHostWebCollections = function()
- {
- LoadlayoutsJS = function()
- {
- //debugger
- hostweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPHostUrl"));
- appweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPAppWebUrl"));
- var Sessionhostweburl = sessionStorage.getItem("hostweburl");
- var Sessionappweburl = sessionStorage.getItem("appweburl");
- if (Sessionhostweburl == null || Sessionappweburl == null)
- {
- sessionStorage.setItem("hostweburl", hostweburl);
- sessionStorage.setItem("appweburl", appweburl);
- }
- if (hostweburl == null || appweburl == null || hostweburl == 'undefined' || appweburl == 'undefined')
- {
- hostweburl = sessionStorage.getItem("hostweburl");
- appweburl = sessionStorage.getItem("appweburl");
- }
- var scriptbase = hostweburl + "/_layouts/15/";
- $.getScript(scriptbase + "SP.Runtime.js",
- function() {
- $.getScript(scriptbase + "SP.js",
- function() {
- $.getScript(scriptbase + "SP.RequestExecutor.js", Wingtip.JSOMHostWebCollections.HWLoadClientContext);
- }
- );
- });
- }
- getQueryStringParameter = function(paramToRetrieve)
- {
- //debugger
- try {
- var params =
- document.URL.split("?")[1].split("&");
- var strParams = "";
- for (var i = 0; i < params.length; i = i + 1)
- {
- var singleParam = params[i].split("=");
- if (singleParam[0] == paramToRetrieve)
- return singleParam[1];
- }
- } catch (ex) {
- }
- }
- LoadClientContext = function()
- {
- //debugger
- clientContext = new SP.ClientContext(appweburl);
- factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
- clientContext.set_webRequestExecutorFactory(factory);
- appContextSite = new SP.AppContextSite(clientContext, hostweburl);
- web = appContextSite.get_web();
- clientContext.load(web);
- Wingtip.JSOMHostWebCollections.HWReadListData();
- }
- ReadListData = function()
- {
- debugger
- var oList = web.get_lists().getByTitle("Book");
- var camlQuery = new SP.CamlQuery();
- camlQuery.set_viewXml('<View><RowLimit></RowLimit>10</View>');
- var collListItem = oList.getItems(camlQuery);
- //clientContext.load(collListItem);
- clientContext.load(collListItem, 'Include(ID,BookName,BookAuthor,BookPrice,BookVersion)');
- clientContext.executeQueryAsync(
- Function.createDelegate(this, onQuerySucceeded),
- Function.createDelegate(this, onQueryFailed)
- );
- function onQuerySucceeded(sender, args)
- {
- var innerHtml = "<tr><td class='ListTH'>ID</td><td class='ListTH'>Book Name</td><td class='ListTH'>Book Author</td><td class='ListTH'>Book Price</td><td class='ListTH'>Book Version</td></tr>";
- debugger
- var listItemInfo = '';
- var listItemEnumerator = collListItem.getEnumerator();
- while (listItemEnumerator.moveNext())
- {
- var oListItem = listItemEnumerator.get_current();
- var ID = oListItem.get_item('ID');
- var InputData1 = oListItem.get_item('BookName');
- var InputData2 = oListItem.get_item('BookAuthor');
- var InputData3 = oListItem.get_item('BookPrice');
- var InputData4 = oListItem.get_item('BookVersion');
- innerHtml += "<tr class='ListTR'><td>" + ID + "</td><td>" + InputData1 + "</td><td>" + InputData2 + "</td><td>" + InputData3 + "</td><td>" + InputData4 + "</td></tr>";
- //listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title') + '\nBody: ' + oListItem.get_item('Input1');
- }
- $("#ListData").html(innerHtml);
- //alert(listItemInfo.toString());
- }
- function onQueryFailed(sender, args)
- {
- alert('Request failed. ' + args.get_message() +
- '\n' + args.get_stackTrace());
- }
- }
- //public interface
- return
- {
- HWLoadlayoutsJS: LoadlayoutsJS,
- QSParameter: getQueryStringParameter,
- HWLoadClientContext: LoadClientContext,
- HWCreateList: CreateList,
- HWCreateListItem: CreateListItem,
- HWUpdateListItem: UpdateListItem,
- HWDeleteListItem: DeleteListItem,
- HWClearAllTextBox: ClearAllTextBox,
- HWReadListData: ReadListData,
- HWEmpty: Empty
- }
- }();
- $(document).ready(function()
- {
- //Load Out Of Box JS file for List Operation
- Wingtip.JSOMHostWebCollections.HWLoadlayoutsJS();
- });
خروجی
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/BlogImages/12082015064817AM/Read%20List.png)
مرحله 3: آیتم لیست را با استفاده از مدل شی جاوا اسکریپت مانند زیر اضافه کنید.
- CreateListItem = function()
- {
- debugger
- //var ListNameVal = $(txtExistingListName).val();
- var ListNameVal = $(txtListName).val();
- if (ListNameVal == "")
- {
- alert("Please Enter List Name");
- return;
- }
- var list = web.get_lists();
- var targetList = list.getByTitle(ListNameVal);
- var itemCreateInfo = new SP.ListItemCreationInformation();
- oListItem = targetList.addItem(itemCreateInfo);
- var Input1Val = $(Input1).val();
- var Input2Val = $(Input2).val();
- var Input3Val = $(Input3).val();
- var Input4Val = $(Input4).val();
- var Val1Val = $(Val1).val();
- var Val2Val = $(Val2).val();
- var Val3Val = $(Val3).val();
- var Val4Val = $(Val4).val();
- if (Input1Val != "" && Val1Val != "")
- oListItem.set_item(Input1Val, Val1Val);
- if (Input2Val != "" && Val2Val != "")
- oListItem.set_item(Input2Val, Val2Val);
- if (Input3Val != "" && Val3Val != "")
- oListItem.set_item(Input3Val, Val3Val);
- if (Input4Val != "" && Val4Val != "")
- oListItem.set_item(Input4Val, Val4Val);
- oListItem.update();
- clientContext.load(oListItem);
- clientContext.executeQueryAsync(
- Function.createDelegate(this, CreateListItemSucceeded),
- Function.createDelegate(this, CreateListItemFailed)
- );
- function CreateListItemSucceeded()
- {
- alert('Item Created Successfully : List Item ID -> ' + oListItem.get_id());
- }
- function CreateListItemFailed(sender, args)
- {
- alert('Request failed. ' + args.get_message() +
- '\n' + args.get_stackTrace());
- }
- }
خروجی
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/BlogImages/12082015064817AM/Step2.png)
تایید درج مورد
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/BlogImages/12082015064817AM/Step3.png)
رکورد جدید اکنون به لیست اضافه شده است.
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/BlogImages/12082015064817AM/Step4.png)
مرحله 4: مورد لیست را با توجه به مقدار ID مورد لیست به روز کنید. وقتی برای بهروزرسانی مورد فهرست به رابط کاربری ارجاع میدهید، باید مقدار شناسه را ارائه کنیم.
- UpdateListItem = function(ListName, Input1, Val1)
- {
- debugger
- //var ListNameVal = $(txUpdationList).val();
- var ListNameVal = $(txtListName).val();
- if (ListNameVal == "")
- {
- alert("Please Enter List Name");
- return;
- }
- var Input1Val = $(UpdateField1).val();
- var Val1Val = $(UpdateVal1).val();
- var list = web.get_lists();
- oList = list.getByTitle(ListNameVal);
- oListItem = oList.getItemById($(txtUpdateID).val());
- oListItem.set_item(Input1Val, Val1Val);
- oListItem.update();
- clientContext.executeQueryAsync(
- Function.createDelegate(this, UpdateListItemSucceeded),
- Function.createDelegate(this, UpdateListItemFailed)
- );
- function UpdateListItemSucceeded()
- {
- alert('Item Updated Successfully!');
- }
- function UpdateListItemFailed(sender, args)
- {
- alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
- }
- }
خروجی
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/BlogImages/12082015064817AM/Step5.png)
بهروزرسانی مورد اکنون تأیید دریافت کنید.
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/BlogImages/12082015064817AM/Step6.png)
مرحله 5: حذف آیتم لیست می توانیم از کد زیر استفاده کنیم
- DeleteListItem = function(ListName, ItemID)
- {
- debugger
- //var ListNameVal = $(txtListDeletion).val();
- var ListNameVal = $(txtListName).val();
- if (ListNameVal == "")
- {
- alert("Please Enter List Name");
- return;
- }
- var Input1Val = $(txtDeletionID).val();
- var list = web.get_lists();
- oList = list.getByTitle(ListNameVal);
- oListItem = oList.getItemById(Input1Val);
- oListItem.deleteObject();
- clientContext.executeQueryAsync(
- Function.createDelegate(this, deleteListItemSucceeded),
- Function.createDelegate(this, deleteListItemFailed)
- );
- function deleteListItemSucceeded()
- {
- alert('Item Deleted Successfully');
- }
- function deleteListItemFailed(sender, args)
- {
- alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
- }
- }
خروجی
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/BlogImages/12082015064817AM/Step8.png)
خروجی نهایی