CODEWITHSUNDEEP
asp.netajaxasp.net-mvcpartial-views
Dirk
Dirk

Reputation: 3103

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

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>

Upvotes: 0

Views: 4013

Answers (3)

Dirk
Dirk

Reputation: 3103

I upgraded to MVC 2.0 as @RailRhoad suggested.

Then I moved the partial view to an area and has to change the path links to the .js files to be more explicit (T4MVC wasn't rendering the correct paths). Instead of

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>

or

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

I had to do

<script src="../../../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

Also, the action in the controller worked as @jim suggested by

return PartialView(MVC.ProjectDash.Project.Views.MembersDisplay, members);

Also, I removed the "InsertionMode=..." from

<% Ajax.BeginForm("AddMember", "Project", new AjaxOptions { UpdateTargetId = "results", InsertionMode=InsertionMode.Replace}) { %>

The biggest issue was the javascript files were not be linked up and referenced correctly. Once that was fixed, the other things quickly feel into place.

Upvotes: 0

RailRhoad
RailRhoad

Reputation: 2128

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.

Upvotes: 1

jim tollan
jim tollan

Reputation: 22485

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

Upvotes: 1

Related Questions