Sport Team Jquery Mobile_sportjq-CSDN博客

1.Apply Jquery Mobile on layout page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
	
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <link href="../../Content/jquery.mobile.theme-1.1.0.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/jquery.mobile.structure-1.1.0.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });
    </script>
</head>

in Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel.DataAnnotations;
namespace SportTeam.Models
{
    public class Player
    {
        public int PlayerId { get; set; }
        [Required]
        [Display(Name = "Playdsdaers Name")]
        public string Name { get; set; }
        [Required]
        public int Number { get; set; }
        public int TeamId { get; set; }
        public virtual Team Team { get; set; }
    }
}

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel.DataAnnotations;
namespace SportTeam.Models
{
    public class Team
    {
        public int TeamId { get; set; }
        [Required]
        public string Name  { get; set; }
        [Required]
        public string Description { get; set; }

        public virtual ICollection<Player> Players { get; set; }
     }
}

Icollect enable to player can add, count, subtrat

List the players,

     <td>
			
           @(item.Players == null ? "None" : item.Players.Count.ToString())
        @foreach (var play in item.Players)
        {
                <ul data-role="listview" data-theme="g">
                <li>
                @play.Name
                </li>
                </ul>      
        }
        
        </td>