Category: asp.net Wp

ASP.NET WP – Charts ”; Previous Next In this chapter, we will cover the chart helper and how to display data on charts. In the last chapter, we have displayed data on the WebGrid helper. Chart helper can be used to display data in a graphical format. The Chart helper can render an image that displays data in a variety of chart types. It can also support different formatting and labeling options. It has the ability to render more than 30 types of charts in which you might have seen in Microsoft office, like area chart, bar chart column chart, etc. Charts show data and additional elements like legends, axes, series, etc. The data you display in a chart can be from an array, from the results returned from a database, or from the data that”s in an XML file. How to Display Data on Charts? Let’s have a look into a simple example in which we will display data on the charts. So first we need to create a new CSHTML file. Enter Charts.cshtml in the name field and click OK and then replace the following code in the Charts.cshtml file. @{ var myChart = new Chart(width: 600, height: 400) .AddTitle(“Student Marks (%)”) .AddSeries( name: “Student”, xValue: new[] { “Allan”, “Mark”, “Ali”, “Kerry”, “Steve” }, yValues: new[] { “79”, “53”, “73”, “81”, “43” }) .Write(); } As you can see in the above code that first it will create a new chart and the set its width and height. var myChart = new Chart(width: 600, height: 400) You can specify the chart title by using the AddTitle method as shown in the following code. .AddTitle(“Student Marks (%)”) The AddSeries method can be used to add data and then assign the values to xValue, and yValues parameters of the AddSeries method. The name parameter is displayed in the chart legend. .AddSeries( name: “Student”, xValue: new[] { “Allan”, “Mark”, “Ali”, “Kerry”, “Steve” }, yValues: new[] { “79”, “53”, “73”, “81”, “43” }) The xValue parameter contains an array of data that will be displayed along the horizontal axis of the chart, while the yValues parameter contains an array of data that will be used to plot the vertical points of the chart. The Write method actually renders the chart. In this case, because you didn”t specify a chart type, the Chart helper renders its default chart, which is a column chart. Now let’s run your application and specify the following url − http://localhost:36905/charts and you will see the following web page. Now let’s have look into another example in which we will use the database query to retrieve the data and then that data will be displayed on the chart. So, first we need to add another Student table to our database as shown in the following screenshot. Now let’s add some data to the Students table as shown in the following screenshot. As you can see, now we have Students data. Now to display this data on the chart, let’s create a new CSHTML file. Enter ChartDataUsingDB.cshtml in the Name field and click OK and then replace all the code in ChartDataUsingDB.cshtml file. @{ var db = Database.Open(“WebPagesCustomers”); var data = db.Query(“SELECT FirstName, Marks FROM Students”); var myChart = new Chart(width: 600, height: 400) .AddTitle(“Student Marks”) .DataBindTable(dataSource: data, xField: “FirstName”) .Write(); } As you can see in the above code that first it will open WebPagesCustomers database and then assigns it to a variable named db. var db = Database.Open(“WebPagesCustomers”); Next a simple SQL query is created which will retrieve the FirstName and Marks from the Students table. var data = db.Query(“SELECT FirstName, Marks FROM Students”); Then a new chart is created and passes the database query to it by calling the chart”s DataBindTable method. var myChart = new Chart(width: 600, height: 400) .AddTitle(“Student Marks”) .DataBindTable(dataSource: data, xField: “FirstName”) .Write(); This method takes two parameters The dataSource parameter is for the data from the query. The xField parameter lets you set which data column is used for the chart”s x-axis. Now let’s run this application and specify the following url − http://localhost:36905/ChartDataUsingDB and you will see the following web page. You can use the AddSeries method instead of DataBindTable and you can also specify the chart type parameter in the AddSeries method as shown in the following code. @{ var db = Database.Open(“WebPagesCustomers”); var data = db.Query(“SELECT FirstName, Marks FROM Students”); var myChart = new Chart(width: 600, height: 400) .AddTitle(“Student Marks”) .AddSeries(“Default”, chartType: “Pie”, xValue: data, xField: “FirstName”, yValues: data, yFields: “Marks”) .Write(); } Now let’s run the application again and specify the following url − http://localhost:36905/ChartDataUsingDB and you will see the following web page. You can also change the theme of the chart by simply specifying the theme parameter while creating a chart as explained in the following code. var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green) Now let’s run this application again and specify the following url − http://localhost:36905/ChartDataUsingDB and you will see the following web page. Print Page Previous Next Advertisements ”;

ASP.NET WP – Working with Videos ”; Previous Next In this chapter, we will be covering how to display a video on your web page. In ASP.NET you can easily play Flash (*.swf), Media Player (*.wmv), and Silverlight (*.xap) videos. Sometimes you might need to display a video on your website. You can display a video by linking to a site that already has the video, like YouTube, Dailymotion, etc. To embed a video from these sites into your own pages directly, you will need to get HTML markup from the site and then copy it into your page. How to Embed a Video? Let’s have a look into a simple example in which we will embed a video from the YouTube. To begin with, we need to create a new CSHTML file. Enter EmbededVideo.cshtml in the name field and click OK. <!DOCTYPE html> <html lang = “en”> <head> <meta charset = “utf-8” /> <title>Embedded Video Example</title> </head> <body> <h1>Embedded Video Example</h1> <p>The following video provides an introduction to WebMatrix:</p> <iframe width = “560” height = “315” src = “http://www.youtube.com/embed/fxCEcPxUbYA” frameborder =”0″ allowfullscreen> </iframe> </body> </html> Let’s run the application and specify the following url − http://localhost:36905/embededvideo then you will see the following output. You can simply play the video now. Choosing a Player If you want to play a video which is available on your own website. You can play videos from your site by using the Video helper, which renders a media player directly in a page. As you know that there are a lot of formats for video files, and each format typically requires a different player and a different way to configure the player. In ASP.NET Razor pages, you can play a video in a web page using the Video helper. The Video helper simplifies the process of embedding videos in a web page because it automatically generates the object and embeds HTML elements that are normally used to add video to the page. The Video helper supports the following media players − Adobe Flash Windows MediaPlayer Microsoft Silverlight Displaying a Video using Windows Media Player Let’s have a look into a simple example in which we will display a video on our web page using the Windows Media Player. To start with, we will create a new CSHTML file. Enter MediaPlayer.cshtml in the name field and click Ok. Now let’s create a new folder in your website and name it as Media, then add the video file which you want to play on your webpage as shown in the following screenshot. Now replace the following code in FlashPlayer.cshtml file. <!DOCTYPE html> <html> <head> <title>Flash Video</title> </head> <body> @Video.Flash(path: “Media/Intro_WebMatrix.swf”, width: “400”, height: “600”, play: true, loop: true, menu: false, bgColor: “red”, quality: “medium”, scale: “exactfit”, windowMode: “transparent”) </body> </html> When you run this application and specify the following url − http://localhost:36905/MediaPlayer then you will see the following error. This is because we have not installed the Web helper. To do this, let’s open the NuGet from the WebMatrix. Search for ASP.NET Web Helpers Library and then click Install. Once the installation is completed successfully then you can run your application again by specifying the same url and you will see that it will play the video using Windows Media Player. Similarly, you can also use Silverlight player and Flash player to display videos on your web page. Print Page Previous Next Advertisements ”;

ASP.NET WP – WebGrid ”; Previous Next In the previous chapters of databases, we have displayed database data by using a razor code, and doing the HTML markup ourselves. But in ASP.NET Web Pages while using a Razor, we also have an easier way to display data by using the WebGrid helper. This helper can render an HTML table for you that displays data. This helper supports options for formatting, for creating a way to page through the data. In the WebGrid helper you can sort the data just by clicking a column heading. Let’s have a look into a simple example in which we will display the same data, but this time we will be using the WebGrid helper. In this example, we will create a copy of ListCustomers.cshtml file and then use the WebGrid instead of manually creating the table using HTML markup like <tr> and <td> tags. Display and Sort Data with WebGrid We will need to create a CSHTML file to start with. Enter CustomersWebGrid.cshtml in the name field and Click OK to continue. Replace the following code in CustomersWebGrid.cshtml file. @{ var db = Database.Open(“WebPagesCustomers”); var selectQueryString = “SELECT * FROM Customers ORDER BY FirstName”; var data = db.Query(selectQueryString); var grid = new WebGrid(data); } <!DOCTYPE html> <html> <head> <title>Customers List</title> <style> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Customers List</h1> <div id = “grid”> @grid.GetHtml() </div> </body> </html> As you can see that the code first opens the WebPagesCustomers database file and then creates a simple SQL query. var selectQueryString = “SELECT * FROM Customers ORDER BY FirstName”; A variable named data is populated with the returned data from the SQL Select statement. var data = db.Query(selectQueryString); Then the WebGrid helper is used to create a new grid from data. var grid = new WebGrid(data); This code creates a new WebGrid object and assigns it to the grid variable. In the body of the page, you render the data using the WebGrid helper as shown in the following program. <div id = “grid”> @grid.GetHtml() </div> Now let’s run the application and specify the following url − http://localhost:36905/CustomersWebGrid and you will see the following web page. As you can see, by using the simplest possible code, the WebGrid helper does a lot of work when displaying and sorting the data. In the above output, you can see that the data is sorted by FirstName, now you can easily sort the data by ID or LastName, etc. just by clicking on the column header. So let’s click on the ID column header and you will see that data is now sorted by ID as shown in the following screenshot. The WebGrid helper can do quite a lot more as well like formatting the columns and styling the whole grid. Let’s have a look into the same example, but this time, we will format the columns. @{ var db = Database.Open(“WebPagesCustomers”); var selectQueryString = “SELECT * FROM Customers ORDER BY FirstName”; var data = db.Query(selectQueryString); var grid = new WebGrid(data); } <!DOCTYPE html> <html> <head> <title>Customers List</title> <style> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Customers List</h1> <div id = “grid”> @grid.GetHtml( columns: grid.Columns( grid.Column(“FirstName”, format:@<i>@item.FirstName</i>), grid.Column(“LastName”, format:@<i>@item.LastName</i>), grid.Column(“Address”, format:@<text>[email protected]</text>) ) ) </div> </body> </html> Now let’s run the application and specify the following url − http://localhost:36905/CustomersWebGrid and you will see the following web page. As you can see that the data in the FirstName and LastName columns are now displayed in the italic format. Let’s have a look into another simple example in which we will set the style of the whole grid by defining the CSS classes that specify how the rendered HTML table will look as shown in the following code. @{ var db = Database.Open(“WebPagesCustomers”); var selectQueryString = “SELECT * FROM Customers ORDER BY FirstName”; var data = db.Query(selectQueryString); var grid = new WebGrid(data); } <!DOCTYPE html> <html> <head> <title>Customers List</title> <style type = “text/css”> .grid { margin: 4px; border-collapse: collapse; width: 600px; } .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; } .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } .alt { background-color: #E8E8E8; color: #000; } .product { width: 200px; font-weight:bold;} </style> </head> <body> <h1>Customers List</h1> <div id = “grid”> @grid.GetHtml( tableStyle: “grid”, headerStyle: “head”, alternatingRowStyle: “alt”, columns: grid.Columns( grid.Column(“FirstName”, format:@<i>@item.FirstName</i>), grid.Column(“LastName”, format:@<i>@item.LastName</i>), grid.Column(“Address”, format:@<text>[email protected]</text>) ) ) </div> </body> </html> Now let’s run the application and specify the following url − http://localhost:36905/CustomersWebGrid and you will see the following web page. Print Page Previous Next Advertisements ”;

ASP.NET WP – Layouts ”; Previous Next In this chapter, we will be covering how to create a website with a consistent layout. On a daily basis you might have seen many websites with a consistent look and feel, like − Every page has the same header Every page has the same footer Every page has the same style and layout To make it more efficient and to create web pages for your site, you can create reusable blocks of content like headers and footers for your website, and you can create a consistent layout for all the pages. Create Reusable Blocks of Content The ASP.NET lets you create a separate file with a content block that can contain text, markup, and code, just like a regular web page. You can then insert the content block in other pages on the site where you want the information to appear. That way you don”t have to copy and paste the same content into every page. Creating common content like this also makes it easier to update your site. If you need to change the content, you can just update a single file, and the changes are then reflected everywhere the content has been inserted. Let’s have a look into a simple example in which we will create a page that references two content blocks − a header and a footer that are located in separate files. You can use these same content blocks in any page of your website. Create a new index.cshtml file in your root directory by right clicking on the project and selecting a new file. Select CSHTML file type and enter index.cshtml in the Name field and click OK and replace the code with following in index.cshtml file @{ } <!DOCTYPE html> <html lang = “en”> <head> <meta charset = “utf-8″ /> <title>My Website</title> </head> <body> <h1>This is Index Page Content</h1> <p>This is the content of the main page in our website.</p> </body> </html> Now let’s run the application and specify the following url http://localhost:46023/index then you will see the following output. Now, we need to add a header and a footer in the website, so in the root folder, create a folder by right clicking on the project and select a New Folder and then name it as ‘Shared’. It is a common practice to store files that are shared among Web pages in a folder named Shared. You can refer to the following screenshot as well. Right click on the Shared folder and select New File. Select the CSHTML file type and enter _Header.cshtm in the Name field and click OK. The leading underscore (_) character is significant. If a page name starts with an underscore, ASP.NET will not directly send that page to the browser. This convention lets you define pages that are required for your site, but at the same time the users shouldn”t be able to request them directly. Replace the code in _Header.cshtm as shown in the following program. <div class = “header”> This is header text from _Header.cshtml file </div> Similarly, add another file _footer.cshtml in the Shared folder and replace the code as shown in the following program. <div class = “footer”> © 2016 XYZ Pvt. Ltd. All rights reserved. </div> As you can see that we have added the header and the footer, now we need to show these from the Index.cshtml page by calling the RenderPage method as shown in the following program. @{ } <!DOCTYPE html> <html lang = “en”> <head> <meta charset = “utf-8” /> <title>My Website</title> </head> <body> @RenderPage(“/Shared/_Header.cshtml”) <h1>This is Index Page Content</h1> <p>This is the content of the main page in our website.</p> @RenderPage(“/Shared/_Footer.cshtml”) </body> </html> You can insert a content block into a web page by calling RenderPage method and pass it on to the name of the file whose contents you want to insert at that point. In the above code you can see that we have inserted the contents of the _Header.cshtml and _Footer.cshtml files into the Index.cshtml file. Now let’s run the application again and specify the following url − http://localhost:46023/indexthen you will see the following output. Similarly, you can add the header and footer on all the pages of your website just by calling RenderPage method and pass it the name of the file. Create a Consistent look using Layout Pages A more structured approach for creating a consistent look for a site is to use layout pages. A layout page defines the structure of a web page, but doesn”t contain any actual content. The layout page is just like any HTML page, except that it contains a call to the RenderBody method. The position of the RenderBody method in the layout page determines where the information from the content page will be included. When the layout page is created, you can create web pages that contain the content and then link them to the layout page easily. When these pages are displayed, they will be formatted according to the layout page. layout page acts as a kind of template for content that”s defined in other pages. Let’s add a layout page into the root of the website by right clicking and selecting a New File. Click OK to continue and replace the following code. @{ } <!DOCTYPE html> <html lang = “en”> <head> <title> Structured Content </title> <link href = “@Href(“/Styles/Site.css”)” rel = “stylesheet” type = “text/css” /> </head> <body> @RenderPage(“/Shared/_Header.cshtml”) <div id = “main”>@RenderBody()</div> @RenderPage(“/Shared/_Footer.cshtml”) </body> </html> You can use the RenderPage method in a layout page to insert content blocks like we have used for header and footer in the above code. A layout page can contain only one call to the RenderBody method. In the above code you can see that we have added reference to Site.css file, but we have not created this file, so we need to add a new folder in the root folder, and name it Styles. In the Styles folder, create a file named

Add Social Networking to the Website ”; Previous Next Now-a-days, you will see that many websites have integrated the social networking services to make their site more popular and fun. In this chapter, you will learn how you can integrate Social Networking to the Website. When people visit your site and they like something on your site, they will often want to share it with friends. To make things easy for users, you can simply display icons that people can click to share a page or post on any social networking sites like, Facebook, Twitter etc. To display these glyphs or icons, you can add the LinkShare helper to a page. People who visit your page can click an individual glyph/icon if they have an account with that social-networking site, and then they can post a link to your page or post on that site. Let’s have a look into a simple example in which we will add the option for social networking site on our web page. To start with, we need to create a new CSHTML file. Enter LinkSharePage.cshtml in the Name field and click OK. Replace the following code in the LinkSharePage.cshtml file <!DOCTYPE html> <html> <head> <title>LinkShare Example</title> </head> <body> <h1>LinkShare Example</h1> Share: @LinkShare.GetHtml(“LinkShare Example”) </body> </html> Let’s run the application and specify the following url − http://localhost:36905/LinkSharePage and you will see the following output. Let’s click on the Twitter icon and you will see the following Twitter login page in a new tab. Game Card When people play Microsoft Xbox games online, each user has a unique ID. Statistics are kept for each player in the form of a gamer card, which shows their reputation, gamer score, and recently played games. If you are an Xbox gamer, you can show your gamer card on pages in your site by using the GamerCard helper. Let’s have a look into a simple example in which we will display a game card, first we need to create a new CSHTML file Enter GameCard.cshtml in the Name field and click OK and then replace the following code. <html> <head> <title>Xbox Gamer Card</title> </head> <body> <h1>Xbox Gamer Card</h1> @GamerCard.GetHtml(“major nelson”) </body> </html> Let’s run the application and you will see the following output. Print Page Previous Next Advertisements ”;

ASP.NET WP – Project Folder Structure ”; Previous Next In this chapter, we will cover the project folder structure that is convenient for any ASP.NET application. To make it easier to work with your application, ASP.NET reserves certain file and folder names that you can use for specific types of content. How to Create a new Project in WebMatrix? To understand the project folder structure, let’s create a new Project in WebMatrix. To start with, click on the New icon in the Quick Start dialog. Select the Personal Site from the template and enter DemoSite in the Site Name and click Next as shown in the following screenshot. The personal site packages will be installed as shown in the following screenshot. Once all the packages are installed and the project is created, you will see the following folder structure. As you can see in the folder structure under the DemoSite there are subfolders like App_Code, App_Data etc. Folders in WebMatrix The most important folders that are created by default are explained in detail. App_Code This folder contains the source code for shared classes and business objects that you want to compile as a part of your application. In a dynamically compiled Web site project, these classes are compiled on initial request to your application. All the classes/items are then recompiled when any changes are detected in this folder. App_Data The App_Data folder contains application data files including .mdf database files, XML files, and other data store files. This folder is used by ASP.NET to store an application”s local database, such as the database for maintaining membership and role information It also includes the package folder which contains different packages that are a part of your application like – Razor package or Web Pages package etc. Bin The Bin folder contains compiled assemblies such as .dlls for controls, components, or other code that you want to reference in your application like Razor, Web Pages dlls. Any classes represented by the code in the Bin folder are automatically referenced in your application. Content The Content folder contains different resources like images and style sheets files such as css, png and gif files These files also define the appearance of ASP.NET Web Pages and controls. Contents The Contents folder contains the main web pages such as ASPX or cshtml files. Similarly, you can see the images folder which contains images used in the website. The Layouts folder contains the layout files and the Scripts folder contains the JavaScript files. Print Page Previous Next Advertisements ”;

ASP.NET WP – Publish ”; Previous Next In all the previous chapters, we have done all the work on a local computer, including testing pages. To run our *.cshtml pages, we were using the IIS Express web server that”s built into the WebMatrix. But these pages were only accessible on the local computer. To make the website visible to others, we will need to publish it on the Internet. Publishing your website means that you will have an account with a hosting provider. A hosting provider is a company that owns publicly accessible web servers and that will rent you space for the site. Hosting plans run from a few dollars a month or even free for small sites to hundreds of dollars a month for high-volume commercial websites. Selecting a Hosting Provider When you want to publish the website, the first thing you will need is to find a hosting provider. You can look for one by searching the web or also right from within the WebMatrix. You can see the Publish button on the Home tab of the WebMatrix ribbon. Click on Publish and you will see the following dialog. Click on the Find Windows web hosting and it will open a page on the Microsoft site that lists hosting providers that support ASP.NET as shown in the following screenshot. Some sites offer a free trial period. A free trial is a good way to try publishing and hosting a website by using the WebMatrix. We will select Everleap, which has a 30-day free trial. Click on the TRY IT FREE. Create an account from any of the above shown site plans. Once the account is created, we will receive an email with all the necessary information. Then login to the Everleap website and go to the following page − https://cp.everleap.com/sites/manage.aspx We will get to see all the necessary information with the help of which you can publish your website. Now let’s go to the WebMatrix and click on Enter Settings on Publish your Site dialog and you will see the Publish Settings dialog and enter the following information from the above page. Click Validate Connection. If everything is ok, the dialog box reports Connected Successfully, which means it can communicate with the hosting provider”s server as shown in the following screenshot. Click Save to save your settings. WebMatrix offers to perform a test to make sure that it can communicate correctly with the hosting site as shown in the following screenshot. Click Continue to start the publish process. As you can see the list of files to publish includes the web pages that are created. Click Continue. WebMatrix copies your files to the hosting provider”s server. When it”s done, the results are reported in the status bar. Once the site is published successfully, click on the url mentioned in the status bar and you will see that the site is live now. Print Page Previous Next Advertisements ”;

ASP.NET WP – Environment Setup ”; Previous Next You can start ASP.NET Web Pages development using any one of the following tools − WebMatrix Visual Studio WebMatrix WebMatrix is a free, lightweight, easy to install and easy to use set of web development tools that provides the easiest way to build websites. It is a tool that integrates a web page editor, a database utility, a web server for testing pages, and features for publishing your website to the Internet. It includes IIS Express which is a development web server, ASP.NET and SQL Server Compact, which is an embedded database. The web pages that you create using WebMatrix can be dynamic. To program dynamic Web pages, you can use ASP.NET with the Razor syntax and with the C# or Visual Basic programming languages. If you already have programming tools that you like, you can try the WebMatrix tools or you can use your own tools to create websites that use ASP.NET such as Visual Studio. WebMatrix Installation You can install the WebMatrix from the following link − https://www.microsoft.com/web/webmatrix/ Download the WebMatrix and double click on the WebMatrixWeb.exe and it will start the Microsoft Web Platform Installer. The Web Platform Installer appears, and now it is ready to install WebMatrix. Click Install button to start the WebMatrix installation. Click I Accept to continue the installation. Once the installation is completed, you will see the following message. Visual Studio Installation Microsoft provides a free version of Visual Studio that also contains SQL Server and it can be downloaded from https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx Step 1 − Once downloading is completed, run the installer. It will display the following dialog. Step 2 − Click Install and it will start installation process. Step 3 − Once the installation process is completed successfully you will see the following dialog. Step 4 − Close this dialog and restart your computer if required. Step 5 − Now open Visual studio from the Start Menu, which will open a below dialog and it will take some time to open for the first time for preparation as shown in the following screenshot. Step 6 − Once all this is done, you will see the main window of Visual studio. You can now start ASP.NET Web Pages development. Print Page Previous Next Advertisements ”;