将对象的动态列表从视图发布到控制器

Question

我正在编写一个页面，允许用户在三天内输入测试坑的结果。 最少两个测试坑，最多十个测试坑。

我最初在View中放了两个坑，并提供了添加和删除按钮，让用户可以添加更多的坑。 它看起来像这样： 我用这个javascript添加更多的坑：

        var maxPits = 10;
    var minPits = 2;
    var wrapper = $(".pits");
    var addButton = $(".addPit");
    var delButton = $(".delPit");
    var x = 2;
    $(addButton).click(function (e) {
        e.preventDefault();
        if (x < maxPits) {
            x++;
            $(wrapper).append('<div class="row pit' + x + '"><div class="col-sm-1">Pit ' + x + '</div><div class="col-sm-3"><input type="number" placeholder="1.234" name="pit' + x + 'day1" id="pit' + x + 'day1"></div><div class="col-sm-3"><input type="number" placeholder="1.234" name="pit' + x + 'day2" id="pit' + x + 'day2"></div><div class="col-sm-3"><input type="number" placeholder="1.234" name="pit' + x + 'day3" id="pit' + x + 'day3"></div></div>');
            updatePitCount();
        } else {
            alert('too many pits!');
        }
    });

    $(delButton).click(function (e) {
        e.preventDefault();
        if (x > minPits) {
            var lastPit = '.pit' + x;
            $("div").remove(lastPit);
            x--;
            updatePitCount();
        } else {
            alert('must have a minimum of two!');
        }
    });

我的模型如下所示：

    public class ResultsModel
{
    public List<Pit> Pits { get; set; }
}

public class Pit
{
    public int Id { get; set; }
    public double Day1 { get; set; }
    public double Day2 { get; set; }
    public double Day3 { get; set; }
    public double Mean
    {
        get
        {
            var x = 0;
            var total = 0.0;

            if (Day1 > 0.0) { x += 1; total += Day1; }
            if (Day2 > 0.0) { x += 1; total += Day2; }
            if (Day3 > 0.0) { x += 1; total += Day3; }

            if(x>0) return (total) / x;
            return 0.0;
        }
    }
}

我的局部视图如下所示：

    <div class="container pits">
    <div class="row">
        <div class="col-sm-1 btn-group">
            <button class="btn btn-sm btn-success glyphicon glyphicon-plus addPit"></button>
            <button class="btn btn-sm btn-danger glyphicon glyphicon-minus delPit"></button>
        </div>
        <div class="col-sm-3">
            TEST 1
        </div>
        <div class="col-sm-3">
            TEST 2
        </div>
        <div class="col-sm-3">
            TEST 3
        </div>
    </div>
    <div class="row">
        <div class="col-sm-1">
            Pit 1
        </div>
        <div class="col-sm-3">
            <input type="number" placeholder="1.234" name="pit1day1" />
        </div>
        <div class="col-sm-3">
            <input type="number" placeholder="1.234" name="pit1day2" />
        </div>
        <div class="col-sm-3">
            <input type="number" placeholder="1.234" name="pit1day3" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-1">
            Pit 2
        </div>
        <div class="col-sm-3">
            <input type="number" placeholder="1.234" name="pit2day1">
        </div>
        <div class="col-sm-3">
            <input type="number" placeholder="1.234" name="pit2day2">
        </div>
        <div class="col-sm-3">
            <input type="number" placeholder="1.234" name="pit2day3">
        </div>
    </div>
</div>

html 是一种发布到控制器的表单，我希望测试的结果在控制器中可用，以便我可以对它们进行一些计算。我正在努力将页面中的数据导入模型

我想在控制器中做这样的事情：

            foreach (var pit in model.Pits)
        {
            var x1 = pit.Day1;
            var x2 = pit.Day2;
            var x3 = pit.Day3;
            var m = pit.Mean;
            //do something...
        }

如何通过模型将视图中的动态数据获取到控制器中？

任何帮助将不胜感激。

Answer 1

当您将值表单视图传递给操作时，Razor 使用了名称属性的空间格式。

例子：

如果你通过了

public class ResultsModel
{
    public List<Pit> Pits { get; set; }
}

模型进入视图并接收相同的名称属性格式必须像Pits[0].Day1。

所以你的html喜欢

<input type="number" placeholder="1.234" name="Pits[0].Day1" />
<input type="number" placeholder="1.234" name="Pits[1].Day1" />

一个。

如果您使用 razor 生成项目列表，还有一件事使用 for 循环而不是 foreach。

如果你通过了

List<Pit>

进入视图并接收相同的名称属性格式必须像[0].Day1。

Answer 2

您必须通过表单标签发布数据以执行操作！

<form method="post" action="/Pit/Create">
   <div class="row">
    <div class="col-sm-1">
        Pit 1
    </div>
    <div class="col-sm-3">
        <input type="number" placeholder="1.234" name="[0].Day1" />
    </div>
    <div class="col-sm-3">
        <input type="number" placeholder="1.234" name="[0].Day2" />
    </div>
    <div class="col-sm-3">
        <input type="number" placeholder="1.234" name="[0].Day3" />
    </div>
</div>
<div class="row">
    <div class="col-sm-1">
        Pit 2
    </div>
    <div class="col-sm-3">
        <input type="number" placeholder="1.234" name="[1].Day1">
    </div>
    <div class="col-sm-3">
        <input type="number" placeholder="1.234" name="[1].Day2">
    </div>
    <div class="col-sm-3">
        <input type="number" placeholder="1.234" name="[1].Day3">
    </div>
</div>
</form>