@using HelperMethods.Models
@model string

@{
	ViewBag.Title = "GetPeople";
	Layout = "/Views/Shared/_Layout.cshtml";
	AjaxOptions ajaxOpts = new AjaxOptions {
		UpdateTargetId = "tableBody",
		Url = Url.Action("GetPeopleData"),
		LoadingElementId = "loading",
		LoadingElementDuration = 1000
		//Confirm = "Do you wish to request new data?"
	};
}

<script type="text/javascript">
	function processData(data) {
		var target = $("#tableBody");
		target.empty();
		for (var i = 0; i < data.length; i++) {
			var person = data[i];
			target.append("<tr><td>" + person.FirstName + "</td><td>" + person.LastName + "</td><td>" + person.Role + "</td></tr>");
		}
	}
</script>

<h2>GetPeople</h2>

<div id="loading" class="load" style="display: none;">
	<p>Loading Data...</p>
</div>
<table>
	<thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
	<tbody id="tableBody">
		@*@foreach (Person p in Model)
		{
			<tr>
				<td>@p.FirstName</td>
				<td>@p.LastName</td>
				<td>@p.Role</td>
			</tr>
		}*@
		@Html.Action("GetPeopleData", new { selectedRole = Model})
	</tbody>
</table>

@using (Ajax.BeginForm("GetPeopleData", ajaxOpts))
{
	<div>
		@Html.DropDownList("selectedRole", new SelectList( new[] { "All" }.Concat(Enum.GetNames(typeof(Role)))))
			<button type="submit">Submit</button>
	</div>
}

<div>
	@foreach (string role in Enum.GetNames(typeof(Role)))
	{
		<div class="ajaxLink">
			@Ajax.ActionLink(role, "GetPeopleData",
				new { selectedRole = role },
				new AjaxOptions { UpdateTargetId = "tableBody", Url = Url.Action("GetPeopleData", new { SelectedRole = role }), OnSuccess = "processData"})
		</div>
	}
</div>