How to render Partial View in MVC3

Question

I am trying to render partial view in my application and could not display the value. Here is what my View looks like.

My Main Index View

 <div id="RPPricingNameModel">
     @Html.Partial("RPPricingPlanNames")
 </div>
<script type="text/javascript">
    $("#RPPricingNameModel").load("/Home/GetPlanNameModel");    
</script>

Partial View

@model PlanNameModel     
<table style= "vertical-align:top; left:0px; top:0px; position:absolute; border-width:1px; border-style:solid; border-color:Green;  width:130px; text-align:left;">    
    <tr>
        <td style=" font-size:15px; font-weight:bold; color:Black;">            
            @Model.Header
           <div>            
                  @Html.LabelFor(x => x.Header)               
           </div>   
        </td>
    </tr>
<table>

Here is the controller that returns the view.

public ActionResult GetPlanNameModel()
{
   PlanNameModel planNameModel = new PlanNameModel();
   planNameModel.Header = "Plans";
   //return View(planNameModel);
   return PartialView(planNameModel);   
}

Here is code for Model

public class RPPricingPlanNameModel
{
  public string Header { get; set; }
}

When I try to display the value in TD, it does not show anything. Can you please help me with this?

Answer 1

If all you are trying to do is to use partialViews and not specifically load them dynamically with jquery, please take a look at my answer to this question, and it should probably solve your problem:

MVC3 Partial Views

All you have to do is Create a ViewModel for your index that contains all the objects that your partial view(s) need

Controller ActionMethod:

public ActionResult Index()
{
  PlanNameModel planNameModel = new PlanNameModel();
  planNameModel.Header = "Plans";
  ViewData.Model = new IndexVm{ PlanNameModel = planNameModel };
}

ViewModel:

   public class IndexVm
   {
     public PlanNameModel PlanNameModel { get; set; }
   }

Index View

@model IndexVm

@*Whatever index code you have*@

@Html.Partial("PlanPartial", Model.PlanNameModel)

Partial View

@model PlanNameModel

<div>@Model.Header</div>