课程设计ASp.NET MVC5 Blog架构

来源：互联网发布：linux 删除多个文件夹编辑：程序博客网时间：2024/06/07 05:36

(ps:在线演示地址-前台： http://asp.zyang.top 后台: http://asp.zyang.top/admin 账号和密码都是： admin，服务器过期后请直接下载源码，注意用里面的sql脚本生成数据表，并配置web.config的链接字符串，我的链接字符串为云服务器上的sql server 2008 )

(源码下载链接：链接: https://pan.baidu.com/s/1gfhFA5H 密码: 7pwq)

演示效果：

开发流程：

设计数据表->根据数据表生成上下文和模型类->分别创建前后台的Layout页->创建业务所需的控制器->实现方法和添加视图

设计数据表
表结构：
admin表

article表

cate表

link表

3.设计前后台布局页：

4.创建实现所需业务的控制器

5.方法具体实现，有兴趣的同学可以下载我的代码看看

开发过程中所遇到的问题:

前台布局：

前台主页(home/index),既需要循环遍历所有的文章并且分页，而且又要遍历出所有的分类，最新文章，友情链接。但是一个视图页只能@model一次，也就是通过集体在这个index页中遍历只能传一个list，

还有一种方法是Tuple，通过这种方法可以实现引入多个模型，但是相对比较繁琐。这里，我使用部分视图：

这两部分分别放在一个PatialView里面，然后通过助手函数@Html.Action("方法名","控制器名调用");

 <div class="topbar">
        <div class="inner">
            <ul class="nav">
                <li id="menu-item-180" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-180">
                    @Html.ActionLink("首页", "Index", "Home")
                </li>
                    @Html.Action("showCates", "Home")    //展示所有分类，调用Home控制器下的showCates方法;
            </ul>
        </div>
    </div>

1

2

3

4

5

      public PartialViewResult showCates()   //Home控制器下的showCates方法
        {
            var result = (from c in dbContext.cate where c.catname != "未分类" select c).ToList<cate>();
            return PartialView(result);
        }

1

2

3

4

5

6

7

@model IEnumerable<MyBlog.Models.cate>   //showCates的(patial)视图
    @foreach (var c in Model)
    {
        <li id="menu-item-180" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-180">
            @Html.ActionLink(c.catname, "ArticlesOfCate", "Home", new { id =c.id }, new {})
        </li>
    }

2.表单提交技术：

jquery ajax 提交：

<script>
        $(document).ready(function () {      //登录表单提交
            $("#btn-submit").click(function () {
                if (!$('#user').val()) {
                    alert("请输入用户名！");
                    return;
                }
                if (!$('#pwd').val()) {
                    alert("请输入密码！");
                }
                else {
                    $.ajax({
                        type: "post",
                        url: "CkeckLogin",
                        data: $("#form-login").serialize(),
                        dataType: "json",
                        success: function (msg) {
                            if (msg.status == 1) {
                                layer.msg(msg.data);
                                window.setTimeout("window.location.href='Info'", 1000); 
                            } else {
                                layer.msg(msg.data);
                            }
                        }
                    });
                }
            });
        });
    </script>

        public JsonResult CkeckLogin(string username, string password)    //处理登录验证的方法  Admin/CkeckLogin
        {
            var result = from u in dbContext.admin
                         where u.username == username && u.password == password
                         select u;
            if (result.Count() > 0)
            {
                Session["username"] = username;
                return Json(new { status = 1, data = "登录成功！" });
            }
            else
            {
                return Json(new { status = 0, data = "登录失败！" });
            }
        }

jquery Get提交:

//删除代码 jquery的get请求
 function cate_del(id,obj) {
        layer.confirm('确认要删除吗？', function (index) {
            //此处请求后台程序，下方是成功后的前台处理……
            $.get("Cate/processDelete", { id: id })
            $(obj).parents("tr").remove();
            layer.msg('已删除!', { icon: 1, time: 1000 });
        });
    }

3.用到的前端相关技术:

bootstrap ,layer.js

阅读全文

0 0