码迷,mamicode.com
首页 > Web开发 > 详细

MVC 网页制作

时间:2015-07-11 16:43:37      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

 

 

技术分享

效果图:

技术分享

技术分享

技术分享

(1)首先将一个网页分成四个小部分,一个一个的来做

(一)首先点击view 右键添加视图,设置一个主显示页面。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
    
<head>
    <meta name="viewport" content="width=device-width" />
    <title>index</title>
    <style type="text/css">
        #q {
         
        }

    </style>
</head>
<body>
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
          <td id="q" width="100%"  align="center" bgcolor="#FFBBFF"><img src="~/图片/mm.jpg"  width="150" height="150"/>
              淄博汉企培训教育中心
          </td>
      </tr>
 </table>
 <table width="100%" border="0" cellpadding="0" cellspacing="0">
     <tr>
         <td align="center"  height="300">
              @Html.Partial("~/Views/zuobian.cshtml")
         </td>
         <td align="center" height="300"> @RenderBody()</td>
         </tr>
 </table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" width="100%" height="100" >淄博汉企人才定制中心<br/>2007~2015</td>
    </tr>
</table>
 
</body>
</html>

(二)中间一行分成两列,左边的显示:
<h2> 新闻类型</h2> <div> @Html.ActionLink("国内新闻","guonei","Home")<br/> @Html.ActionLink("国际新闻","guoji","Home")<br/> @Html.ActionLink("娱乐新闻","yule","Home")<br/> @Html.ActionLink("财经新闻","caijing","Home") </div>

技术分享
★创建视图的时候要点击创建为分部视图。
☆  controller的操作键
using
System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using 模版制作.Models; namespace 模版制作.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult ShowDetails(int id) { New data = new NewsBF().SelectByKey(id);//点击右面的新闻插入数据库内容函数 return View(data); } public ActionResult ShowNewsIndexPartial(string newType)//右边的显示页面数据库的函数 { ViewBag.Data = new NewsBF().Select(newType); return PartialView(); } public ActionResult guonei() //定义国内的函数 { return View(); } public ActionResult guoji()//定义国际的函数 { return View(); } public ActionResult yule()//定义娱乐的函数 { return View(); } public ActionResult caijing()//定义财经的函数 { return View(); } } }
{1} ShowDetails的添加视图

@using 模版制作.Models @model New @{ ViewBag.Title
= "ShowDetails"; Layout = "~/Views/zong.cshtml"; } @{ if(Model != null) { <h2>@Model.title</h2> <div>@Model.memo</div> } else { <div>未找到相关数据</div> } }
{2} ShowNewsIndexPartial的添加视图
@using 模版制作.Models; @{ List
<New> list =ViewBag.Data as List<New>; } <ul> @foreach(New data in list){ <li> @Html.ActionLink(data.title, "ShowDetails", "Home", new{id=data.ids }, null); </li> } </ul
{3}国内新闻的添加视图
@{ ViewBag.Title
= "guonei"; Layout = "~/Views/zong.cshtml"; } <h2>国内新闻</h2> @Html.Action("ShowNewsIndexPartial", new {Newtype="0"})
{4}国际新闻的添加视图
@{ ViewBag.Title
= "guoji"; Layout = "~/Views/zong.cshtml"; } <h2>国际新闻</h2> @Html.Action("ShowNewsIndexPartial", new {Newtype="1"})
{5}娱乐新闻的添加视图
@{ ViewBag.Title
= "yule"; Layout = "~/Views/zong.cshtml"; } <h2>娱乐新闻</h2> @Html.Action("ShowNewsIndexPartial", new {Newtype="2"})
{6}财经新闻的添加视图
@{ ViewBag.Title
= "caijing"; Layout = "~/Views/zong.cshtml"; } <h2>财经新闻</h2> @Html.Action("ShowNewsIndexPartial", new {Newtype="3"})
(三)数据库的操作方法
using
System; using System.Collections.Generic; using System.Linq; using System.Web; namespace 模版制作.Models { public class NewsBF { private MYDBDataContext _Context = new MYDBDataContext(); public List<New> Select(string type) { return _Context.New.Where(p => p.type == type).ToList(); } public New SelectByKey(int id) { var query = _Context.New.Where(p => p.ids == id); if (query.Count() > 0) { return query.First(); } return null; } } }

技术分享

(四)图片可以下好了直接在view中添加一个图片的文件夹,然后直接把图片拖进去使用。

 

MVC 网页制作

标签:

原文地址:http://www.cnblogs.com/w-wz/p/4638842.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!