Asp.net MVC 3实例学习之ExtShop（五）——产品详细页

本文主要是介绍Asp.net MVC 3实例学习之ExtShop（五）——产品详细页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

      在产品详细页需要使用到tab控件，在jquery的ui包已包含改控件，因而将相应文件链接加到母版页就可以了。

      打开“ProductController”文件，在里面添加一个Details操作，代码如下：

      完成后创建对应的视图页，并完成整个页面框架，代码如下：

   现在要完成导航信息，打开CatalogController文件，添加一个Navbar操作，代码如下：

  

      代码首先获取产品类别的父类编号，然后查询出父类进行显示。右键单击“Navbar”创建分页页面，页面的内容如下：

 

        现在要完成评论的显示。评论我们使用分别页面很容易显示。首先在产品详细信息页内的id为“tabs-4”的div下添加以下代码：

 

      代码第3行使用一个分部页面显示评论内容。第6行就用分部页面显示评论添加表单。

      新建一个名称为“CommentController”的控制器，并修改index操作代码如下：

 

      代码中第1个参数id表示的是产品的id，第2个参数是评论的当前页。和产品列表一样，使用mvcPager进行分页。完成后创建分部视图页，并将其代码修改如下：

       代码中第14行使用了Ajax分页的方法，这样，就可以使用Ajax自动更新该部分。在AjaxOption中定义了UpdateTargetId参数为“CommentList”，意味着当Ajax加载数据后，会自动更新id为“CommentList”的html元素内的内容。

      最后要完成的是评论添加分部视图。首先需要创建一个表单模型。在Models目录创建一个名称为“CommentModels”的类，并将类代码修改如下：

 

      我们只定义需要用户输入的3个项就行了，产品编号和发表用户这些可以从其它地方获取。完成后，切换到CommentController控制器文件，添加显示表单的控制器，其代码如下：

 

      在这里需要注意的是要将产品编号带到分部视图。然后创建分部视图，代码如下：

 

      表单将已Ajax的方式提交，所以在这里使用的是Ajax.BeginForm，而不是Html.BeginForm。表单提交的路径将会是“/Comment/AddComment/{id}”，其中的id是产品的编号。代码第12行到18行将创建一个select元素用来生成评价输入控件。代码54行到62行的作用是评论保存后，通过页面路径获取产品编号，然后通过Ajax更新一下评论分部视图的显示。

      余下的工作是完成评论保存控制器，其代码如下：

 

      代码第1行表示改操作是接收Post的操作。AddComment操作将接收两个参数，第1个是产品编号，第2个是用户提交的评论内容。因为使用Ajax提交，所以该操作不需要返回视图，只需要返回Json数据，所以操作的返回值是JsonResult。第4句判断用户的输入是否符合要求。第6句判断用户是否已经登录，如果没有登录，发送错误信息提示用户登录。

      这样，整个产品详细信息页就完成了。不过，要使程序正常运行，还需要修改路由表，打开Global.asax.cs文件，在路由中加入以下路由：

      第1个路由指示添加评论是如何路由的，如果没有这个，则全部会按第2个路由执行，全部操作转到Index操作去了，这样就会发生错误。

这篇关于Asp.net MVC 3实例学习之ExtShop（五）——产品详细页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---