sharepoint
Creazione di un'app ospitata dal provider
Ricerca…
Impostazione dell'ambiente di sviluppo
Per iniziare con App Development abbiamo bisogno di Visual Studio 2013 o versione successiva. Scarica l'ultima versione di community o expression da qui> https://www.visualstudio.com/products/free-developer-offers-vs
Una volta scaricato e installato
Apri e fai clic su crea nuovo progetto
espandi la sezione Office / SharePoint dovresti vedere un'opzione per App come mostrato di seguito.
Se l'opzione App non è disponibile Chiudere il VS, scaricare e installare gli Strumenti per gli sviluppatori di Microsoft Office https://www.visualstudio.com/en-us/features/office-tools-vs.aspx
Preparazione per il sito degli sviluppatori
Una volta che abbiamo uno studio visivo, abbiamo bisogno di un sito per sviluppatori per distribuire app in SharePoint. Il modo più semplice è quello di ottenere è> Registrati per un account di sviluppatore di Office 365 gratuito per un anno https://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061-f798fbb4d170&lcid=1033
Una volta che il processo di registrazione è finito https://www.office.com / centro URL per tutta la tua app 
Crea app in Visual Studio
Iniziamo con la creazione della nostra prima app
- Apri lo studio visivo e> crea un nuovo progetto
- Inserisci nome e posizione
- Inserisci l'URL del tuo sito sviluppatore creato nel passaggio precedente e seleziona Provider ospitato
Si aprirà un popup che avrà come login
Il prossimo passo sarà come per il tipo di applicazione, selezionare MVC o Webform. Sto selezionando MCV qui
In Come si desidera che il componente aggiuntivo esegua l'autenticazione ?, scegliere Usa servizio di controllo di accesso di Windows Azure. Fare clic su Fine
In solution explorer possiamo vedere che 2 progetti sono stati creati. Uno è la parte dell'app di SharePoint e un'altra è l'app Web di asp.net
Iniziamo la codifica
Qui sto prendendo l'esempio di un'app di notizie di base
Apri il sito degli sviluppatori di SharePoint e crea un elenco per archiviare i nostri articoli di notizie
Creare un elenco personalizzato e aggiungere altre 3 colonne Corpo, Estivo, ThumbnailImageUrl
Torna alla nostra app di SharePoint, apri il file AppManifest.xml, fai clic sulla scheda di autorizzazione e concedi l'autorizzazione di lettura alla raccolta siti e salvala.
Aprire HomeController dall'applicazione Web, nel mio caso è un'applicazione MVC. Se stai creando un'app webform, il codice dovrebbe essere nella pagina default.aspx.cs
Di seguito è riportato lo snippet di codice per ottenere le ultime notizie dall'elenco. Ecco come dovrebbe apparire la nostra pagina indice.
[SharePointContextFilter] public ActionResult Index() { User spUser = null; var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext); List<NewsList> newsList = new List<NewsList>(); using (var clientContext = spContext.CreateUserClientContextForSPHost()) { if (clientContext != null) { spUser = clientContext.Web.CurrentUser; clientContext.Load(spUser, user => user.Title); clientContext.ExecuteQuery(); ViewBag.UserName = spUser.Title; List lst = clientContext.Web.Lists.GetByTitle("News"); CamlQuery queryNews = CamlQuery.CreateAllItemsQuery(10); ListItemCollection newsItems = lst.GetItems(queryNews); clientContext.Load(newsItems, includes => includes.Include(i => i.Id, i => i.DisplayName, i => i["ThumbnailImageUrl"], i => i["Summery"])); clientContext.ExecuteQuery(); if (newsItems != null) { foreach (var lstProductItem in newsItems) { newsList.Add( new NewsList { Id = Convert.ToInt32(lstProductItem.Id.ToString()), Title = lstProductItem.DisplayName.ToString(), Summery = lstProductItem["Summery"].ToString(), Thumbnail = lstProductItem["ThumbnailImageUrl"].ToString() }); } } } } return View(newsList); }Ora fai clic destro su Indice e fai clic su Aggiungi vista. Quindi fare clic su Aggiungi
Ora apri il file Index.cshtml da Views> Home directory
Di seguito è riportato lo snippet di codice per il file index.cshtml
@model List<SharePointNewsAppWeb.Models.NewsList> @{ ViewBag.Title = "My News - browse latest news"; } <br /> @foreach (var item in Model) { <div class="row panel panel-default"> <div class="col-xs-3"> <a href="/home/[email protected]"> <img class="img-responsive" style="max-height:200px;max-width:100%;" src="@item.Thumbnail" alt="@item.Title" /> </a> </div> <div class="col-xs-9 panel-default"> <div class="panel-heading"> <h4><a href="/home/[email protected]">@item.Title.ToUpper()</a></h4> </div> <div class="panel-body"> <p>@item.Summery</p> </div> </div>Fare clic con il tasto destro sulla cartella Modello nella soluzione e aggiungere un file di classe CS. Aggiungi sotto Classi di modelli
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SharePointNewsAppWeb.Models { public class NewsApp { } public class NewsList { public int Id { get; set; } public string Title { get; set; } public string Summery { get; set; } public string Thumbnail { get; set; } } public class FullArticle { public int Id { get; set; } public string Title { get; set; } public string Body { get; set; } } }Utilizzare il tasto F5 per distribuire ed eseguire il componente aggiuntivo. Se viene visualizzata una finestra di avviso di sicurezza che richiede di considerare attendibile il certificato Localhost autofirmato, selezionare Sì.
E ora la prima app è pronta
Creazione di una pagina completa dell'articolo
Abbiamo già creato la prima pagina che mostrerà tutti gli articoli di notizie. Questa pagina mostrerà l'articolo completo.
Aggiungi un altro metodo di azione a HomeController
[SharePointContextFilter] public ActionResult Aticle(int ArticleId) { User spUser = null; var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext); FullArticle article = new FullArticle(); using (var clientContext = spContext.CreateUserClientContextForSPHost()) { if (clientContext != null) { spUser = clientContext.Web.CurrentUser; clientContext.Load(spUser, user => user.Title); clientContext.ExecuteQuery(); ViewBag.UserName = spUser.Title; List lst = clientContext.Web.Lists.GetByTitle("News"); CamlQuery queryNews = new CamlQuery(); queryNews.ViewXml = @"<View><Query><Where><Eq><FieldRef Name='ID'/>" + "<Value Type='Number'>" + ArticleId + "</Value></Eq></Where></Query>" + "<ViewFields><FieldRef Name='ID'/><FieldRef Name='Title'/><FieldRef Name='Body'/></ViewFields></View>";// ListItemCollection newsItems = lst.GetItems(queryNews); clientContext.Load(newsItems, includes => includes.Include(i => i.Id, i => i.DisplayName, i => i["Body"])); clientContext.ExecuteQuery(); if (newsItems != null) { foreach (var lstProductItem in newsItems) { article.Id = Convert.ToInt32(lstProductItem.Id.ToString()); article.Title = lstProductItem.DisplayName.ToString(); article.Body = lstProductItem["Body"].ToString(); } } } } return View(article); }Fare nuovamente clic con il tasto destro su Azione e creare una vista con lo stesso nome Nome metodo di azione. Nel mio caso, la vista si chiamerà Aticle
@model SharePointNewsAppWeb.Models.FullArticle @{ ViewBag.Title = "Aticle"; } <br /> <div class="panel panel-default"> <div class="panel-heading"><a style="font-size:20px;" href="/"><i class="glyphicon glyphicon-chevron-left"></i> <i class="glyphicon glyphicon-home"></i> </a></div> <div class="panel-heading"><h1 class="h2">@Model.Title.ToUpper()</h1></div> <div class="panel-body">@Html.Raw(@Model.Body)</div> </div>
Questo è il codice per la pagina completa dell'articolo che mostra il corpo dell'articolo