Dynamic Content on a Website

Sometimes, you have to show a lot of content to the user, but don’t want to create multiple pages for each of the object. For example, if you were a shopkeeper or a baker or cook. You might not want to create a separate page for cake.html, cookie.html, chicken-soup.html. That is pretty sick, right?

That’s where you use the Query Strings or the Url Data. You just append a data to your URL, and on the server-side, you use that data from the URL, and change the content on the web page. That would be just like, changing the switch from ON to OFF.

Let’s continue our example. If you were the developer of your website for your bakery. You might have to write the code in each of the pages. And at the same time, you might to make a new page if your bakery gets a new item. Then your file system would have been like:

1. Default.html (or index.html)
2. About.html
3. Contact.html
4. Order.html
5. Cake.html
6. Cookie.html
7. Apple-pie.html
8. Juice.html
9. …etc.

But, you can reduce this to just one page. Yes! Let's change the File System to this:

1. Default.html (or index.html)
2. About.html
3. Contact.html
4. Order.html
5. Item.html
6. …etc.

If you’re using ASP.NET Web Pages, that we’re using since the beginning. Then you can try this code out, you will find it really simple, handy and amazing.

The example URL would be like: http://www.example.com/item/item-id-or-item-name

@{ 
   var item = UrlData[0]; /* get the urldata */
   var content = "";
   if(item == "somevalue") {
     content = "Cakes are good!";
   } else if (item == "someothervalue") {
     content = "Cookies are fresh!";
   }
}

<div>@content</div>

Now, I will explain the code, the code takes the URL data of the page, you must keep a note that the content placed in front of the page name can be accessed. In the example, we had:

http://www.example.com/page-name/url-data-content-here-infront-of-page

Then, I used the ASP.NET to get the first part, note the [0] first parameter after the page name. And then, I used an if else block to show the dynamic content depending on the item-name.

Let's do this code with our own example:

http://www.example.com/item/cake/purchase

@{
   var item = UrlData[0];
   var action = UrlData[1]; /* notice the parameter */
   var response = "";
   var content = "";
   if(item == "cake") {
     content = "Cakes are good for birthday party!";
   }
}

<div>
   <p>@content</p>
   @if(action == "purchase") {
     <a href="buy-item/@item">CHECK OUT</a>
   } else {
     <a href="item/@item/purchaase">PURCHASE THIS</a>
   }
</div>

This is a sample, you can see that the code would execute and would check for the URL, and inside the URL it would change the content of the Website. You can have as many URL parameters as you want and they are better to read too. You can add actions, such as feedback, purchase, contact email sent, etc.