结合自己业余项目《饭团》，使用bootstrap

起源

    最近比较闲，业余时间给员工们做了一个企业内部的订餐系统，算是打发一下无聊的时间：

开发环境：win8.1,vs2012,mongodb,bootstrap,windows azure

可以向公司申请一个测试账号，全部就都有了。

首先上图：

MVC4中代码结构：

关于bootstrap那部分：

更多细节可参照：http://v3.bootcss.com/getting-started/

首先在content文件夹引入：

bootstrap.js,bootstrap-template.css，bootstrap.css

在view的share文件夹中，新建部分视图，我这里建了3个，header,footer,notice,主要是一些公用或逻辑较独立的部分：

header:

 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><strong style=" color:#00F5FF;"><em>饭团</em></strong></a>
        </div>
          
        <!--/.nav-collapse -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
          </ul>

            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
          <div class="navbar-form navbar-right">
            <button type="button" class="btn btn-primary" data-toggle="modal" id="btn_publish">订餐</button>
            
            @if (!string.IsNullOrWhiteSpace(ViewBag.userName))
            { 
                <a href="#" class="btn btn-default btn-lg disabled" role="button">@ViewBag.userName</a>
            }else
            {
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#mySignInModal">Sign in</button>
            }
          </div>

        </div><!--/.navbar-collapse -->
      </div>
    </div>

footer:

<hr/>
<!-- FOOTER -->
<footer>
   <p class="pull-right"><a href="#">Back to top</a></p>
   <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>

notice:主要是发布一些公告

<!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>开饭喽!</h1>
        <p>什么是善良:<br/>
            如果看到了一面墙要倒,我们没有能力扶,可是我们不推,就是一种善良。<br/>
            如果我们在吃肉，但没有能力请别人吃，在我们吃肉的时候，不吧嗒嘴，那也是一种善良。</p>
        <p>
          <button class="btn btn-lg btn-primary" role="button" id="btn_dish">发布新菜单 &raquo;</button>
        </p>

      </div>
    </div>

    <!-- Modal 菜单-->
    <div class="modal fade" id="myDishModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">新菜单</h4>
      </div>
      <form class="modal-body" enctype="multipart/form-data" method="post" action="/File/UpLoadImg/">
          <div class="form-group">
          <input type="text" class="form-control" id="txtDishTitle" placeholder="Title" name="txtDishTitle"/>
          </div>
          <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="InputFile" name="InputFile">
          <p class="help-block">Example block-level help text here.</p>
          </div>
          <div class="form-group">
              <div class="modal-footer">
                 <button type="submit" class="btn btn-primary" id="btn_DishPublic">发布</button>
              </div>
          </div>
      </form>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn_dish').click(function () {
            
            $('#myDishModal').modal();

        });
    });
</script>

然后新建了一个signin.js，作为全局公用的一个js文件，由于目前业务较少，js不太多，以后建议拆分

$(function () {
    check();
    publish();
    funPub();
});

//check user sign in
var check = function ()
{
    $('#btn_signIn').click(function () {
        var userName = $('#signInUserName').val();
        if (userName != '') {
            $.post(
                "/Account/SignIn/",
                { userName: userName },
                function (mes) {
                    if (mes == "1") {
                        location.href = "/home/";
                    }
                    if (mes == "2") {
                        alert("error!"); return;
                    }
                }
                );
        } else {
            $('#signInUserName').css('color','red');
            return;
        }

    });
}

//check user sign in before publish dish
var publish = function () {
    $('#btn_publish').click(function () {
        $.post(
            "/Account/CheckSignIn/",
            function (mes)
            {
                if (mes == "1") {
                    $('#myModal').modal();
                }
                else {
                    $('#mySignInModal').modal();
                }
            }
            );
    });
}

//publish function
var funPub = function ()
{
    $('#btnPublishDish').click(function () {
        var dish = $('#txtDish').val();
        var remark = $('#txtPublish').val();

        $.post(
            "/Publish/AddDish/",
            { dish: dish ,remark:remark},
            function (msg)
            {
                if (msg == "1") {
                    location.href = "/Home/";
                } else {
                    alert("error!"); return;
                }
            }
            );
    });
}

Index.html,作为目前唯一的页面，是程序入口，以后会加入企业员工内部生活信息分享，电影，购物，天气，交通，员工拓展，以及会议室的预订等，目前这个页面只有订餐：

@model FanTuan.Models.IndexVM

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>饭团</title>
    <link href="../../Content/bootstrap.css" rel="stylesheet"/>
    <link href="../../Content/bootstrap-template.css" rel="stylesheet" />
    <link rel="shortcut icon" href="~/Content/img/Capture.ioc" />
    <link href="~/Content/index.css" rel="stylesheet" />
</head>
<body>
    @Html.Partial("Index_header")
    <!--header-->
    @Html.Partial("Notice")
    <!--Notice-->

      <div class="container" style=" width:800px; margin:auto;">
          <div style=" width:600px; margin:20px auto 20px auto; text-align:center;">
          <h3>今日菜单：@Model.Dish.Title</h3>
          <img style=" height:400px; width:600px; margin:auto;" src="~/Content/Dish/@Model.Dish.PicPath" />
          </div>

        <!---->
          <div class="taList" style=" width:800px;">
            <em class="spTitle">今日</em>
          @foreach (var item in Model.DishList)
          {
              <blockquote>
              <p>@item.Dish</p>
              <small>@item.UserName</small>
              </blockquote>
              <!---->
          }
         </div>

    </div>

    @if(Model.LastUserName.Count>0)
    {
    <div class="container">
        <div class="taList">
            <em class="spTitle">上次</em>
        <table class="table table-hover" style=" width:800px; margin:10px auto;">
        <tr><th>菜谱：</th><td>
            @foreach (var item in Model.LastDish)
            {
               <span style=" padding:3px;"> @item </span>
            }
        </td></tr>
        <tr><th>成员：</th><td>
            @foreach (var item in Model.LastUserName)
            {
               <span style=" padding:3px;"> @item </span>
            }
        </td></tr>
        <tr><th>备注：</th><td>
            @foreach (var item in Model.LastRemark)
            {
                <span style=" padding:3px;"> @item </span>
            }
        </td></tr>
        <tr><th></th><td></td></tr>
        </table>
        </div>
    </div>
    }

    <!-- Modal 订餐-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">今日</h4>
      </div>
      <form class="modal-body">
          <div class="form-group">
          <input type="text" class="form-control" placeholder="菜谱" id="txtDish"/>
          </div>
          <div class="form-group">
          <h5>@@@Model.UserSingInName</h5>
          </div>
          <div class="form-group">
          <textarea class="form-control" rows="3" id="txtPublish" placeholder="备注..."></textarea>
          </div>
      </form>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="btnPublishDish">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!-- Modal 登陆-->
    <div class="modal fade" id="mySignInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="mySignInModalLabel">Sign in</h4>
      </div>
      <form class="modal-body">
          <div class="form-group">
          <input type="text" class="form-control" id="signInUserName" placeholder="UserName">
          </div>
      </form>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="btn_signIn">Sign in</button>
      </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    @Html.Partial("Index_footer")
    <!--footer-->
</body>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="../../Content/bootstrap.js"></script>
    <script src="~/Content/SignIn.js"></script>
</html>

 

 还有后一篇。。〉〉