创建Ajax搜索页面(3)

1.Ajax相关属性说明

AjaxOptions类有一套属性让我们能够配置对服务器如何进行异步请求以及如何处理返回的数据。
Confirm：在请求之前发送一个确认对话框给用户
HttpMethod：设置请求的HTTP方法(Get/Post)
InsertionMode:指定从服务器检索的内容插入HTML的方式，有三种：①InsertAfter  ②InsertBefore  ③Replace(默认)
LoadingElementId：指定在Ajax请求执行展示的HTML元素的ID
LoadingElementDuration：指定通过LoadingElementId设置的元素展示的时间(毫秒)
UpdateTargetId：设置从服务器检索的内容插入到HTML元素的ID
Url：设置请求的URL

2.Ajax的工作原理

查看源文件可以看到如下代码：

<form id="form0" action="/Appointment/AppointmentData" method="post" data-ajax-update="#tabledata" data-ajax-mode="replace" data-ajax="true">

jquery.unobtrusive-ajax.js会扫描HTML Dom并且通过寻找值为true的data-ajax属性来识别Ajax表单

3.用户体验

将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>
    <p>
        @Html.DropDownList("id", new SelectList(new[] { "All", "张三", "李四", "王五" }, (Model ?? "All")))
        <input type="submit" value="Submit" />
    </p>

}

　效果：