수색…


개발 환경 설정

App Development로 시작하려면 Visual Studio 2013 이상의 버전이 필요합니다. 최신 커뮤니티 또는 표현판을 여기에서 다운로드하십시오.> https://www.visualstudio.com/products/free-developer-offers-vs

일단 다운로드 및 설치되면

열고 새 프로젝트 만들기를 클릭하십시오.

Office / SharePoint 섹션을 확장하면 아래와 같이 App 옵션이 표시됩니다.

여기에 이미지 설명을 입력하십시오.

응용 프로그램 옵션을 사용할 수없는 경우 VS 닫기, Microsoft Office Developer Tools 다운로드 및 설치 https://www.visualstudio.com/en-us/features/office-tools-vs.aspx

개발자 사이트 준비

Visual Studio를 설치 한 후에는 개발자 사이트를 통해 SharePoint에 응용 프로그램을 배포해야합니다. 가장 간단한 방법은 다음과 같습니다> 1 년 무료 Office 365 개발자 계정에 가입 하십시오. https://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061-f798fbb4d170&lcid=1033

가입 절차가 완료되면 https://www.office.com/ center URL을 귀하의 모든 앱에 적용하십시오. 여기에 이미지 설명을 입력하십시오.

Visual Studio에서 앱 만들기

첫 번째 앱을 만드는 것으로 시작하자.

  1. 비주얼 스튜디오 열기 및 새 프로젝트 만들기
  2. 이름과 위치 입력 여기에 이미지 설명을 입력하십시오.
  1. 이전 단계에서 생성 한 개발자 사이트 URL을 입력하고 Provider-hosted를 선택하십시오.

여기에 이미지 설명을 입력하십시오.

  1. 로그인 할 때 팝업이 열립니다.

  2. 다음 단계는 응용 프로그램의 유형에 따라 MVC 또는 Webform을 선택합니다. MCV를 여기에서 선택합니다. 여기에 이미지 설명을 입력하십시오.

  3. 어떻게 추가 기능을 인증 하시겠습니까?에서 Windows Azure 액세스 제어 서비스 사용을 선택하고 마침을 클릭하십시오.

  4. 솔루션 탐색기에서 2 개의 프로젝트가 생성 된 것을 볼 수 있습니다. 하나는 SharePoint app-part이고 다른 하나는 asp.net 웹 앱입니다.

여기에 이미지 설명을 입력하십시오.

코딩을 시작하자.

여기에서 나는 기본적인 뉴스 앱의 예를 들고있다.

  1. SharePoint 개발자 사이트를 열고 뉴스 기사를 저장할 목록 만들기

  2. 사용자 정의 목록을 만들고 3 열 더 추가 Body, Summery, ThumbnailImageUrl 여기에 이미지 설명을 입력하십시오.

  3. SharePoint 응용 프로그램으로 돌아가 AppManifest.xml 파일을 열고 권한 탭을 클릭 한 다음 사이트 모음에 읽기 권한을 부여하고 저장합니다. 여기에 이미지 설명을 입력하십시오.

  4. 웹 응용 프로그램에서 HomeController를 엽니 다. 제 경우에는 MVC 응용 프로그램입니다. webform 앱을 만드는 경우 default.aspx.cs 페이지에 코드가 있어야합니다.

  5. 다음은 목록에서 최신 뉴스를 가져 오는 코드 스 니펫입니다. 우리의 인덱스 페이지가 어떻게 보일 것인가.

    [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. 이제 색인에서 마우스 오른쪽 버튼을 클릭하고 보기 추가를 클릭 하십시오. 그런 다음 추가를 클릭하십시오.

여기에 이미지 설명을 입력하십시오.

  1. 이제 Index.cshtml 파일을 엽니 다. 보기에서> 홈 디렉토리

  2. 다음은 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. 솔루션에서 Model 폴더를 마우스 오른쪽 버튼으로 클릭하고 CS 클래스 파일을 추가하십시오. 모델 클래스 아래에 추가

     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. F5 키를 사용하여 추가 기능을 배포하고 실행합니다. 자체 서명 된 로컬 호스트 인증서를 신뢰하도록 요청하는 보안 경고 창이 표시되면 예를 선택하십시오.

이제 첫 번째 앱이 준비되었습니다.

기사 전체 작성 페이지

우리는 이미 모든 뉴스 기사를 보여주는 첫 페이지를 만들었습니다. 이 페이지에는 기사 전체가 표시됩니다.

  1. 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. 다시 Action을 마우스 오른쪽 버튼으로 클릭하고 동일한 이름의 Action 메소드 이름으로 View를 작성하십시오. 내 경우에는 뷰가 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>
    

이것은 뉴스 기사의 본문을 보여주는 전체 기사 페이지의 코드입니다.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow