List / detail views with MVC 3 and AJAX
http://community.composite.net/Blog/2011/01/25/Listdetail-views-with-MVC-3-and-AJAX
In my quest to master Razor I tried to get a list/detail view up and running spiced up with a dash of AJAX and it turned out to be surprisingly easy – the code needed is available below. I used the OmniCorp demo site for this spike and the code is using the 'News' data type from that site – if you want to duplicate this behavior you should update the name space references to 'Omnicorp.Content' and the 'News' type and it's fields. Here are the steps needed to replicate this sample:
In my quest to master Razor I tried to get a list/detail view up and running spiced up with a dash of AJAX and it turned out to be surprisingly easy – the code needed is available below. I used the OmniCorp demo site for this spike and the code is using the 'News' data type from that site – if you want to duplicate this behavior you should update the name space references to 'Omnicorp.Content' and the 'News' type and it's fields. Here are the steps needed to replicate this sample:
- Set up a OmniCorp demo site and install the MvcPlayer – this process is described in a previous blog post.
- Copy in the controller class below (to your ~/App_Code folder)
- Create the folder ~/Views/News and copy in the two views shown below.
- Add an instance of the MvcPlayer function to a page and specify "/News" as path – save, publish and browse to your test page to try it out.
The controller
using System.Linq; using System.Web.Mvc; using Composite.Data; using Omnicorp.Content; namespace SiteWidgets { public class NewsController : Controller { public ActionResult Index() { using (DataConnection data = new DataConnection()) { var newItems = data.Get<News>().OrderByDescending(f => f.Date); return View(newItems); } } public ActionResult Details(string id) { using (DataConnection data = new DataConnection()) { var newItem = data.Get<News>().Where(f => f.Title==id).First(); return View(newItem); } } } }
The views
@using Omnicorp.Content; @model IEnumerable<News> <html> <head> <!-- these scripts are required for MVC ajax to run --> <script src="http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js" type="text/javascript"></script> </head> <body> <h1>News</h1> <ul> @foreach (News item in Model) { <li> @Html.ActionLink(item.Title, "Details" , "News" , new { id = item.Title }, null) (@Ajax.ActionLink("ajax it" , "Details" , "News" , new { id = item.Title }, new AjaxOptions { UpdateTargetId = "News" }, null)) </li> } </ul> <div id="News"> <!-- the 'ajax it' link will update this zone --> </div> </body> </html>
@using Omnicorp.Content; @model News <html> <head> <title>@Model.Title</title> </head> <body> @Html.Raw(Model.Content) <hr /> @Html.ActionLink("All news" , "Index") </body> </html>
Nhận xét
Đăng nhận xét