Nach dem ersten Teil der Blogserie, in dem wir die erste Provider Hosted App erstellt haben, möchte ich heute nun zeigen, wie man statt der angeschlossenen ASP.Net-Applikation eine ASP.Net MVC-Applikation verwenden kann.

Öffnen Sie Ihre Provider-Hosted App aus Teil 1 und erstellen Sie in der Solution ein neues ASP.Net MVC Projekt aus dem Webknoten (z.B. mit Project Template “Basic”).

image

Wählen Sie als nächste Ihre App und legen sie in den Eigenschaften da Webprojekt auf die neue MVC-App um.

image

Nun fragt Sie Visual Studio ob es Einstellungen für Sie vornehmen darf. Zu diesen Einstellungen gehört:

  • Beide Projekte als Startup-Projekte zu setzen
  • Die Eigenschaften in der Web.Config im MVC-Projekt umbauen
  • Den TokenHelper in die MVC-Applikation integrieren

Bestätigen Sie den Dialog mit “Ja”.

Wie man sehen kann, wurden die notwendigen Referenzen für SharePoint 2013 hinzugefügt.

image

Nun müssen wir eine MVC-Struktur aufbauen um eine erste Seite zu erhalten. Zunächst erstellen wir einen Controller. Dazu klicken Sie auf den Ordner Controller –> Add –> Empty MVC-Controller. In unserem Beispiel heißt der Controller “HomeController”.

Fügen Sie folgenden Code in den Controller ein:

  1. public ActionResult Index()  
  2.        {  
  3.            Uri hostweb = new Uri(Request.QueryString[„SPHostUrl“]);  
  4.  
  5.            using (var clientContext = TokenHelper.GetS2SClientContextWithWindowsIdentity(hostweb, Request.LogonUserIdentity))  
  6.            {  
  7.                var web = clientContext.Web;  
  8.  
  9.                clientContext.Load(web, w => w.Lists.Where(l => !l.Hidden));  
  10.                clientContext.ExecuteQuery();  
  11.  
  12.                List<string> listtitles = new List<string>();  
  13.  
  14.                foreach (var list in web.Lists)  
  15.                {  
  16.                    listtitles.Add(list.Title);  
  17.                }  
  18.  
  19.                return View(listtitles);  
  20.            }  
  21.        } 

Anschließend erstellen Sie einen View. Erstellen Sie dazu zunächst einen Unterordner “Home”. Anschließend klicken Sie auf den Ordner Home –> Add –> View. Den View nennen Sie “Index”. Setzen Sie den Haken bei “Use a layout of master page”.

Danach fügen Sie folgenden Code in den View ein:

  1. @{  
  2.     ViewBag.Title = „Index“;  
  3. }  
  4.  
  5. <div> 
  6.     <ul> 
  7.         @foreach (var list in Model)  
  8.         {  
  9.             <li>@list</li> 
  10.         }  
  11.     </ul> 
  12. </div> 

Nun muss für unser Beispiel die Startpage umgesetzt werden. Öffnen Sie die App.Manifest in der Codeansicht. Ersetzen Sie den Eintrag der <Startpage> mit folgendem Eintrag:

image

Nun können Sie die Applikation starten und bekommen noch einmal eine Aufforderung um die App zu berechtigen. Anschließend können Sie die App betrachten.

Im nächsten Schritt wollen wir das Aussehen unserer App so anpassen, dass sie wie eine SharePoint-App aussieht. Dazu verwendet man das Chrome Control.

Verändern Sie die Masterpage unter Views/Shared/_layouts.cshtml auf folgende Weise:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset=„utf-8“ /> 
  5.     <meta name=„viewport“ content=„width=device-width“ /> 
  6.     @Styles.Render(„~Content/themes/base/css“, „~/Content/css“)  
  7.     @Scripts.Render(„~/bundles/modernizr“)  
  8.     <script type=„text/javascript“ src=„https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js“></script> 
  9.     <script type=„text/javascript“ src=„https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js“></script> 
  10.  
  11.     <script type=„text/javascript“> 
  12.         var hostweburl;  
  13.  
  14.         $(document).ready(function () {  
  15.             hostweburl = decodeURIComponent(getQueryStringParameter(„SPHostUrl“));  
  16.             var scriptbase = hostweburl + „/_layouts/15/“;  
  17.             $.getScript(scriptbase + „SP.UI.Controls.js“, renderChrome);  
  18.         });  
  19.  
  20.         // Callback for the onCssLoaded event defined  
  21.         //  in the options object of the chrome control  
  22.         function chromeLoaded() {  
  23.             // When the page has loaded the required  
  24.             //  resources for the chrome control,  
  25.             //  display the page body.  
  26.             $(„body“).show();  
  27.         }  
  28.  
  29.         //Function to prepare the options and render the control  
  30.         function renderChrome() {  
  31.             // The Help, Account and Contact pages receive the   
  32.             //   same query string parameters as the main page  
  33.             var options = {  
  34.                 „appIconUrl“: „/Content/Images/logo.jpg“,  
  35.                 „appTitle“: „@ViewBag.Title“,  
  36.                 „appHelpPageUrl“: „Help.html?“  
  37.                     + document.URL.split(„?“)[1],  
  38.                 // The onCssLoaded event allows you to   
  39.                 //  specify a callback to execute when the  
  40.                 //  chrome resources have been loaded.  
  41.                 „onCssLoaded“: „chromeLoaded()“,  
  42.                 „settingsLinks“: [  
  43.                     {  
  44.                         „linkUrl“: „Account.html?“  
  45.                             + document.URL.split(„?“)[1],  
  46.                         „displayName“: „Account settings“  
  47.                     },  
  48.                     {  
  49.                         „linkUrl“: „Contact.html?“  
  50.                             + document.URL.split(„?“)[1],  
  51.                         „displayName“: „Contact us“  
  52.                     }  
  53.                 ]  
  54.             };  
  55.  
  56.             var nav = new SP.UI.Controls.Navigation(„chrome_ctrl_placeholder“, options);  
  57.             nav.setVisible(true);  
  58.         }  
  59.  
  60.         function getQueryStringParameter(paramToRetrieve) {  
  61.             var params = document.URL.split(„?“)[1].split(„&“);  
  62.             var strParams = „“;  
  63.  
  64.             for (var i = 0; i < params.length; i++) {  
  65.                 var singleParam = params[i].split(„=“);  
  66.  
  67.                 if (singleParam[0] == paramToRetrieve) {  
  68.                     return singleParam[1];  
  69.                 }  
  70.             }  
  71.         }  
  72.  
  73.     </script> 
  74. </head> 
  75. <body> 
  76.     <div id=„chrome_ctrl_placeholder“></div> 
  77.     @RenderBody()  
  78.     @Scripts.Render(„~/bundles/jquery“)  
  79.     @RenderSection(„scripts“, required: false)  
  80. </body> 
  81. </html> 

 

Danach können Sie die App wieder bereitstellen. Ich habe die App noch ein wenig angepasst aber im Grund sollte Ihre App dann ungefähr so aussehen. (Quelle des Bildes links oben: http://www.zooportraits.com/)

image

 

Das war der zweite Teil der Blogserie. Weitere Teile Folgen:

  1. Vorbereitung und Bereitstellung einer Provider Hosted App
  2. Provider Hosted Apps und ASP.Net MVC
  3. Bereitstellung und Entwicklung der Applikation auf einem IIS
  4. SharePoint Hosted Apps – Zugriff auf das HostWeb
  5. SharePoint Hosted Apps – AppContext bei CSOM und REST
  6. SharePoint Hosted Apps – Entwicklung mit CSOM und REST

1 Comments

  1. Pingback: Blogserie: Apps in SharePoint 2013 – Teil 2: Provider Hosted Apps und ASP.Net MVC - SharePoint Blogs in German - Bamboo Nation

Leave a comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload the CAPTCHA.