MVC - Ajax form - return partial view doesnt update in <div> target
- by Jack
I have an index view that I want to update automatically as the user types in a client id. I got something similiar to work (only it was updating just a label) - but this will not work.
What happens is the partial is just rendered by itself (not in place of the UpdateTargetID). So the data is rendered on a new page. Here is my code:
Controller:
public ActionResult ClientList(string queryText)
{
var clients = CR.GetClientLike(queryText);
return PartialView("ClientIndex", clients);
}
Partial View:
<table>
<thead>
<tr>
<td>Client ID</td>
<td>Phone1</td>
<td>Phone2</td>
<td>Phone3</td>
<td>Phone4</td>
</tr>
</thead>
<tbody>
<% if (Model != null)
{
foreach (Client c in Model)
{ %>
<tr>
<td><%= Html.Encode(c.ClientID)%></td>
<td><%= Html.Encode(c.WorkPhone)%></td>
<td><%= Html.Encode(c.WorkPhone1)%></td>
<td><%= Html.Encode(c.WorkPhone2)%></td>
<td><%= Html.Encode(c.WorkPhone3)%></td>
</tr>
<% }
} %>
</tbody>
Main View:
Insert code messed up, so this is just copy/pasted:
$(function() {
$("#queryText").keyup(function() {
$('#sForm').submit();
});
});
<% using (Ajax.BeginForm("ClientList", /* new { queryText = Form.Controls[2] ?? }*/"", new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.Replace }, new { @id = "sForm" }))
{ %
<% } %
<div id="status" class="status" name="status">
<%--<% Html.RenderPartial("ClientIndex", ViewData["clients"]); %> Should this be here???? --%>
</div>
