Asp.net mvc 教案-8 随机产生少儿数学加分练习题目核心代码

前后端一体训练

模型代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BabyMath.Models
{
    public class MathExeBox
    {
        public int Num1 { set; get; }
        public int Num2 { set; get; }
        public int He { 
            get {
                return Num1 + Num2;            
            }
        }
    }
}

控制器代码:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using BabyMath.Models;
namespace BabyMath.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult MathExe()
        {
            List<MathExeBox> list = new List<MathExeBox>();
            Random r = new Random();
            for (int i = 0; i < 50; i++)
            {               
                MathExeBox box = new MathExeBox();
             
                box.Num1 = r.Next(101);
                box.Num2 = r.Next(101);
                list.Add(box);           
            }
            return View(list);
        }       
    }
}

视图代码:

@using BabyMath.Models
@model List<MathExeBox>
@{
    int Index = 1;
}
<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Num1</th>
            <th>Num2</th>
            <th>He</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var e in Model)
        {
        <tr>
            <td>@Index</td>
            <td>@e.Num1</td>
            <td>@e.Num2</td>
            <td class="show">显示答案 >><span class="he invisible">@e.He</span></td>
        </tr>
            Index++;
        }
    </tbody>
</table>
@section Scripts{
    <script>
        $(function () {
            $(".show").each(function (index, e) {
                console.log(index, $(e).text());
                $(e).on("click", function () { 
                    $(e).children().filter('.he').toggleClass("invisible")
                })              
            });
        }
        )
    </script>
}

视图改版升级:

@using BabyMath.Models
@model List<MathExeBox>
@{
    int Index = 1;
}
<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Num1</th>
            <th>Num2</th>
            <th>He</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var e in Model)
        {
        <tr>
            <td>@Index</td>
            <td>@e.Num1</td>
            <td>@e.Num2</td>
            <td class="show"><span class="showtext">显示答案>></span> <span class="he invisible">@e.He</span></td>
        </tr>
            Index++;
        }
    </tbody>
</table>

@section Scripts{
    <script>
        $(function () {
            var show = false;
            $(".show").each(function (index, e) {
                console.log(index, $(e).text());
                $(e).click(function () {
                    if (show == false) {
                        $(e).children().filter(".showtext").text("隐藏答案<<");
                        $(e).children(".he").removeClass("invisible");
                        show = true;
                    }
                    else {
                        $(e).children().filter(".showtext").text("显示答案>>");
                        $(e).children(".he").addClass("invisible");
                        show = false;
                    }
                   
                })              
            });
        }
        )
    </script>
}