View with two partialviews -- and two models

I am at a loss as to how to handle a situation in my first MVC 3 app (on razor).

I have a page that displays a list of user-created goals. On that page the user clicks on a goal and is taken to a goals detail screen. This screen shows details of the goal (goal name, description, status). It also shows activities that lead to that goal and their details (activity name, status).

I have goals in a 'goals' model and activities in an 'ilpActivity' model. The two are connected by the primary key of goals -> goalID

I have two partialviews: _displayGoal and _activities Obviously _displayGoal needs the goals model while _activities needs the ilpActivity model.

Each of these use ajax calls to forms that allow editing (and also creation for activities).

On my main view, goalDetails, I reference the goals model.

My problem - I can't use an @Html.Partial call to _activities because it uses a different model. I thought I cleared that hurdle by using RenderAction - however it works in firefox but caches in IE. That is, changes I make are not seen unless I refresh my screen.

I hope that makes sense... basically I need to call two partialviews that use two models. I've read quite a bit but have struggled to make things work.

Do I disable caching? - I tried this but duration = 0 throws an error

Do I need a model that can call both models? - I'm unsure what this looks like in the model and in the controller. I'm p开发者_如何学JAVAulling details on 1 goal while pulling a List<> of activities.

I'm confused and welcome any recommendations. Here's some code:

My Model:

namespace ILP.Models
{
public class goalsModel
{
    #region services
    public interface IGoalsService
    {
        goals GetGoal(int id);
        List<ilpActivity> GetGoalActivities(int id);
    }

    public class AssetService : IGoalsService
    {
        private goalsDataClassesDataContext qDB;

        /// <summary>
        /// reference the data context
        /// </summary>
        public AssetService()
        {
            qDB = new goalsDataClassesDataContext();
        }

        #region IGoalsService Members

        public goals GetGoal(int id)
        {
            return qDB.goals.Single(g => g.goalID == id);
        }
        public List<ilpActivity> GetGoalActivities (int id) 
        {
            //return all activities for goal 'id'
            return qDB.ilpActivities.Where(g => g.goalID == id).
                OrderBy(g => g.activityName)
                .ToList();
        }

My Controller:

        [Authorize]
    public ActionResult ViewGoal(int goalID)
    {
        goals goal;
        try
        {
            goal = qService.GetGoal(goalID);
        }
        catch
        {
            goal = new goals();
        }
        return View(goal);
    }
        [Authorize]
    public ActionResult _Activities(int goalID)
    {
        List<ilpActivity> activity;
        try
        {
            activity = qService.GetGoalActivities(goalID);
        }
        catch
        {
            throw;
        }
        return PartialView(activity);
    }

And then my view:

@model ILP.Models.goals

<div id="thisGoal">
@*@{ Html.RenderPartial("_ActiveGoals", Model);}*@
@Html.Partial("_EditDisplay", Model)
</div>

<br />

<div id="activities">
@{Html.RenderAction("_Activities", "Home", Model.goalID);}
@*@Html.Partial("_Activities",Model)*@
</div>

Well - I fixed it. Not sure I understand why this worked... but the issue was around the javascript that changed the partialview...

    // Activity: Return to _Activities view
function getActivityList() {
    $.ajaxSetup({ cache: false });
    $('#activities').load('@Url.Action("_Activities", "Home", new { goalID = Model.goalID},null)');
}
// Activity: Submit activity form
function sendActivityForm() {
    $("#activityform").submit(function (e) {
        $.post($(this).attr("action"),
            $(this).serialize(),
            function (data) {
                //$("#thisGoal").html(data);
                if (data == '{"s":"success"}') {
                    getActivityList();
                }
                else
                    return false;
            });
        e.preventDefault();
    });
};

what wasn't working was a call I had directly after the form was submitted:

    // Activity: Submit activity form
function sendActivityForm() {
    $("#activityform").submit(function (e) {
        $.post($(this).attr("action"),
            $(this).serialize(),
            function (data) {
                //$("#thisGoal").html(data);
                if (data == '{"s":"success"}') {
                    $('#activities').load('@Url.Action("_Activities", "Home", new { goalID = Model.goalID},null)');                 }
                else
                    return false;
            });
        e.preventDefault();
    });
};

I can't say I understand - but this works... and in both IE and FF