/docs/startHere.htm

# · HTML · 132 lines · 132 code · 0 blank · 0 comment · 0 complexity · 34ec7712368311b94621f163212b5870 MD5 · raw file 

    

  1. <!DOCTYPE html>

    2. 

  2. <html>

    3. 

  3. <head>

    4. 

  4.     <title>QuickEdit Helper for WebMatrix - Start Here</title>

    5. 

  5.     <link href="content/Site.css" rel="stylesheet" type="text/css" />

    6. 

  6.     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    7. 

  7. </head>

    8. 

  8. <body>

    9. 

  9.     <div class="container">

    10. 

  10.         <div class="header">

    11. 

  11.             <img src="content/images/webx-icon.png" alt="WebMatrix" />

    12. 

  12.             <h1>

    13. 

  13.                 WebMatrix Helpers</h1>

    14. 

  14.             <h2>

    15. 

  15.                 QuickEdit Helper - Start Here</h2>

    16. 

  16.         </div>

    17. 

  17.         <div class="content">

    18. 

  18.             <div class="navLinks">

    19. 

  19.                 <a href="reference.htm">Helper Reference</a></div>

    20. 

  20.             <h3>

    21. 

  21.                 Introduction</h3>

    22. 

  22.             <p>

    23. 

  23.                 Microsoft WebMatrix provides an easy way to get started with Web development, and

    24. 

  24.                 together with new Razor syntax for ASP.NET Web Pages it includes everything you

    25. 

  25.                 need to get your Web site up, running and integrated with many different sites and

    26. 

  26.                 networks. The WebMatrix helpers are designed to make your life easier when creating

    27. 

  27.                 Web sites. They provide you a simple and consistent way of performing common Web

    28. 

  28.                 development tasks that otherwise would require a great deal of custom coding. With

    29. 

  29.                 one single line of code you should be able to consume an OData feed, store information

    30. 

  30.                 in Windows Azure Storage, among other things.

    31. 

  31.             </p>

    32. 

  32.             <p>

    33. 

  33.                 The <strong>QuickEdit</strong> helper is designed to make your WebMatrix sites editable.

    34. 

  34.                 When the helper is in place, the users from your site that belong to a group (or

    35. 

  35.                 role) that you define, will see an <strong>Edit</strong> button that launches an

    36. 

  36.                 editor to update the content displayed there. On the other side, unregistered users

    37. 

  37.                 (or anonymous) will just see the edited content, not the button. You don&#39;t have

    38. 

  38.                 to worry about where to store the edited content, you just need to provide your

    39. 

  39.                 database name and QuickEdit helper will take care of storing the content there.</p>

    40. 

  40.             <p>

    41. 

  41.                 The helper includes the following files:</p>

    42. 

  42.             <ul>

    43. 

  43.                 <li>The <strong>QuickEdit.cshtml</strong> file located into the <strong>App_Code</strong>

    44. 

  44.                     folder inside you WebMatrix site</li>

    45. 

  45.                 <li>A <strong>SaveContent.cshtml</strong> file under the <strong>QuickEdit</strong>

    46. 

  46.                     folder that will handle the content data updates against the content database</li>

    47. 

  47.                 <li>A folder located in <strong>QuickEdit/jHtmlAreaFiles, </strong>with the jHtmlArea

    48. 

  48.                     files (<a href="http://jhtmlarea.codeplex.com/">http://jhtmlarea.codeplex.com/</a>)

    49. 

  49.                     needed to render the HTML content editor</li>

    50. 

  50.             </ul>

    51. 

  51.             <h3>

    52. 

  52.                 Getting Started in 60 Seconds</h3>

    53. 

  53.             <p>

    54. 

  54.                 The easiest way to get started with the QuickEdit helper is to use the <strong>Starter

    55. 

  55.                     Site</strong> WebMatrix template (Quick Start page | Site From Template | Starter

    56. 

  56.                 Site template), which includes Web site membership configured with the <strong>WebSecurity</strong> helper.            

    57. 

  57.                 Now, to start using the QuickEdit helper follow these steps:</p>

    58. 

  58.             <ol>

    59. 

  59.                 <li>Open the Files workspace and add the following highlighted line to the <strong>_AppStart.cshtml</strong>

    60. 

  60.                     page of your WebMatrix site (create this page if it doesn't exists).

    61. 

  61.                     <div class="code">

    62. 

  62.                         @{<br />

    63. 

  63.                         <span class="codeIndent1">WebSecurity.InitializeDatabaseConnection(&quot;StarterSite&quot;,

    64. 

  64.                             &quot;UserProfile&quot;, &quot;UserId&quot;, &quot;Email&quot;, true);</span><br />

    65. 

  65.                         <span class="codeIndent1">...</span><br />

    66. 

  66.                         <span class="codeIndent1 highlight">QuickEdit.Initialize(&quot;StarterSite&quot;);</span><br />

    67. 

  67.                         }

    68. 

  68.                     </div>

    69. 

  69.                     Where &quot;StarterSite&quot; is the name of your database. The QuickEdit helper

    70. 

  70.                     will store the edited content there. Here you can also define which group of users

    71. 

  71.                     (or roles) can edit the content (for example, @QuickEdit.Initialize(&quot;StarterSite&quot;,

    72. 

  72.                     "myAdminGroup") ). The group (or role) used by default will be &quot;admin&quot;.</li>

    73. 

  73.                     <li>Run the web site and create a new user, by using the <strong>Register</strong> link

    74. 

  74.                         on the top right corner of the page. </li>

    75. 

  75.                     <li>Following the steps in the section &quot;Creating Security for Groups of Users (Roles)&quot;

    76. 

  76.                         from <a href="http://www.asp.net/webmatrix/tutorials/16-adding-security-and-membership">

    77. 

  77.                             this WebMatrix tutorial</a>, create a new &quot;<strong>admin</strong>&quot;

    78. 

  78.                         user group (or role) and assign it to the recently created user.</li>

    79. 

  79.                         <img src="content/images/quickedit-roles.png"/>

    80. 

  80.                     <li>Add the highlighted lines from below in the page where you want to show editable

    81. 

  81.                         content. The &quot;homepage&quot; value should be changed if necessary, by a unique

    82. 

  82.                         name for each editable section. If you're using the Starter Site template, the GetHeaderHtml

    83. 

  83.                         can be placed in <em>_SiteLayout.cshtml</em> and the GetContentHtml in <em>Default.cshtml</em>.

    84. 

  84.                         <div class="code">

    85. 

  85.                             &lt;!DOCTYPE html&gt;<br />

    86. 

  86.                             &lt;html&gt;<br />

    87. 

  87.                             <span class="codeIndent1">&lt;head&gt;</span><br />

    88. 

  88.                             <span class="codeIndent2">...</span><br />

    89. 

  89.                             <span class="codeIndent2 highlight">@QuickEdit.GetHeaderHtml()</span><br />

    90. 

  90.                             <span class="codeIndent1">&lt;/head&gt;</span><br />

    91. 

  91.                             <span class="codeIndent1">&lt;body&gt;</span><br />

    92. 

  92.                             <span class="codeIndent2">...</span><br />

    93. 

  93.                             <span class="codeIndent2 highlight">@QuickEdit.GetContentHtml("homepage")</span><br />

    94. 

  94.                             <span class="codeIndent2">...</span><br />

    95. 

  95.                             <span class="codeIndent1">&lt;/body&gt;</span><br />

    96. 

  96.                             &lt;/html&gt;<br />

    97. 

  97.                         </div>

    98. 

  98.                     </li>

    99. 

  99.                     <li>That&#39;s it! The QuickEdit helper will start managing the editable content of

    100. 

  100.                         your web site automatically. Try logging in as the user you've created and see how

    101. 

  101.                         the <strong>Edit</strong> button is displayed, as this user belongs to the &quot;admin&quot; group (or role).</li>

    102. 

  102.             </ol>

    103. 

  103.             <h3>

    104. 

  104.                 Running the Bakery Sample Web site</h3>

    105. 

  105.             <p>

    106. 

  106.                 Optionally, you can download a sample WebMatrix web site where you can see the helper

    107. 

  107.                 in action. To download and run the sample, follow these steps.</p>

    108. 

  108.             <ol>

    109. 

  109.                 <li>Browse to the <a href="http://quickedithelper.codeplex.com">QuickEdit Helper CodePlex

    110. 

  110.                     site</a> and download the <strong>QuickEdit Helper Sample</strong>.</li>

    111. 

  111.                 <li>Extract the content of the package, right-click the <strong>QuickEdit.Bakery</strong>

    112. 

  112.                     folder and select '<strong>Open as a Web Site with Microsoft WebMatrix</strong>'.

    113. 

  113.                     This will open the Bakery sample web site with WebMatrix.</li>

    114. 

  114.                 <li>Click the <strong>Run</strong> button and play with the sample!</li>

    115. 

  115.             </ol>

    116. 

  116.             <h3>

    117. 

  117.                 More Info</h3>

    118. 

  118.             <p>

    119. 

  119.                 You can get more information on the helper on the <a href="http://quickedithelper.codeplex.com/">

    120. 

  120.                     QuickEdit Helper CodePlex site</a>.

    121. 

  121.                 <p>

    122. 

  122.                     Learn more on WebMatrix, ASP.NET Web Pages and the Razor Syntax with <a href="http://www.microsoft.com/web/webmatrix/learn/">

    123. 

  123.                         the WebMatrix tutorials.</a></p>

    124. 

  124.         </div>

    125. 

  125.         <ul class="footer">

    126. 

  126.             <li>We're always looking for <a href="mailto:webapp@microsoft.com">bugs, feedback and

    127. 

  127.                 suggestions!</a></li>

    128. 

  128.             <li>&copy; 2010-2011 Microsoft Corporation. Powered by IIS Express.</li>

    129. 

  129.         </ul>

    130. 

  130.     </div>

    131. 

  131. </body>

    132. 

  132. </html>
    133.