PageRenderTime 58ms CodeModel.GetById 27ms RepoModel.GetById 0ms app.codeStats 0ms


HTML | 132 lines | 132 code | 0 blank | 0 comment | 0 complexity | 34ec7712368311b94621f163212b5870 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>QuickEdit Helper for WebMatrix - Start Here</title>
  5. <link href="content/Site.css" rel="stylesheet" type="text/css" />
  6. <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div class="header">
  11. <img src="content/images/webx-icon.png" alt="WebMatrix" />
  12. <h1>
  13. WebMatrix Helpers</h1>
  14. <h2>
  15. QuickEdit Helper - Start Here</h2>
  16. </div>
  17. <div class="content">
  18. <div class="navLinks">
  19. <a href="reference.htm">Helper Reference</a></div>
  20. <h3>
  21. Introduction</h3>
  22. <p>
  23. Microsoft WebMatrix provides an easy way to get started with Web development, and
  24. together with new Razor syntax for ASP.NET Web Pages it includes everything you
  25. need to get your Web site up, running and integrated with many different sites and
  26. networks. The WebMatrix helpers are designed to make your life easier when creating
  27. Web sites. They provide you a simple and consistent way of performing common Web
  28. development tasks that otherwise would require a great deal of custom coding. With
  29. one single line of code you should be able to consume an OData feed, store information
  30. in Windows Azure Storage, among other things.
  31. </p>
  32. <p>
  33. The <strong>QuickEdit</strong> helper is designed to make your WebMatrix sites editable.
  34. When the helper is in place, the users from your site that belong to a group (or
  35. role) that you define, will see an <strong>Edit</strong> button that launches an
  36. editor to update the content displayed there. On the other side, unregistered users
  37. (or anonymous) will just see the edited content, not the button. You don&#39;t have
  38. to worry about where to store the edited content, you just need to provide your
  39. database name and QuickEdit helper will take care of storing the content there.</p>
  40. <p>
  41. The helper includes the following files:</p>
  42. <ul>
  43. <li>The <strong>QuickEdit.cshtml</strong> file located into the <strong>App_Code</strong>
  44. folder inside you WebMatrix site</li>
  45. <li>A <strong>SaveContent.cshtml</strong> file under the <strong>QuickEdit</strong>
  46. folder that will handle the content data updates against the content database</li>
  47. <li>A folder located in <strong>QuickEdit/jHtmlAreaFiles, </strong>with the jHtmlArea
  48. files (<a href=""></a>)
  49. needed to render the HTML content editor</li>
  50. </ul>
  51. <h3>
  52. Getting Started in 60 Seconds</h3>
  53. <p>
  54. The easiest way to get started with the QuickEdit helper is to use the <strong>Starter
  55. Site</strong> WebMatrix template (Quick Start page | Site From Template | Starter
  56. Site template), which includes Web site membership configured with the <strong>WebSecurity</strong> helper.
  57. Now, to start using the QuickEdit helper follow these steps:</p>
  58. <ol>
  59. <li>Open the Files workspace and add the following highlighted line to the <strong>_AppStart.cshtml</strong>
  60. page of your WebMatrix site (create this page if it doesn't exists).
  61. <div class="code">
  62. @{<br />
  63. <span class="codeIndent1">WebSecurity.InitializeDatabaseConnection(&quot;StarterSite&quot;,
  64. &quot;UserProfile&quot;, &quot;UserId&quot;, &quot;Email&quot;, true);</span><br />
  65. <span class="codeIndent1">...</span><br />
  66. <span class="codeIndent1 highlight">QuickEdit.Initialize(&quot;StarterSite&quot;);</span><br />
  67. }
  68. </div>
  69. Where &quot;StarterSite&quot; is the name of your database. The QuickEdit helper
  70. will store the edited content there. Here you can also define which group of users
  71. (or roles) can edit the content (for example, @QuickEdit.Initialize(&quot;StarterSite&quot;,
  72. "myAdminGroup") ). The group (or role) used by default will be &quot;admin&quot;.</li>
  73. <li>Run the web site and create a new user, by using the <strong>Register</strong> link
  74. on the top right corner of the page. </li>
  75. <li>Following the steps in the section &quot;Creating Security for Groups of Users (Roles)&quot;
  76. from <a href="">
  77. this WebMatrix tutorial</a>, create a new &quot;<strong>admin</strong>&quot;
  78. user group (or role) and assign it to the recently created user.</li>
  79. <img src="content/images/quickedit-roles.png"/>
  80. <li>Add the highlighted lines from below in the page where you want to show editable
  81. content. The &quot;homepage&quot; value should be changed if necessary, by a unique
  82. name for each editable section. If you're using the Starter Site template, the GetHeaderHtml
  83. can be placed in <em>_SiteLayout.cshtml</em> and the GetContentHtml in <em>Default.cshtml</em>.
  84. <div class="code">
  85. &lt;!DOCTYPE html&gt;<br />
  86. &lt;html&gt;<br />
  87. <span class="codeIndent1">&lt;head&gt;</span><br />
  88. <span class="codeIndent2">...</span><br />
  89. <span class="codeIndent2 highlight">@QuickEdit.GetHeaderHtml()</span><br />
  90. <span class="codeIndent1">&lt;/head&gt;</span><br />
  91. <span class="codeIndent1">&lt;body&gt;</span><br />
  92. <span class="codeIndent2">...</span><br />
  93. <span class="codeIndent2 highlight">@QuickEdit.GetContentHtml("homepage")</span><br />
  94. <span class="codeIndent2">...</span><br />
  95. <span class="codeIndent1">&lt;/body&gt;</span><br />
  96. &lt;/html&gt;<br />
  97. </div>
  98. </li>
  99. <li>That&#39;s it! The QuickEdit helper will start managing the editable content of
  100. your web site automatically. Try logging in as the user you've created and see how
  101. the <strong>Edit</strong> button is displayed, as this user belongs to the &quot;admin&quot; group (or role).</li>
  102. </ol>
  103. <h3>
  104. Running the Bakery Sample Web site</h3>
  105. <p>
  106. Optionally, you can download a sample WebMatrix web site where you can see the helper
  107. in action. To download and run the sample, follow these steps.</p>
  108. <ol>
  109. <li>Browse to the <a href="">QuickEdit Helper CodePlex
  110. site</a> and download the <strong>QuickEdit Helper Sample</strong>.</li>
  111. <li>Extract the content of the package, right-click the <strong>QuickEdit.Bakery</strong>
  112. folder and select '<strong>Open as a Web Site with Microsoft WebMatrix</strong>'.
  113. This will open the Bakery sample web site with WebMatrix.</li>
  114. <li>Click the <strong>Run</strong> button and play with the sample!</li>
  115. </ol>
  116. <h3>
  117. More Info</h3>
  118. <p>
  119. You can get more information on the helper on the <a href="">
  120. QuickEdit Helper CodePlex site</a>.
  121. <p>
  122. Learn more on WebMatrix, ASP.NET Web Pages and the Razor Syntax with <a href="">
  123. the WebMatrix tutorials.</a></p>
  124. </div>
  125. <ul class="footer">
  126. <li>We're always looking for <a href="">bugs, feedback and
  127. suggestions!</a></li>
  128. <li>&copy; 2010-2011 Microsoft Corporation. Powered by IIS Express.</li>
  129. </ul>
  130. </div>
  131. </body>
  132. </html>