创建Ajax链接(4)

修改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",
            })
    </div>
}

效果：

修改代码如下可以防止JS禁用

@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 })
            })
    </div>
}