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 seperate 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 page. 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! Lets 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 infront 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 used an if else block to show the dynamic content depending on the item-name.

Lets do this code with out own example:

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

@{
   var item = UrlData[0];
   var action = UrlData[1]; /* notice the paramter */
   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 much you want and they are better to read too. You can add actions, such as feedback, purchase, contact email sent etc.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s