sharepoint
एक प्रदाता अनुप्रयोग की मेजबानी की

विकास का माहौल तय करना

ऐप डेवलपमेंट से शुरू करने के लिए हमें विजुअल स्टूडियो 2013 या उच्चतर संस्करण की आवश्यकता है। नवीनतम समुदाय या अभिव्यक्ति संस्करण यहाँ से डाउनलोड करें> https://www.visualstudio.com/products/free-developer-offers-p

एक बार यह डाउनलोड और इंस्टॉल हो गया

नया प्रोजेक्ट बनाएं और क्लिक करें

विस्तृत कार्यालय / SharePoint अनुभाग आपको नीचे दिखाए गए अनुसार ऐप के लिए एक विकल्प देखना चाहिए।

यदि एप्लिकेशन विकल्प उपलब्ध नहीं है, तो VS बंद करें, डाउनलोड करें और Microsoft Office डेवलपर टूल https://www.visualstudio.com/en-us/features/office-tools-vs.aspx स्थापित करें

डेवलपर साइट के लिए तैयारी कर रहा है

एक बार जब हमारे पास दृश्य स्टूडियो होता है, तो हमें SharePoint पर ऐप्स को तैनात करने के लिए एक डेवलपर साइट की आवश्यकता होती है। सबसे सरल तरीका यह है कि> मुफ़्त में साइन अप करें, एक वर्ष के लिए Office 365 डेवलपर खाता https://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061-f798fb4d170&lcid=103333

एक बार साइन अप प्रक्रिया समाप्त होने के बाद आपके सभी ऐप के लिए https://www.office.com/ सेंटर URL होगा

विजुअल स्टूडियो में ऐप बनाएं

आओ हम अपना पहला ऐप बनाते हैं

1. दृश्य स्टूडियो खोलें और> नई परियोजना बनाएं
2. नाम और स्थान दर्ज करें

3. पिछले चरण में बनाई गई अपनी डेवलपर साइट url दर्ज करें और प्रदाता-होस्ट चुनें

4. पॉपअप खुल जाएगा जो लॉगिन के लिए होगा

5. अगला चरण यह आवेदन के प्रकार के लिए होगा, या तो एमवीसी या वेबफॉर्म का चयन करें। मैं यहाँ MCV का चयन कर रहा हूँ

6. आप अपने ऐड-इन को कैसे प्रमाणित करना चाहते हैं ?, के तहत Windows Azure Access Control Service.and का उपयोग करें समाप्त करें चुनें

7. समाधान खोजकर्ता में हम देख सकते हैं कि 2 परियोजना बनाई गई है। एक SharePoint ऐप-पार्ट है और दूसरा asp.net वेब ऐप है

चलो कोडिंग शुरू करते हैं

यहां मैं एक मूल समाचार ऐप का उदाहरण ले रहा हूं

1. SharePoint डेवलपर साइट खोलें और हमारे समाचार लेखों को संग्रहीत करने के लिए एक सूची बनाएं

2. एक कस्टम सूची बनाएं और 3 और कॉलम जोड़ें बॉडी, समर, थम्बनेलइमेज यूआरएल

3. हमारे SharePoint एप्लिकेशन पर वापस जाएं, AppManifest.xml फ़ाइल खोलें, अनुमति टैब पर क्लिक करें और साइट संग्रह को पढ़ने की अनुमति दें और इसे सहेजें।

4. वेब अनुप्रयोग से होमकंट्रोलर खोलें, मेरे मामले में इसका एमवीसी अनुप्रयोग है। यदि आप एक वेबफ़ॉर्म ऐप बना रहे हैं तो आप को 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. अब इंडेक्स पर राइट क्लिक करें और ऐड व्यू पर क्लिक करें । फिर Add पर क्लिक करें

7. अब Views> Home निर्देशिका से Index.cshtml फ़ाइल खोलें

8. नीचे 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>
   

9. अपने समाधान में मॉडल फ़ोल्डर पर राइट क्लिक करें और एक सीएस क्लास फ़ाइल जोड़ें। मॉडल वर्गों के नीचे जोड़ें

    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. अपने ऐड-इन को चलाने और चलाने के लिए F5 कुंजी का उपयोग करें। यदि आपको एक सुरक्षा चेतावनी विंडो दिखाई देती है जो आपको स्व-हस्ताक्षरित लोकलहोस्ट प्रमाणपत्र पर भरोसा करने के लिए कहती है, तो हां चुनें।

और अब पहला App तैयार है

पूर्ण लेख पृष्ठ बनाना

हमने पहले पेज बनाया है जिसमें सभी समाचार लेख दिखाई देंगे। यह पृष्ठ पूरा लेख दिखाएगा।

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. फिर से एक्शन पर राइट क्लिक करें और एक ही नाम एक्शन विधि नाम के साथ एक व्यू बनाएं। माई केस में 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>
   

यह पूर्ण लेख पृष्ठ के लिए कोड है जो समाचार लेख का मुख्य भाग दिखाता है