MVC - Ajax form - return partial view doesnt update in <div> target

Posted by Jack on Stack Overflow See other posts from Stack Overflow or by Jack
Published on 2009-07-03T00:14:08Z Indexed on 2010/04/02 17:13 UTC
Read the original article Hit count: 1787

Filed under:
|
|
|

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>

© Stack Overflow or respective owner

Related posts about AJAX

Related posts about mvc