Szukaj…


Ustawienie środowiska programistycznego

Aby zacząć od tworzenia aplikacji, potrzebujemy Visual Studio 2013 lub wyższej wersji. Pobierz najnowszą edycję społeczności lub wypowiedzi tutaj> https://www.visualstudio.com/products/free-developer-offers-vs

Po pobraniu i zainstalowaniu

Otwórz i kliknij utwórz nowy projekt

rozwiń sekcję Office / SharePoint, powinieneś zobaczyć opcję dla aplikacji, jak pokazano poniżej.

wprowadź opis zdjęcia tutaj

Jeśli opcja aplikacji nie jest dostępna Zamknij VS, pobierz i zainstaluj narzędzia Microsoft Office Developer Tools https://www.visualstudio.com/en-us/features/office-tools-vs.aspx

Przygotowywanie witryny dewelopera

Gdy mamy już studio graficzne, potrzebujemy witryny programisty do wdrażania aplikacji w SharePoint. Najprostszym sposobem jest uzyskanie> Zarejestruj bezpłatne, roczne konto programisty Office 365 https://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061-f798fbb4d170&lcid=1033

Po zakończeniu procesu rejestracji https://www.office.com/ centrum URL dla całej aplikacji wprowadź opis zdjęcia tutaj

Utwórz aplikację w Visual studio

Zacznijmy od stworzenia naszej pierwszej aplikacji

  1. Otwórz studio graficzne i> stwórz nowy projekt
  2. Wpisz nazwę i lokalizację wprowadź opis zdjęcia tutaj
  1. Wpisz adres URL witryny programisty utworzonej w poprzednim kroku i wybierz opcję Hosted Provider

wprowadź opis zdjęcia tutaj

  1. Otworzy się okienko wyskakujące, które będzie się logować

  2. Kolejnym krokiem będzie jak w przypadku rodzaju aplikacji, wybierz MVC lub Webform. Wybieram MCV tutaj wprowadź opis zdjęcia tutaj

  3. W obszarze Jak chcesz, aby Twój dodatek uwierzytelniał się? Wybierz opcję Użyj usługi kontroli dostępu do systemu Windows Azure. I kliknij przycisk Zakończ

  4. W eksploratorze rozwiązań możemy zobaczyć, że utworzono 2 projekty. Jedna to część aplikacji SharePoint, a druga to aplikacja internetowa asp.net

wprowadź opis zdjęcia tutaj

Zacznijmy kodować

Oto przykład podstawowej aplikacji z wiadomościami

  1. Otwórz witrynę programisty SharePoint i utwórz listę do przechowywania naszych artykułów

  2. Utwórz listę niestandardową i dodaj 3 kolejne kolumny Treść, Summery, ThumbnailImageUrl wprowadź opis zdjęcia tutaj

  3. Wróć do naszej aplikacji SharePoint, otwórz plik AppManifest.xml, kliknij kartę uprawnień i daj uprawnienia do odczytu kolekcji witryn i zapisz ją. wprowadź opis zdjęcia tutaj

  4. Otwórz HomeController z aplikacji internetowej, w moim przypadku jest to aplikacja MVC. Jeśli tworzysz aplikację internetową, kod powinien znajdować się na stronie default.aspx.cs

  5. Poniżej znajduje się fragment kodu, aby uzyskać najnowsze wiadomości z listy. Tak powinna wyglądać nasza strona indeksu.

    [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);
    }
    
  6. Teraz kliknij prawym przyciskiem myszy Indeks i kliknij Dodaj widok. Następnie kliknij Dodaj

wprowadź opis zdjęcia tutaj

  1. Teraz otwórz plik Index.cshtml Z Widoki> Katalog domowy

  2. Poniżej znajduje się fragment kodu pliku 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>
    
  3. Kliknij prawym przyciskiem myszy folder Model w swoim rozwiązaniu i Dodaj plik klasy CS. Dodaj poniżej Klasy modeli

     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; }
    
     }
    }
    
  4. Użyj klawisza F5, aby wdrożyć i uruchomić dodatek. Jeśli zobaczysz okno Alert bezpieczeństwa z prośbą o zaufanie do samopodpisanego certyfikatu Localhost, wybierz Tak.

A teraz pierwsza aplikacja jest gotowa

Tworzenie pełnej strony artykułu

Stworzyliśmy już pierwszą stronę, która pokaże wszystkie artykuły z wiadomościami. Ta strona pokaże pełny artykuł.

  1. Dodaj jeszcze jedną metodę działania do 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);
    }
    
  2. Ponownie kliknij Akcja prawym przyciskiem myszy i utwórz widok o tej samej nazwie Nazwa metody akcji. W moim przypadku Widok będzie nazywał się 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>
    

To jest kod strony Pełna artykuł, która pokazuje treść artykułu



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow