public ActionResult Index(int? page)

{

    var models = _context.Products.Project().To<ProductViewModel>().OrderBy(p => p.ProductName);

    int pageSize = 5;

    int pageNumber = (page ?? 1);

    return View(models.ToPagedList(pageNumber, pageSize));

}

<div class="container">

    <div class="page-header">

        <h1>Products <small>Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount</small></h1>

    </div>

 

    <ol class="breadcrumb">

        <li>@Html.ActionLink("Home", "Index", "Home")</li>

        <li>@Html.ActionLink("Manage", "Index", "Manage")</li>

        <li class="active">Products</li>

    </ol>

    <table class="table table-striped table table-hover">

        <thead>

        <tr>

            <th>

            Product Name

            </th>

            <th>

            Unit Price

            </th>

            <th>

            Units In Stock

            </th>

            <th>

            Discontinued

            </th>

            <th></th>

        </tr>

        </thead>

    <tbody>

    @foreach (var item in Model)

    {

    <tr class="@item.Status">

        <td>

            @Html.ActionLink(item.ProductName, "Edit", new { id = item.ProductID })

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.UnitPrice)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.UnitsInStock)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Discontinued)

        </td>

        <td>

            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })

        </td>

    </tr>

    }

    </tbody>

    </table>

    @Html.PagedListPager(Model, page => Url.Action("Index", new { page }), PagedListRenderOptions.ClassicPlusFirstAndLast)

    <p>

        <a href="@Url.Action("Create","Products")" class="btn btn-sm btn-primary" role="button">Create New</a>

    </p>

</div>

<div class="form-group">

    <div class="col-sm-2 input-group">

        <span class="input-group-addon">

            <span class="glyphicon glyphicon-phone-alt"></span>

        </span>

        @Html.TextBox("txtPhone","1194679215",new { @class = "form-control" })

    </div>

</div>

<div class="form-group">

    <div class="col-sm-2 input-group">

        <span class="input-group-addon">￥</span>

            @Html.TextBox("txtMoney","100",new { @class = "form-control" })

        <span class="input-group-addon">.00</span>

    </div>

</div>

<div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

        <div class="btn-group">

            <button type="submit" class="btn btn-primary btn-sm">Save</button>

            <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">

                <span class="caret"></span>

                <span class="sr-only">Toggle Dropdown</span>

            </button>

            <ul class="dropdown-menu" role="menu">

                <li><a href="#" >Save & New</a></li>

                <li class="divider"></li>

                <li><a href="#" >Duplicate</a></li>

            </ul>

        </div>

    </div>

</div>

<div class="container">

    <div class="page-header">

        <h1>Alerts </h1>

    </div>


    <ol class="breadcrumb">

        <li>@Html.ActionLink("Home", "Index", "Home")</li>

        <li>Bootstrap</li>

        <li class="active">Alerts</li>

    </ol>


    <div class="alert alert-success"><strong>Success. </strong></div>

    <div class="alert alert-info"><strong>Info.</strong></div>

    <div class="alert alert-warning"><strong>Warning!</strong></div>

    <div class="alert alert-danger"><strong>Danger!</strong></div>


</div>

<div class="alert alert-warning alert-Dismissible" role="alert">

    <button type="button" class="close" data-dismiss="alert">

        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

    </button>

    <strong>Alert!</strong>这是可关闭的Alter

</div>

<div class="row">

<    h4>基本进度条</h4>

    <div class="progress">

        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">

            <span class="sr-only">80%完成</span>

        </div>

    </div>

</div>

public class ProgressbarHub : Hub

{

    public void SendProgress()

    {

        for (int i = 0; i <= 100; i++)

        {

            Thread.Sleep(50);

            Clients.Caller.sendMessage(i + "%");

        }

    }

}

@section scripts

{

<script type="text/javascript" language="javascript">

 

    $(document).ready(function () {

    //$(".progress-bar").width('0%');

    });

 

    $("#start").click(function () {

        $(".progress-bar").width('0%');

        var progressNotifier = $.connection.progressbarHub;

        progressNotifier.client.sendMessage = function (message) {

            updateProgress(message);

        };


        $.connection.hub.start().done(function () {

            progressNotifier.server.sendProgress();

        });

    });

     

    function updateProgress(message) {

        $(".progress-bar").width(message);

        $("#progressbarTitle").html(message + ' Complete');

    }

</script>

}