MVC + EasyUI + layer-3 news website creation (8. Details page completed), mvceasyui

MVC + EasyUI + layer-3 news website creation (8. Details page completed), mvceasyui

For details, a div is displayed after you click Details. Therefore, you need to create a div in boby.

<Div id = "detailDiv"> <table> <tr> <td> title: </td> <input class = "easyui-textbox" style = "width: 250px; height: 32px "id =" title "/> </td> </tr> <td> author: </td> <input class = "easyui-textbox" style = "width: 250px; height: 32px "id =" author "/> </td> </tr> <td> Release Date: </td> <input class = "easyui-textbox" style = "width: 250px; height: 32px "id =" subDateTime "/> </td> </tr> <td> content: </td> <input class = "easyui-textbox" data-options = "multiline: true" style = "width: 400px; height: 250px "id =" Msg "/> </td> </tr> </table> </div>

This div needs to be hidden. When you click details, it will pop up again. (Hidden statements must be placed in functions loaded on the page)

// The detailed setting box is invisible $ ("# detailDiv" ).css ("display", "none ");

In the datagrid in the previous article, I added an onclick = "showDetail ('+ row. Id +')" event row. Id to the hyperlink for details, which is the news Id obtained.

Now we need to improve this method.

// Display news details function showDetail (index) {// pop up div $ ("# detailDiv" ).css ("display", "block"); $. post ("/NewInfo/ShowModelById", {id: index}, function (data) {$ ("# title "). textbox ("setValue", data. title); $ ("# author "). textbox ("setValue", data. author); $ ("# subDateTime "). textbox ("setValue", ChangeDateFormat (data. subDateTime); $ ("# Msg "). textbox ("setValue", data. msg) ;}); // pop up dialog $ ("# detailDiv "). dialog ({title: "News details", modal: true, width: 500, height: 500 ,});}

Similarly, you need to query news information by Id.

In the NewInfoDal of the DAL Layer

/// <Summary> /// query records by id /// </summary> /// <param name = "id"> </param> /// <returns> </returns> public NewInfo GetEntityModel (int id) {string SQL = "select * from T_News where Id = @ Id"; DataTable da = SqlHelper. excuteDataTable (SQL, CommandType. text, new SqlParameter ("@ Id", id); NewInfo newInfo = null; if (da. rows. count> 0) {newInfo = new NewInfo (); LoadEntity (da. rows [0], newInfo);} return newInfo ;}

In the NewInfoServices Of The BLL Layer

/// <Summary> /// query records by id /// </summary> /// <param name = "id"> </param> /// <returns> </returns> public NewInfo GetEntityModel (int id) {return NewInfoDal. getEntityModel (id );}

Finally, create the ShowModelById method under the NewInfo controller.

/// <Summary> /// query records by id /// </summary> /// <returns> </returns> public ActionResult ShowModelById () {int id = int. parse (Request ["id"]); NewInfo model = NewInfoBll. getEntityModel (id); return Json (model, JsonRequestBehavior. allowGet );}