How to Use AMP in Asp.net MVC

Question

I want to use Accelerated Mobile Page in MVC project I am working in asp.net MVC project in that I have two file one for mobile and one for desktop . so can I use AMP for mobile?
anything problem arise if I can use combine? or I have to create new project for mobile?

Answer 1

This is the easiest way to use Amp in your Asp.net Mvc application.

Step #1 Controller

Create a controller name it AMP like

 public class AmpController : Controller
{

 public ActionResult Index()
    {
      //Return page which contain Amp
     return View();

    } 
}

Add this line before returning view to your existing Home or default controller which will redirect mobile traffic to Amp

  public class HomeController : Controller
  {
     public ActionResult Index()
     {
        if (Request.Browser.IsMobileDevice)
          {
           Response.Redirect("~/Amp/Index");          
          }
         //This is not Amp View
            return View();
      }
  }

Step #2 Index View

The view of Amp controller's index file must be Amp validated ,you can check whether the page html render is Amp or not by starting your asp.net mvc project and browse localhost:0000/Amp/Index here replace with your own localhost , then when page is shown right click view source copy it then past to Amp validator to check if it is valid.

Here is valid Amp html which you can past inside Index of Amp controller view go to Amp site

In this way you can create Amp pages in Asp.net mvc.

Addition

Do not forget to replace these Razor attribute when using Amp

1. Form action attribute replace with action-xhr see Here
2. Css can be use only inside Here see Here

3. Javascript can be written using amp-iframe first you need to write this line to use amp-iframe inside head

Then you can use javascript like this inside body

<amp-iframe width="0" height="0"
              sandbox="allow-scripts allow-same-origin"
              layout="responsive"
              frameborder="0"
              src="~/Scripts/yourscriptname.js">
  </amp-iframe>

4.White Spaces Matters when using Amp ,if you leave spaces or anything when writing Amp html you may face validation errors so you need to format your code using [Vs Format code] or css compressor7,idea behind this is your page consume more bytes when it has more white space.When you copy and paste Amp code from their site on notepad or any editor it will add some extra spaces in code so that that page will not be validate as amp.

5.Available on Git Here is my Amp project on Mvc,but you can modify it according to your business needs if you are working with SEO.

Answer 2

It might be a good idea to read the AMP Project website. However we have ASP.NET WebForms and we have dynamically created AMP versions of our content by stripping out the HTML and converting the content to support AMP tags. In other words we have two versions of the code, one AMP one non AMP.

In your particular case you'll have to write code which takes your existing code base and outputs an AMP version.

My advice - Google, read, and repeat.

Answer 3

I don't think you have to create a new project since the main difference between AMP and non-AMP versions is just your views and you probably should not have to touch on your controllers or models.

There is an interesting article that has a clean solution by registering a custom display mode that dynamically decides if the asp.net mvc have to serve the AMP or non-AMP version.