如何在Asp.net MVC中使用AMP [英] How to Use AMP in Asp.net MVC

问题描述

我想在MVC项目中使用加速的移动页面" 我正在asp.net MVC项目中工作，因为我有两个文件，一个用于移动设备，一个用于桌面.我可以在手机上使用AMP吗?
如果可以使用合并，会出现什么问题? 还是我必须为移动设备创建新项目?

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?

推荐答案

这是在Asp.net Mvc应用程序中使用Amp的最简单方法.

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

步骤1控制器

创建一个名为 AMP 的控制器，如

Create a controller name it AMP like

 public class AmpController : Controller
{

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

    } 
}

在将视图返回到您现有的Home或默认控制器之前添加此行，它将移动流量重定向到 Amp

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();
      }
  }

步骤2 索引视图

Amp控制器索引文件的视图必须经过 Amp 验证，您可以通过启动asp.net mvc项目并浏览 localhost:0000来检查html渲染页面是否为Amp./Amp/Index 在这里替换为您自己的localhost， 然后在显示页面时，右键单击查看源代码，然后将其复制到 Amp验证器，以检查其是否有效.

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.

这里是有效的Amp html，您可以将其放入Amp控制器视图的索引中 转到 Amp网站

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

通过这种方式，您可以在Asp.net mvc中创建Amp页面.

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

添加

不要忘记替换这些剃刀属性，当使用放大器

Do not forget to replace these Razor attribute when using Amp

1. 将表单 action 属性替换为 action-xhr 请参见此处
2. CSS只能在此处内部使用，请参见

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

然后，您可以在 body

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

4. 空格问题(使用Amp时)，如果在编写Amp html时留下空格或其他内容，则可能会遇到验证错误，因此您需要使用[Vs Format code]或 css压缩器

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. 在Git上可用 这里是我在Mvc上的Amp项目，但是如果您正在工作，则可以根据业务需求进行修改使用SEO.

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.

这篇关于如何在Asp.net MVC中使用AMP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！