--- title: "Blogserie: Apps in SharePoint 2013 – Teil 2: Provider Hosted Apps und ASP.Net MVC" description: In einzelnen Schritten wird erklärt, wie sie in der Provider Hosted App eine ASP.Net MVC-Applikation verwenden können. image: https://blog.hansevision.com/hubfs/rami-al-zayat-w33-zg-dNL4-unsplash-1.jpg --- [![HanseVision\_x\_Bechtle\_Group\_RGB\_Black](https://blog.hansevision.com/hs-fs/hubfs/HanseVision_x_Bechtle_Group_RGB_Black.png?width=225&height=45&name=HanseVision_x_Bechtle_Group_RGB_Black.png)](https://www.hansevision.com/) [Blog](https://blog.hansevision.com) Lösungen [Readiness](https://www.hansevision.com/readiness.html)[Wissensmanagement](https://www.hansevision.com/wissensmanagement.html)[Prozessautomatisierung](https://www.hansevision.com/prozessautomatisierung.html) Leistungen [Individuelle Lösungen](https://www.hansevision.com/individuelle-loesungen.html)[Adoption and Change Management](https://www.hansevision.com/adoption-changemanagement.html)[Support](https://www.hansevision.com/premiumsupport.html) [Über uns](https://www.hansevision.com/hansevision.html) [Termine](https://www.hansevision.com/termine.html)[Kundenprojekte](https://www.hansevision.com/referenzen.html)[Unsere Partner](https://www.hansevision.com/partner.html)[HanseVision Update](https://get.hansevision.com/de/newsletter) Karriere [HanseVision als Arbeitgeber](https://hansevision.career.softgarden.de/)[Jobs](https://hansevision.softgarden.io/de/vacancies) [Kontakt](https://www.hansevision.com/kontakt.html) [![HanseVision\_x\_Bechtle\_Group\_RGB\_Black](https://blog.hansevision.com/hs-fs/hubfs/HanseVision_x_Bechtle_Group_RGB_Black.png?width=163&height=32&name=HanseVision_x_Bechtle_Group_RGB_Black.png)](https://www.hansevision.com/) [Blog](https://blog.hansevision.com) Lösungen [Readiness](https://www.hansevision.com/readiness.html)[Wissensmanagement](https://www.hansevision.com/wissensmanagement.html)[Prozessautomatisierung](https://www.hansevision.com/prozessautomatisierung.html) Leistungen [Individuelle Lösungen](https://www.hansevision.com/individuelle-loesungen.html)[Adoption and Change Management](https://www.hansevision.com/adoption-changemanagement.html)[Support](https://www.hansevision.com/premiumsupport.html) [Über uns](https://www.hansevision.com/hansevision.html) [Termine](https://www.hansevision.com/termine.html)[Kundenprojekte](https://www.hansevision.com/referenzen.html)[Unsere Partner](https://www.hansevision.com/partner.html)[HanseVision Update](https://get.hansevision.com/de/newsletter) Karriere [HanseVision als Arbeitgeber](https://hansevision.career.softgarden.de/)[Jobs](https://hansevision.softgarden.io/de/vacancies) Zurück 2 Minuten Lesezeit 18.07.2013 [SharePoint](https://blog.hansevision.com/tag/sharepoint) [Tutorial](https://blog.hansevision.com/tag/tutorial) ![Bild von Steffen Schindler (ehemaliger Mitarbeiter)](https://blog.hansevision.com/hs-fs/hubfs/profile.png?width=140&height=140&name=profile.png) [Steffen Schindler (ehemaliger Mitarbeiter)](https://blog.hansevision.com/author/steffen-schindler) # Blogserie: Apps in SharePoint 2013 – Teil 2: Provider Hosted Apps und ASP.Net MVC --- Nach dem [ersten Teil](https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-1-vorbereitung-und-bereitstellung-einer-provider-hosted-app) 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](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/image_thumb5-3.png?width=641&height=583&name=image_thumb5-3.png "image")](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png) Wählen Sie als nächste Ihre App und legen sie in den Eigenschaften da Webprojekt auf die neue MVC-App um. [![image](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/image_thumb6-2.png?width=405&height=410&name=image_thumb6-2.png "image")](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png) 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](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/image_thumb7-1.png?width=244&height=131&name=image_thumb7-1.png "image")](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png) 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. using (var clientContext = TokenHelper.GetS2SClientContextWithWindowsIdentity(hostweb, Request.LogonUserIdentity)) 5. { 6. var web = clientContext.Web; 7. clientContext.Load(web, w =\> w.Lists.Where(l =\> !l.Hidden)); 8. clientContext.ExecuteQuery(); 9. List\ listtitles = new List\(); 10. foreach (var list in web.Lists) 11. { 12. listtitles.Add(list.Title); 13. } 14. return View(listtitles); 15. } 16. } 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. \ 6. @foreach (var list in Model) 7. { 8. \@list\ 9. } 10. \ 11. \ Nun muss für unser Beispiel die Startpage umgesetzt werden. Öffnen Sie die App.Manifest in der Codeansicht. Ersetzen Sie den Eintrag der \ mit folgendem Eintrag: [![image](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/image_thumb8-2.png?width=449&height=221&name=image_thumb8-2.png "image")](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png) 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. \ 2. \ 3. \ 4. \ 5. \ 6. @Styles.Render(“~Content/themes/base/css”, “~/Content/css”) 7. @Scripts.Render(“~/bundles/modernizr”) 8. \\ 9. \\ 10. \ 11. var hostweburl; 12. $(document).ready(function () { 13. hostweburl = decodeURIComponent(getQueryStringParameter(“SPHostUrl”)); 14. var scriptbase = hostweburl + “/\_layouts/15/”; 15. $.getScript(scriptbase + “SP.UI.Controls.js”, renderChrome); 16. }); 17. // Callback for the onCssLoaded event defined 18. //  in the options object of the chrome control 19. function chromeLoaded() { 20. // When the page has loaded the required 21. //  resources for the chrome control, 22. //  display the page body. 23. $(“body”).show(); 24. } 25. //Function to prepare the options and render the control 26. function renderChrome() { 27. // The Help, Account and Contact pages receive the 28. //   same query string parameters as the main page 29. var options = { 30. “appIconUrl”: “/Content/Images/logo.jpg”, 31. “appTitle”: “@ViewBag.Title”, 32. “appHelpPageUrl”: “Help.html?” 33. + document.URL.split(“?”)\[1\], 34. // The onCssLoaded event allows you to 35. //  specify a callback to execute when the 36. //  chrome resources have been loaded. 37. “onCssLoaded”: “chromeLoaded()”, 38. “settingsLinks”: \[ 39. { 40. “linkUrl”: “Account.html?” 41. + document.URL.split(“?”)\[1\], 42. “displayName”: “Account settings” 43. }, 44. { 45. “linkUrl”: “Contact.html?” 46. + document.URL.split(“?”)\[1\], 47. “displayName”: “Contact us” 48. } 49. \] 50. }; 51. var nav = new SP.UI.Controls.Navigation(“chrome\_ctrl\_placeholder”, options); 52. nav.setVisible(true); 53. } 54. function getQueryStringParameter(paramToRetrieve) { 55. var params = document.URL.split(“?”)\[1\].split(“&”); 56. var strParams = “”; 57. for (var i = 0; i \< params.length; i++) { 58. var singleParam = params\[i\].split(“=”); 59. if (singleParam\[0\] == paramToRetrieve) { 60. return singleParam\[1\]; 61. } 62. } 63. } 64. \ 65. \ 66. \ 67. \\ 68. @RenderBody() 69. @Scripts.Render(“~/bundles/jquery”) 70. @RenderSection(“scripts”, required: false) 71. \ 72. \   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/](http://www.zooportraits.com/)) [![image](https://blog.hansevision.com/hs-fs/hubfs/Imported_Blog_Media/image_thumb9-1.png?width=344&height=413&name=image_thumb9-1.png "image")](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png)   Das war der zweite Teil der Blogserie. Weitere Teile Folgen: 1. [Vorbereitung und Bereitstellung einer Provider Hosted App](https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-1-vorbereitung-und-bereitstellung-einer-provider-hosted-app) 2. [Provider Hosted Apps und ASP.Net MVC](https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-2-provider-hosted-apps-und-asp-net-mvc) 3. [Bereitstellung und Entwicklung der Applikation auf einem IIS](https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-3-bereitstellung-im-iis-entwicklung) 4. [SharePoint Hosted Apps – Zugriff auf das HostWeb](https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-4-sharepoint-hosted-apps-zugriff-auf-das-hostweb) 5. [SharePoint Hosted Apps – AppContext bei CSOM und REST](https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-5-sharepoint-hosted-apps-appcontext-bei-csom-und-rest) 6. [SharePoint Hosted Apps – Entwicklung mit CSOM und REST](https://blog.hansevision.com/sharepoint-hosted-apps-entwicklung-mit-csom-und-rest)     ![Bild von Steffen Schindler (ehemaliger Mitarbeiter)](https://blog.hansevision.com/hs-fs/hubfs/profile.png?width=140&height=140&name=profile.png) [Steffen Schindler (ehemaliger Mitarbeiter)](https://blog.hansevision.com/author/steffen-schindler) Diese Person ist nicht mehr bei HanseVision tätig. [Alle Artikel des Autors](https://blog.hansevision.com/author/steffen-schindler) [Zurück Blogserie: Apps in SharePoint 2013 – Teil 1: Vorbereitung und Bereitstellung einer Provider Hosted App](https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-1-vorbereitung-und-bereitstellung-einer-provider-hosted-app) [Weiter Blogserie: Apps in SharePoint 2013 – Teil 3: Bereitstellung im IIS (Entwicklung)](https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-3-bereitstellung-im-iis-entwicklung) ### Ähnliche Blog-Artikel ![](https://blog.hansevision.com/hs-fs/hubfs/Theme%20Development/hansevision-newsletter.png?width=410&name=hansevision-newsletter.png) ### Mit unserem HanseVision Update sind Sie immer gut informiert über alle Themen rund um moderne Zusammenarbeit, Lösungen und Tools, Referenzen und Aktionen. [![Jetzt zum Newsletter anmelden](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50) Updates & Aktionen Versand alle 4-6 Wochen Trends & aktuelle Entwicklungen ![](https://blog.hansevision.com/hs-fs/hubfs/Theme%20Development/hansevision-newsletter.png?width=250&height=250&name=hansevision-newsletter.png) [![Jetzt zum Newsletter anmelden](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/24882854/c769ef8c-5eed-48ae-ada2-7fc72d656a50) [Datenschutzerklärung](https://www.hansevision.com/datenschutzerklaerung.html) [Impressum](https://www.hansevision.com/impressum-688471.html) [AGB](https://www.hansevision.com/uploads/4/1/9/3/41931735/hansevision_agb_der_hansevision_gmbh_stand_31.03.2020.pdf) [Telefon: +49 (40) 2880 7590 - 0](tel:+4940288075900) Adresse: Atlantic Haus, Bernhard-Nocht-Strasse 113, 20359 Hamburg [Cookie-Richtlinien](https://www.hansevision.com/cookie-richtlinie.html) Cookie-Einstellungen ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Steffen Schindler (ehemaliger Mitarbeiter)", "url" : "https://blog.hansevision.com/author/steffen-schindler" }, "dateModified" : "2023-04-24T10:18:24.435Z", "datePublished" : "2013-07-18T22:00:00.000Z", "headline" : "Blogserie: Apps in SharePoint 2013 – Teil 2: Provider Hosted Apps und ASP.Net MVC", "image" : [ "https://blog.hansevision.com/hubfs/rami-al-zayat-w33-zg-dNL4-unsplash-1.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.hansevision.com/blogserie-apps-in-sharepoint-2013-teil-2-provider-hosted-apps-und-asp-net-mvc", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.hansevision.com/hubfs/HanseVision_x_Bechtle_Group_RGB_Black-1.png" }, "name" : "HanseVision GmbH" } } ```