MVC Ajax not loading Partial View in div, loading new page

Question

Hello,

I'm currently working with MVC 1.0 and have never worked with AJAX before and only have limited experience (started a little more than a week ago) with ASP.Net MVC. I'm trying to setup a table (that's built / is in a partial view) that's populated with information from a db that allows a user to quickly add pr remove records into or from the db right from the table. I'm trying to use AJAX to get this done because there is a lot of other information on the rest of the page that I don't want to have to reload. Here's a quick template.

row1: (text box) Add

row2: Name1 Remove

row3: Name2 Remove

So when a user wants to, they can enter a name into the (text box) hit Add and an action in the controller will add the entered name into the database and reload the partial view with the most up to date information.

So far I have been able to get the action method to be called, and add the record into the database. The problem is that it does not reload JUST the partial-view. It instead loads the partial-view as a whole new page and it's content is the only one that displays. (Instead of staying at /Project/Details/5, the page loads /Project/MembersDisplay)

In my master page I have:

<script src="<%= Links.Scripts.jquery_1_3_2_min_js %>" type="text/javascript"></script>
<script src="<%= Links.Scripts.MicrosoftAjax_js %>" type="text/javascript"></script>
<script src="<%= Links.Scripts.MicrosoftMvcAjax_js %>" type="text/javascript"></script>

In the controller I have:

[AcceptVerbs(HttpVerbs.Post)]
    public virtual ActionResult AddMember(FormCollection form)
    {
        MemberRepository repo = new MemberRepository();
        Member m = new Member();
        m.Id = Convert.ToInt32(form["Id"]);
        m.Name = form["name"];

        try{
            repo.addMember(m);
            repo.save();
        }
        catch{
            return View();
        }

        // Make a new IList of All Members in this current 
        //IList<Member> mems = (new PRDataContext()).Members_GetMembersById(m.Id).ToList<Member>();

       return View("MembersDisplay", members);
    }

The Partial view is

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<Application.Models.Member>>" %>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoffMvcAjax.js" type="text/javascript"></script>
<table>
    <% if (Model.Count() > 0) { %>
        <% foreach (var p in ViewData.Model) { %>
    <tr>
        <td><%= Html.Encode(p.Name) %></td>
        <td><%= Ajax.ActionLink("Delete", "AjaxDelete", new { p.Id, p.Name }, new AjaxOptions { Confirm = "Delete?", HttpMethod = "AjaxDelete", UpdateTargetId = "results" })%></td>
    </tr>
        <% } %>
    <% } else { %>
    <tr>
        <td><b>There are no Members.</b></td>
    </tr>
    <% } %>
</table>

In the controller, I tried adding if(Request.IsAjaxRequest()==true) the branch never executed. I'm not sure if ajax isn't loading, or what I'm doing wrong.

EDIT - Added missing code

Here's the details portion that uses the partial view:

<table>
<% Ajax.BeginForm("AddMember", "Project", new AjaxOptions { UpdateTargetId = "results", InsertionMode=InsertionMode.Replace}) { %>
<tr>
    <td align="left" colspan="2" style="background-color:#93B6E0;"><font style="color:#fff;"><b>Members</b></font></td>
</tr>
<tr>
    <td width="80%">
        <input type="hidden" name="prjId" value="<%= Html.Encode(Model.Id) %>" /><input type="text" name="name" style="width:120px;" />
    </td>
    <td width="20%">
        <input type="submit" value="Add" />
    </td>
</tr>
<% } %>
<tr>
    <td colspan="2">
        <div  id="results"><% Html.RenderPartial(MVC.Members.Views.MembersDisplay, Model.Members.ToList<Member>()); %></div>
    </td>
</tr>

Answer 1

Dirk - not sure if the complete code is there. however, from a brief glance, your returning:

return View("MembersDisplay", members);

when in fact, for a partial view, you should be returning something like:

return PartialView("MembersDisplay", members);

hope this helps

jim

Answer 2

If you're intending the submit to fire the Ajax.BeginForm, you'll need to include it in the form with curly braces. Currently your submit is not within the form.