查看: 1844|回复: 0

[.NET源码] MVC+EasyUI+三层新闻网站建立 详情页面制作方法(八)

发表于 2018-1-1 08:00:00

MVC新闻网站建立,完成详情页面的制作。

详情就是点击详情后弹出一个div,所以需要现在boby里面先建立一个div

  1. <div id="detailDiv">
  2. <table>
  3. <tr>
  4. <td>标题:</td>
  5. <td><input class="easyui-textbox" style="width:250px;height:32px" id="title"/></td>
  6. </tr>
  7. <tr>
  8. <td>作者:</td>
  9. <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="author" /></td>
  10. </tr>
  11. <tr>
  12. <td>发布日期:</td>
  13. <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="subDateTime" /></td>
  14. </tr>
  15. <tr>
  16. <td>内容:</td>
  17. <td><input class="easyui-textbox" data-options="multiline:true" style="width: 400px; height: 250px" id="Msg" /></td>
  18. </tr>
  19. </table>
  20. </div>
复制代码

这个div是需要隐藏的,当点击详情再弹出来。(隐藏语句需要放在页面加载的函数中)

  1. //设置详细框为不可见
  2. $("#detailDiv").css("display", "none");
复制代码

在上一篇的datagrid里面我给详情的超链接添加了一个 onclick="showDetail('+row.Id+')" 事件 row.Id就是拿到点击的新闻Id

现在就需要完善这个方法

  1. //显示新闻详情
  2. function showDetail(index) {
  3. //弹出div
  4. $("#detailDiv").css("display", "block");
  5. $.post("/NewInfo/ShowModelById", { id: index }, function (data) {
  6. $("#title").textbox("setValue", data.Title);
  7. $("#author").textbox("setValue", data.Author);
  8. $("#subDateTime").textbox("setValue", ChangeDateFormat(data.SubDateTime));
  9. $("#Msg").textbox("setValue", data.Msg);
  10. });
  11. //弹出dialog
  12. $("#detailDiv").dialog({
  13. title: "新闻详情",
  14. modal: true,
  15. width: 500,
  16. height: 500,
  17. });
  18. }
复制代码

同样的这里要根据Id查询新闻信息

在DAL层的NewInfoDal中

  1. /// <summary>
  2. /// 根据id查询出记录
  3. /// </summary>
  4. /// <param name="id"></param>
  5. /// <returns></returns>
  6. public NewInfo GetEntityModel(int id)
  7. {
  8. string sql = "select * from T_News where Id=@Id";
  9. DataTable da = SqlHelper.ExcuteDataTable(sql, CommandType.Text, new SqlParameter("@Id", id));
  10. NewInfo newInfo = null;
  11. if (da.Rows.Count > 0)
  12. {
  13. newInfo = new NewInfo();
  14. LoadEntity(da.Rows[0], newInfo);
  15. }
  16. return newInfo;
  17. }
复制代码

在BLL层的NewInfoServices中

  1. /// <summary>
  2. /// 根据id查询记录
  3. /// </summary>
  4. /// <param name="id"></param>
  5. /// <returns></returns>
  6. public NewInfo GetEntityModel(int id)
  7. {
  8. return NewInfoDal.GetEntityModel(id);
  9. }
复制代码

最后在NewInfo控制器下建立ShowModelById方法

  1. /// <summary>
  2. /// 根据id查询记录
  3. /// </summary>
  4. /// <returns></returns>
  5. public ActionResult ShowModelById()
  6. {
  7. int id = int.Parse(Request["id"]);
  8. NewInfo model = NewInfoBll.GetEntityModel(id);
  9. return Json(model, JsonRequestBehavior.AllowGet);
  10. }
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报