<style type="text/css"> #left {width:200px; min-height:500px;border:1px solid #ccc;float:left;} #right { width:740px;min-height:500px;border:1px solid #ccc;float:left;margin-left:10px;} </style> <div id="left"> <ul> <li>@Ajax.ActionLink("news title a", "Contents",new{id=1}, new AjaxOptions {HttpMethod="Post",InsertionMode= InsertionMode.Replace, UpdateTargetId="news_content" })</li> <li>@Ajax.ActionLink("news title b", "Contents",new{id=2}, new AjaxOptions {HttpMethod="Post",InsertionMode= InsertionMode.Replace, UpdateTargetId="news_content" })</li> </ul> </div> <div id="right"> <div id="news_content"></div> </div>
[HttpPost] public ActionResult Contents(int? id) { IList<string> list1 = new List<string> { "a news 1 title", "a news 2 title", "a news 3 title", "a news 4 title", "a news 5 title" }; IList<string> list2 = new List<string> { "b news 1 title", "b news 2 title", "b news 3 title", "b news 4 title", "b news 5 title", "b news 6 title", "b news 7 title" }; var model = list1; if (id != 1) { model = list2; } return PartialView(model); }
主意需要引用jquery.unobtrusive-ajax.min.js文件