Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Create a Web Interface in WebMatrix

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft] [] [] Hello and welcome to the 9-part "How do I" video series on Microsoft WebMatrix. You are currently watching part 6 of the series, "How do I: Create a Web Interface in WebMatrix to Allow the Users to Add the Data?" In this example, we will demonstrate how to create a web interface in WebMatrix that allows the users to add data to the website, and then load the data into the database to reflect the changes in the website. Before we start creating a web interface, let's have a look at the final result of part 5 of the series. The page shows the details of the movies that we entered in the database. Now let's start with creating a web interface for the movie site. To do this, create a new CSHTML page and name it AddMovie.cshtml. Then replace the content of this page with a heading. Now go back to the dataMovies.cshtml page and enter an anchor tag before the closing div tag. This anchor tag will provide the reference of the AddMovie.cshtml page. After this, run the dataMovies.cshtml page in the web browser to see the result. It shows a newly created hyperlink on the page. Then click this link, it will open the AddMovie.cshtml page in the web browser. Now close the window. Next let's start with creating a new form for the movie site. To do this, navigate back to the AddMovie.cshtml page. Here enter a form tag after the h1 tag. Then enter 3 input controls within the form tag. Each control is given a name, which will be the variable that the server uses to store the value entered by the user. Next enter one more input control with the type submit to define the submit button. When the user clicks this button the HTTP post action will be invoked, and the data that the user entered will be sent to the server. Now let's see how to handle the data from the form. To do this, add a code block at the top of the AddMovie.cshtml page to set up some server variables. Next let's add the code to assign the values of the form fields to the corresponding variables. Then add the SQL insert command to add the data to the database. After this, let's call the open method to open the movie database, and then call the execute method on the database to tell it to run the insert SQL statement. As a result, the values get added to the database. Next let's call the response.Redirect method. It will redirect the user back to the page to view the results of what they just added. After this run the AddMovie.cshtml page in the web browser to see the result. It shows a form on the page with 3 text boxes and one submit button. Now enter the movie name in the first box, then enter the category in the second box, and finally enter the release year in the third text box. Then click the add movie button. As a result, the server adds the data to the database and then redirects back to the movies list to see the results. The new movie has been added. This sample application shows how you can create an HTML form to handle the input from the user and add the values directly to the database. Also, it shows how to redirect the user back to the list page in order to see the data that has been added. Thanks for watching the video. Hope you enjoyed it, and see you next time. [Microsoft] [] []

Video Details

Duration: 3 minutes and 33 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Sep 26, 2013

Part 6 shows you how to build a page that allows your users to add data to your database, so your site can render it.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.