创建Ajax搜索页面(2)

1.在Models中添加如下代码

    public class Appointment
    {
        public string ClientName { get; set; }
        [DataType(DataType.Date)]
        public DateTime Date { get; set; }
        public bool TermsAccepted { get; set; }
    }

2.Controllers中添加如下代码

public class AppointmentController : Controller
    {
        //
        // GET: /Appointment/

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(string id)
        {
            return View("Index", (object)id);
        }
 
        public ViewResult AppointmentData(string id)
        {
            IEnumerable<Appointment> data = new[] {
                 new Appointment { ClientName = "张三", Date = DateTime.Parse("1/1/2012")}, 
                 new Appointment { ClientName = "李四", Date = DateTime.Parse("2/1/2012")}, 
                 new Appointment { ClientName = "王五", Date = DateTime.Parse("3/1/2012")}, 
                 new Appointment { ClientName = "赵六", Date = DateTime.Parse("1/20/2012")}, 
                 new Appointment { ClientName = "田七", Date = DateTime.Parse("1/22/2012")}, 
                 new Appointment {ClientName = "黄九", Date = DateTime.Parse("2/25/2012")}, 
                 new Appointment {ClientName = "路人甲", Date = DateTime.Parse("2/25/2013")}
            };
            if (!string.IsNullOrEmpty(id) && id != "All")
            {
                data = data.Where(e => e.ClientName == id);
            }
            return  View(data);
        }

    }

3.添加视图AppointmentData

@using Test.Models
@model IEnumerable<Appointment>
@{
    Layout = null;
}
@foreach (Appointment appt in Model)
{
 
        <tr>
            <td>
                @Html.DisplayFor(m => appt.ClientName)
            </td>
            <td>
                @Html.DisplayFor(m => appt.Date)
            </td>
        </tr>

}

此处    Layout = null;声明很重要，不然会出现意想不到的错误

4.添加视图Index

@model string
@{
    ViewBag.Title = "Appointment";
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tabledata"
    };
}
<h4>
    Appointment List</h4>
@using (Ajax.BeginForm("AppointmentData", ajaxOpts))
{
    <table>
        <thead>
            <th>
                Client Name
            </th>
            <th>
                Appointment Date
            </th>
        </thead>
        <tbody id="tabledata">
           
                @Html.Action("AppointmentData", new { id = Model })
            
        </tbody>
    </table>
    <p>
        @Html.DropDownList("id", new SelectList(new[] { "All", "张三", "李四", "王五" }, (Model ?? "All")))
        <input type="submit" value="Submit" />
    </p>

}

5.引入ajax库

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

 

posted @ 2012-11-08 10:03  bradleydan  阅读(141)  评论(0)    收藏  举报