如何使用剃须刀让这个 javascript 更有活力？

Question

问题

我正在尝试调整此 javascript（不是我自己的）以使其更适合剃须刀。然而，我越来越清楚 Razor 是为嵌入 HTML 而不是 javascript 而设计的。

我希望能够使用 razor 将变量放入 javascript 以便我可以绘制自定义网格。一个可能是 5 x 3，另一个可能是 3 x 5。

免责声明：学习javascript并且我正在努力改进

代码

这是讨论我的问题的简短代码片段。它显然不完整，但给出了出了什么问题的想法：

我已经放置了我的全部源代码here。

     @model SampleLibrary.Models.Shelf

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Details</title>
    <link rel="stylesheet" href="~/css/grid.css" />
    <script type="text/javascript">
        $(function () {

        //This is dummy code for now. I need to figure out how to generate this based on label type in the future
        var columns = ['Column #1', 'Column #2', 'Column #3', 'Column #4'];
        var rows = ['Row #1', 'Row #2', 'Row #3'];




        // This is broken very badly - should be getting the following  values
        //model.columns = 4 and model.rows = 3
        var number_of_products = model.columns * model.rows;

错误信息

我不再收到之前显示的错误消息。相反，我会得到页面...但没有网格。我在 mozilla 上使用 firebug，它告诉我模型未定义。什么嘿？

尝试次数

我的第一次尝试真的很天真

起初我认为这可能是因为 javascript 在模型信息可用之前被调用，但尝试了这个 $(document).ready(function ()
我想也许我应该将模型调用为 Model.columns
我尝试添加 <text></text> 语法，但它甚至无法构建

总结

最后一部分让我明白我的方法可能是错误的。所以我在想如下：

重写函数以接受参数function(column, row, whateverElse)
- 参数将是 model.column、model.row 和 model.whateverElse
然后我可以将 javascript 移动到它自己的位置。将其命名为 grid.js。
但这是我的大脑完全爆炸的地方。在我看来，如何从剃须刀中获取我需要的值？

现在我知道如何将函数移动到它自己的文件中，方法是将它放在 grid.js 之类的文件中，使用类似 <script src="~/lib/grid.js"></script>

但是，当我在视图中调用它时，我到底怎么才能给它提供像 function(@model.column, @model.row, @model.whateverElse)

这样的特殊值呢？

这是正确的轨道吗？或者我会在这个想法上走向外部 space 吗？提供的任何帮助将不胜感激。

Answer 1

最简单的方法是停止在 javascript 中创建 table 并让 razor 为您完成，然后修改 javascript 以处理与 HTML 的交互剃刀渲染。如果您只关心调整网格大小，那么您可以根据需要通过模型或视图包传递列和行。

var columns = ['Column #1', 'Column #2', 'Column #3', 'Column #4'];

变为：

var columns = [@{
foreach(var colname in Model.Columns)
{
<text>'@colname'</text>
}
}];

另一种方法是使用数据属性，如下所示： <div id="products-wrapper" data-columns="@Model.columns" data-rows="@Model.rows"> 这使得将所有 javascript 完全移出页面非常容易。您只需在 javascript 文件之一中包含这样的内容（假设您也有 jQuery）：

$(document).ready(function(){
var cols=$('#products-wrapper').data('columns');
var rows=$('#products-wrapper').data('rows');
yourfunction(cols,rows);
});

您还可以将数据属性与 ajax 结合使用，让您的 javascript 库调用您用来填充网格的 returns json 网络服务出色地。 <div id='products-wrapper' data-url='@Action.Url("getdata")'> 然后编写您的 javascript 以获取 url，调用它，然后使用结果填充您的网格。这绝对是最具可扩展性的方法，因为您可以使用输出缓存来缓存页面（假设页面上没有其他任何更改）并让客户端也缓存它。

Answer 2

您可以通过删除

来修复它

@model Application.Models.Shelf

但最好通过识别传递给视图的内容并在那里修复它来解决问题。

它说你正在传递一个字符串，但它需要一个 Application.Models.Shelf 对象

如何使用剃须刀让这个 javascript 更有活力？

How to make this javascript more dynamic using razor?

javascript

model-view-controller

razor

visual-studio-2015

asp.net-core