sharepoint Creating a provider hosted App Lets start coding

Example

Here I'm taking the example of a basic news app

1. Open the SharePoint developer site and create a list to store our news articles

2. Create a custom list and Add 3 more columns Body, Summery, ThumbnailImageUrl

3. Go back to our SharePoint app, Open AppManifest.xml file, click on permission Tab and give Read permission to the site collection and save it.

4. Open HomeController from web application, in my case its an MVC application. If you are creating an webform app then you code should be in default.aspx.cs page

5. Below is the code snippet to get latest news from the list. This how our index page should look like.

   [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. Now Right click on Index and Click Add View. Then click on Add

7. Now open the Index.cshtml file From Views>Home directory

8. Below is the code snippet for index.cshtml file

   @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>
   

9. Right click on Model folder in your solution and Add a CS class file. Add below Model classes

    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; }
   
    }
   }
   

10. Use the F5 key to deploy and run your add-in. If you see a Security Alert window that asks you to trust the self-signed Localhost certificate, choose Yes.

And now first App is ready