MVC,Linq简单示例(一)

简介: 自己做了一个MVC小例子,功能实现为:显示用户列表,并可以通过详细按钮查看此条记录的详细信息。 (一)数据库[selfTest] 数据表:Users[英雄表] CREATE TABLE [Users] (        [unid] [int] IDENTITY (1, 1) NOT NUL...

自己做了一个MVC小例子,功能实现为:显示用户列表,并可以通过详细按钮查看此条记录的详细信息。

(一)数据库[selfTest]

数据表:Users[英雄表]

CREATE TABLE [Users] (

       [unid] [int] IDENTITY (1, 1) NOT NULL ,

       [username] [varchar] (50) NULL ,

       [userpw] [varchar] (50) NULL ,

       [createtime] [datetime] NULL  DEFAULT (getdate()),

       [memo] [varchar] (200) NULL ,

       CONSTRAINT [PK_Users] PRIMARY KEY  CLUSTERED

       (  [unid]

       )  ON [PRIMARY]

) ON [PRIMARY]

 

 

现表中有这三条记录,请手工录入。

注意:LinqTosql要求数据表须有主键。

(二)建立MVC项目

这里不做说明,请参见其它相关。

(三)添加母板页

目的就是为了集中添加一些资源文件,如JS,Css,图片等

起名为:self.master

引入相关资源文件

<link href="<%=Url.Content("~/Content/base.css") %>" rel="Stylesheet" type="text/css" />

<script src="<%=Url.Content("~/Scripts/jquery-1.3.2-vsdoc.js") %>" type="text/javascript"></script>

 

(这个我是在Views中添加的,请习惯用Url.Content方法引入资源文件,这样,目录访问不容易出错)

(四)建立视图与控制器

1)在Views中添加Manage文件夹,并在Manage文件夹中添加UserList.aspx视图。(暂时不写任何呈现逻辑)

 

2)添加Manage控制器。(暂时不添加动作)

(五)建立Linq to sqldbml文件)

1)添加Linq to sql(在Models文件夹中——添加——新建项)

名字为:SelfDB

在服务器资源管理器中,从selfTest数据库中,把表 [Users]拖至SelfDB

保存。

(六)在控制器中添加英雄表显示

1)创建Linqtosql类(自动生成的)

Models.SelfDBDataContext ss = new SelfMvc.Models.SelfDBDataContext();

2)查询,并返回结果

public ActionResult UserList()

{

     var qq = (from p in ss.Users select p);

return View("UserList",qq);

}

(七)在视图中添加Models和呈现逻辑

第五步中,(2)返回的是英雄列表,在视图中修改:

Inherits="System.Web.Mvc.ViewPage<IEnumerable<SelfMvc.Models.Users>>"

 

 

<table class="GridViewStyle normalText" cellspacing="0" cellpadding="4" border="0" style="width:98%;">

    <tr class="HeaderStyle"><th> 序号</th><th>用户名</th><th>密码</th><th>创建时间</th><th></th></tr>

    <% for (int i = 0; i < Model.Count(); i++)

       { %>

    <%if (i % 2 == 0)

      { %>

    <tr class="RowStyle">

    <%}

      else

      {  %>

      <tr class="AltRowStyle">

      <%} %>

    <td>

        <%=Html.Encode((Model.ToList()[i]).unid)%>

    </td>

     <td>

        <%=Html.Encode((Model.ToList()[i]).username)%>

    </td>

     <td>

        <%=Html.Encode((Model.ToList()[i]).userpw)%>

    </td>

     <td>

        <%=Html.Encode((Model.ToList()[i]).createtime)%>

    </td>

     <td>

     <a href="#" id="btndetail" onclick="showDetail(this,<%=Html.Encode((Model.ToList()[i]).unid)%>)">详细</a>

    </td>

    <%} %>

</table>

 

()预览

访问地址为:http://localhost:7314/manage/userlist(我自己的)

(九)样式

样式我提前加了,现在说明一下样式等资源文件

Content文件夹中添加base.css样式文件。

用到的Css样式为:

/*GridViewCSS Glass Black Style*/

 

.GridViewStyle

{

    font-family: Arial, Sans-Serif;

    font-size:small;

    table-layout: auto;

    border-collapse: collapse;

    border: #a8c7ce 1px solid;

}

 

/*Header and Pager styles*/

 

.HeaderStyle

{

    background-color:#d3eaef;

    background-position:left;

    height:30px;

}

 

.HeaderStyle th

{

    padding: 0px;

    color: #000;

    text-align:center;

    border: #a8c7ce 1px solid;

}

 

.HeaderStyle

{

    text-decoration:none;

    color:#ffffff;

    text-align:left;

    font-weight:normal;

    border-left:solid 1px #a8c7ce;

    border-right:solid 1px #a8c7ce;

    padding-top:25px;

    padding-bottom:9px;

    padding-right:5px;

    padding-left:5px;

    background-position:top;

    background-repeat:repeat-x;

}

.HeaderStyle

{

    background-position:top;

    background-repeat:repeat-x;

}

 

/*RowStyles*/

 

.RowStyle td, .AltRowStyle td

{

    padding: 5px;

    border-right: solid 1px #a8c7ce;

    border-top: solid 1px #a8c7ce;   

}

.RowStyle

{

     background-color: #FEFFF7;

}

.AltRowStyle

{

     background-color: #F8F9FE;

}

 

.SelectedRowStyle td

{

    background-color: #ffff66;

}

.normalText

{

font-size:9pt;    

     }

(十)添加查看详细信息。

这里只查看相关人物的备注信息。

1)建立UserDetail.aspx视图

2)在控制器Manage中添加UserDetail动作

public JsonResult UserDetail()

        {

            int iUnid = Convert.ToInt32(Request["unid"]);

            var q = (from u in ss.Users where u.unid == iUnid select u).ToList();

            return Json(q[0]);

        }

(这里有JsonResult,真是太好了,返回的就是串行化好的json数据)

3)在Content中添加selfjs/UserList.js文件

用于Jquery控制

4)在视图中添加UserList.js文件引入(还用Url.Content方法)

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">

<script src="<%=Url.Content("~/Content/selfjs/UserList.js") %>" type="text/javascript"></script>

</asp:Content>

5)在视图中添加显示英雄备注信息的元素(容器)

<div id="divdetail" style="display:none;">

    <div class="divmargin"><span class="header">备注:</span><span id="spanheromemo"></span></div>

</div>

6)在UserList.js文件中添加方法

//这个方法为向控制器Ajax请求,返回json数据(我预留了一个obj参数,其实这个参数现在没有用处)

这个方法是视图中那个 [详细]链接的单击事件

function showDetail(obj, e) {

    $.getJSON(

    "/Manage/UserDetail",

    {unid:e},

    function(data) {

        handleData(data);

    }

    );

}

//此方法为处理json数据

function handleData(data) {

    $("#divdetail").show();

    $("#spanheromemo").text(data.memo);

}

7)预览

 

总结:

这个比较长。请自己手工完成!这里不提供源码。如果有问题可以留言共同讨论。

 

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明:博客园

目录
相关文章
|
5月前
|
存储 XML 前端开发
“自定义MVC原理解析与示例:打造优雅、可定制化的Java应用程序”(上)
“自定义MVC原理解析与示例:打造优雅、可定制化的Java应用程序”
22 0
|
5月前
|
设计模式 前端开发 Java
“自定义MVC原理解析与示例:打造优雅、可定制化的Java应用程序”(下)
“自定义MVC原理解析与示例:打造优雅、可定制化的Java应用程序”(下)
14 0
|
XML 前端开发 数据处理
Android——MVC、MVP、MVVM框架实现登录示例
MVC 描述 缺点 优点 MVP 效果图 描述 缺点 优点 代码解析 视图效果图 建立实体类 建立实体类接口 实现实体类接口 设置P层 建立交互接口 数据绑定 MVVM 效果图 描述 代码解析 导入dataBinding 实体类 建立viewmodel xml绑定数据 视图与数据绑定
339 0
Android——MVC、MVP、MVVM框架实现登录示例
|
前端开发 Java 程序员
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(下)
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(下)
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(下)
|
前端开发 Java Spring
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(中)
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(中)
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(中)
|
XML 前端开发 Java
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(上)
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(上)
CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例及原理分析【享学Spring MVC】(上)
|
JSON 前端开发 .NET
如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景:   博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下: 输入你的姓名: 输入你的年龄: 提交 清空   视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。
1044 0
|
Web App开发 Java 数据库连接

相关产品

  • 云迁移中心