如何在 Jquery 和 Razor 页面中递增和使用值，在 ASP.net 核心 2.0 中

Question

我这里有这个脚本，但我需要能够使用 Jquerys ival，或者能够从 jquery 循环中增加模型页面 ival。想想一个典型的 c# for 循环。

不同的例子：

    $(document).ready(function() {
    $("button").click(function () {
        $(".divs").each(function (index, element) {

            var ival = 0;
            $(element).css({
                top: @Model.Positions.GetValue(ival, 0),
                left: @Model.Positions.GetValue(ival, 1)
            });

        });
    });
});

（无法识别 ival，因为它们在技术上属于不同的范围，一个在模型中，一个在 jquery 中）

并且：

    $(document).ready(function() {
    $("button").click(function () {
        $(".divs").each(function (index, element) {

            @{
                int ival = 0;
            }
            $(element).css({
                top: @Model.Positions.GetValue(ival, 0),
                left: @Model.Positions.GetValue(ival, 1)
            });
            @{
                ival++;
            }
        });
    });
});

（原以为行得通，但行不通^）

Answer 1

我将尝试使用两种不同的解决方案重现您的问题。我假设您有一个 class 将用于存储您的值：

public class Position
{
    public int top { get; set; }
    public int left { get; set; }
}

您的 PageModel 中将有一个属性，它将存储一个位置列表，您将向该列表加载一个值列表

public class TestModel : PageModel
{
    public List<Position> Positions { get; set; }

    public void OnGet()
    {
        Positions = new List<Position>
        {
            new Position {left = 10, top = 20},
            new Position {left = 20, top = 30},
            new Position {left = 30, top = 40},
        };
    }
}

现在你有两个选择。第一个选项是使用 C# 代码生成你的潜水，第二个选项是生成一个 json 对象，它将与 javascript.

一起使用

第一个解决方案

@foreach (var item in Model.Positions)
{
    <div style="left: @(item.top)px; top: @(item.top)px">
        contents of your div
    </div>
}

第二种解法

<script type="text/javascript">
    var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Positions));
</script>

这将在您的剃刀页面中生成以下代码：

<script type="text/javascript">
    var data = [{"top":20,"left":10},{"top":30,"left":20},{"top":40,"left":30}];
</script>

现在您可以使用数据对象来设置顶部和左侧 javascript。

希望对您有所帮助。

如何在 Jquery 和 Razor 页面中递增和使用值，在 ASP.net 核心 2.0 中

How to increment and use a value in Jquery and Razor pages, in ASP.net core 2.0

asp.net

jquery

asp.net-core-2.0

razor-pages