将对象的动态列表从视图发布到控制器 [英] posting a dynamic list of objects from a view to a controller

查看:70
本文介绍了将对象的动态列表从视图发布到控制器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

 var maxPits = 10;var minPits = 2;var wrapper = $(".pits");var addButton = $(".addPit");var delButton = $(".delPit");无功x = 2;$(addButton).click(function (e) {e.preventDefault();如果 (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="坑' + x + 'day3"></div></div>');更新坑计数();} 别的 {alert('坑太多了!');}});$(delButton).click(function (e) {e.preventDefault();如果 (x > minPits) {var lastPit = '.pit' + x;$("div").remove(lastPit);X - ;更新坑计数();} 别的 {alert('必须至少有两个!');}});

我的模型如下所示:

 公共类 ResultsModel{公共列表<坑>坑{得到;放;}}公开课坑{公共 int Id { 获取;放;}公共双Day1{得到;放;}公众双日2{得到;放;}公众双日3{得到;放;}公共双均值{得到{无功x = 0;无功总计 = 0.0;如果 (Day1 > 0.0) { x += 1;总计 += 第 1 天;}如果 (Day2 > 0.0) { x += 1;总计 += 第 2 天;}如果 (Day3 > 0.0) { x += 1;总计 += 第 3 天;}if(x>0) return (total)/x;返回 0.0;}}}

我的部分视图如下所示:

 

<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 class="col-sm-3">测试 1

<div class="col-sm-3">测试 2

<div class="col-sm-3">测试 3

<div class="row"><div class="col-sm-1">一号坑

<div class="col-sm-3"><input type="number" placeholder="1.234" name="pit1day1"/>

<div class="col-sm-3"><input type="number" placeholder="1.234" name="pit1day2"/>

<div class="col-sm-3"><input type="number" placeholder="1.234" name="pit1day3"/>

<div class="row"><div class="col-sm-1">2号坑

<div class="col-sm-3"><input type="number" placeholder="1.234" name="pit2day1">

<div class="col-sm-3"><input type="number" placeholder="1.234" name="pit2day2">

<div class="col-sm-3"><input type="number" placeholder="1.234" name="pit2day3">

html 是一种发布到控制器的形式,我希望测试的结果在控制器中可用,以便我可以对它们进行一些计算.我正在努力将数据从页面获取到模型中

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

 foreach (var pit in model.Pits){var x1 = pit.Day1;var x2 = pit.Day2;var x3 = pit.Day3;var m = pit.Mean;//做一点事...}

如何通过模型从视图中获取动态数据到控制器中?

任何帮助将不胜感激.

解决方案

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

示例:

如果你通过了

公共类ResultsModel{公共列表<坑>坑{得到;放;}}

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

所以你的 html 喜欢

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

就这样.

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

如果你通过了

List

进入视图并接收相同然后你的名字属性格式必须像[0].Day1.

I am writing a page that allows users to enter results from test pits over a period of three days. there is a min of two test pits and a max of ten test pits.

I initially put two pits in the View and provide add and remove buttons to allow users to add more pits. It looks like this: I use this javascript to add more pits:

        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!');
        }
    });

My model looks like this:

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

My partial view looks like this:

    <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>

The html is in a form that posts to a controller and I want the results from the tests to be available in the controller so that I can do some calculations on them. I am struggling to get the data from the page into the model

I want to something like this in the controller:

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

How do I get the dynamic data from the view into the controller via the model?

Any help would be appreciated.

解决方案

Razor used a spatial format of name attribute when you pass the value form view to action.

Example :

If you passing

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

model into the view and receive the same then your name attribute format must like Pits[0].Day1.

so your html like

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

so one.

And one more thing use for loop rather than foreach if you use razor for generating the list of items.

If you passing

List<Pit>

into the view and receive the same then your name attribute format must like [0].Day1.

这篇关于将对象的动态列表从视图发布到控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆