ASP.NET MVC 2入门演练 3 - 列表和添加功能

一、列表显示-View：List.aspx

　　此功能实现起来比较简单，之前我们在Site.Master添加了如下一行代码：

　　其中"List"就是指定Action，最后面的"News“指定的是Controller，所以，只需要在NewsController中实现List方法即可。以下代码是NewsController类中的List方法。

//读取CMSNews表中的所有数据行并按ID降序排列
public ActionResult List()
{
return View(db.CMSNews.OrderByDescending(Model => Model.ID).ToList());
}

　　db是在类NewsController中声明的成员：

MVCDemoEntities db = new MVCDemoEntities();

　　MVCDemoEntities哪里来的呢，查看以下Web.config中的链接字符串：

　　到此列表显示功能完成，我这里没有更改View中的代码，您可以根据需要去更改，比如把表格改成div，删除一些不想再列表中显示的列等。

　另外，自动生成的代码我都没改，实际上，像<%: Html.ActionLink("Edit", "Edit", new { id=item.ID }) %>ActionLink中的参数可以自定义的。

二、实现添加功能 - View:Create.aspx

　　1）View中我把自动生成的验证代码去掉，使用了JQuery的表单验证功能，另外<form>也去掉自动生成的代码而改为下面的代码：

//执行NewsController中的Create方法
<form id="frmCreate" action="<%=Url.Action("Create","News")%>" method="post">

　　代码如下：

<script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.validate.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(
            function () {
                $("#frmCreate").validate({
                    rules: {
                        NewsTitle: { required: true },
                        NewsCategory: { required: true },
                        NewsContent: { required: true },
                        PubDate: { required: true,
                            date: true
                        }
                    },
                    messages: {
                        NewsTitle: '此项不能为空',
                        NewsCategory: '此项不能为空',
                        NewsContent: '此项不能为空',
                        PubDate: {
                            required: '此项不能为空',
                            date: '日期格式错误'
                        }
                    },
                    success: function (label) {
                        label.addClass("valid").text("√")
                    }
                    //submitHandler: function () { alert("操作已完成!") }
                }
            )
            }
        )
    </script>

　　NewsController中Create方法实现代码：

//
// POST: /News/Create

[HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here
                CMSNews news = new CMSNews();
                news.NewsTitle = collection["NewsTitle"];
                news.NewsCategory = collection["NewsCategory"];
                news.NewsContent = collection["NewsContent"];
                news.PubDate = DateTime.Parse(collection["PubDate"]);
                db.AddToCMSNews(news);
                db.SaveChanges();
                return RedirectToAction("List");
            }
            catch
            {
                return View();
            }
        }

　　运行后界面，输入错误时：

　　输入正确时：

　　表单中的HTML代码：

<fieldset>
        <legend>Fields</legend>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.NewsTitle) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.NewsTitle)%>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.NewsCategory) %>
        </div>
        <div class="editor-field">
            <%: Html.DropDownListFor(model => model.NewsCategory,
                                        new SelectList(new MVC2Demo.Models.MVCDemoEntities().CMSNewsCategory.ToList(),
                        "CategoryCode","CategoryName"),"-- Select Category --")%>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.NewsContent) %>
        </div>
        <div class="editor-field">
            <%: Html.TextAreaFor(model => model.NewsContent, new { Style = "width:200px;height:100px" })%>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.PubDate) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.PubDate) %>
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

　　CMSNewsCategory是新闻分类表只有两列：编码和名称，编码是主键，只需要Update一下Model，选中此表即可：

　　双击MVCDemoModel.edmx，在Model Browser中右击EntityContainer:MVCDemoEntities，右键菜单选择【Update Model From Database】，在出现的窗口中展开表并选中CMSNewsCategory，然后【Finish】。

　　下一篇中，实现浏览、修改和删除功能。

转载于:https://www.cnblogs.com/Ferry/archive/2010/05/30/1747570.html

ASP.NET MVC 2入门演练 3 - 列表和添加功能相关推荐

【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
ASP.NET MVC 5 入门指南汇总
原文:ASP.NET MVC 5 入门指南汇总经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章.其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章 ...
ASP.NET MVC 5 入门教程 (2) 控制器Controller
原文:ASP.NET MVC 5 入门教程 (2) 控制器Controller 文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get ...
ASP.NET MVC 5 入门教程 (3) 路由route
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-route.html 上一节:ASP.NET MVC 5 入门 ...
.net mvc html访问数据库,【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6） - 三生石上...
图挂了的说明: 我是在Word中写的本系列文章,然后转成的HTML,所以图片都存在于 fineui.com 服务器,由于临时访问量太多,服务器喘不过气了.... 你可以稍后访问,实在是抱歉...... ...
apache2.4.9 开启path_info访问_【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）...
新建项目打开VS2015,找到菜单项[文件->新建->项目],打开向导对话框: 注意我们的选择项: 运行平台:.NET FrameWork 4.5 项目模板:ASP.NET Web Ap ...
asp.net mvc+httpclient+asp.net mvc api入门篇
第一步:创建一个ASP.NET MVC API项目第二步:在api项目里面创建一个类 public class Student{public int Id { get; set; }public s ...
【公开课视频】ASP.NET MVC+EF入门-20130315
20130315 .Net MVC+EF 入门公开课适合:.Net MVC入门者一.内容概要: 1.MVC设计模式 Model 是指要处理的业务代码和数据操作代码 View 视图主要是指的跟 ...
ASP.NET MVC XML绑定Action参数列表
昨天查看了 ASP.NET MVC 的生命周期,并没有找到类似的解决方案. 不过今天在 stackoverflow上找到了解决方案,没耐心的同学可以直接戳原文拷贝代码,原文地址:How to pass ...

ASP.NET MVC 2入门演练 3 - 列表和添加功能

ASP.NET MVC 2入门演练 3 - 列表和添加功能相关推荐

最新文章

热门文章