如何将 Polymer 库与强类型视图一起使用？答案

【问题标题】：How can i use Polymer library with Strongly-Typed View?如何将 Polymer 库与强类型视图一起使用？
【发布时间】：2016-07-30 11:45:01
【问题描述】：

可以在 ASP.NET MVC 项目中使用具有强类型视图的 Polymer 库吗？

或者...我可以使用自定义元素和 Razor，但聚合物库太大。

还有其他方法吗？

【问题讨论】：

标签： c# asp.net-mvc polymer strong-typing strongly-typed-view

【解决方案1】：

您可以在不使用 Razor 创建的元素的情况下使用 Polymer 库。我用简单的元素进行测试，但我认为它对你有用：

我有一个类产品

public class Product
    {
        public string Name { get; set; }
        public float Price { get; set; }
        public float Qtd { get; set; }
    }

我的控制器有 2 个动作：

> public class HomeController : Controller 
>{
>         //
>         // GET: /Home/
>         public ActionResult Index()
>         {
>             return View();
>         }
> 
>         public ActionResult Products(string name, float price, int qtd)
>         {
>             Product product = new Product();
> 
>             product.Name = name;
>             product.Price = price;
>             product.Qtd = qtd;
> 
>             return View();
>         }
> }

当你放置你的元素时，最后是 .cshtml

 <!DOCTYPE html>
> 
> <html> 
> <head>
>     <meta name="viewport" content="width=device-width" />
>     <title>Produtos</title> </head> <body>
>     <div>
>         <form action="/Home/Products">
>             <label>Name</label>
>             <input type="text" name="name" />
> 
>             <label>Price</label>
>             <input type="number" name="price" />
> 
>             <label>Qtd</label>
>             <input type="number" name="qtd" />
> 
>             <input type="submit" value="Insert" />
>         </form>
>     </div> 
></body> 
></html>

我有一个表单，它的操作指向 /Home/Products。当您提交时，表单将调用您的 Products 操作，通过您给它们的相应名称传递您的字段。 .cshtm 中的“名称”、“价格”、“qtd”。操作 Products 必须具有 .cshtml 中元素的语义名称。这样你就可以得到任何 HTML、Polymer 或其他元素的信息。

奖励，您可以通过这种方式获得相同的结果：

        <input type="text" name="product.Name" />
        <input type="number" name="product.Price" />
        <input type="number" name="product.Qtd" />

还有行动

> public ActionResult Products(Product product)
>         {
>             return View();
>         }

【讨论】：