创建Ajax搜索页面--Ajax回调(5)

1.在_Layout.cshtml添加如下回调代码

<!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>
    <script type="text/javascript">
        function OnBegin() {
            alert("这是OnBegin回调");
        }
        function OnSuccess(data) {
            alert("这是OnSuccess回调: " + data);
        }
        function OnFailure(request, error) {
            alert("这是OnFailure回调:" + error);
        }

        function OnComplete(request, status) {
            alert("这是OnComplete回调: " + status);
        } 
    </script>
</head>
<body>
    @RenderBody()
</body>
</html>

2.Index代码如下

@model string
@{
    ViewBag.Title = "Appointment";
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tabledata",
        Url = Url.Action("AppointmentData"),
        LoadingElementId = "loading",
        LoadingElementDuration = 2000,
        Confirm = "提交请求？"
    };
}
<h2>
    Appointment List</h2>
<div id="loading" style="display: none; color: Red; font-weight: bold">
    <p>
        Loading Data</p>
</div>
@using (Ajax.BeginForm(ajaxOpts))
{
    <table>
        <thead>
            <th>
                Client Name
            </th>
            <th>
                Appointment Date
            </th>
        </thead>
        <tbody id="tabledata">
            @Html.Action("AppointmentData", new { id = Model })
        </tbody>
    </table>
}
@foreach (string str in new[] { "All", "张三", "李四", "王五" })
{
    <div style="margin-right: 5px; float: left">
        @Ajax.ActionLink(str, "AppointmentData", new { id = str },
            new AjaxOptions
            {
                UpdateTargetId = "tabledata",
                LoadingElementId = "loading",
                Url = Url.Action("AppointmentData", new { id = str }),
                OnBegin = "OnBegin",
                OnFailure = "OnFailure",
                OnSuccess = "OnSuccess",
                OnComplete = "OnComplete"
            })
    </div>
}

效果图：

　　

　　

 

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