How to render a partial view in MVC3

Question

I am trying to display a partial view in my application and cannot display the value. This is what my view looks like.

My main index

 <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 a controller that returns a view.

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

Here is the code for the model

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

When I try to display a value in TD, it shows nothing. Could you help me with this?

Answer 1

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

Partial Views of MVC3

, , ViewModel , , ()

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)

@model PlanNameModel

<div>@Model.Header</div>

Answer 2

, , jquery

:

<div id="RPPricingNameModel"></div>

DOM

@m.Header @Model.Header

, , javascript , ,

Answer 3

:

<div id="RPPricingNameModel"></div>

<script type="text/javascript">
  $(function(){$("#RPPricingNameModel").load("/Home/GetPlanNameModel");});
</script>

@Html.Partial("RPPricingPlanNames")

Answer 4

$("#RPPricingNameModel").load("/Home/GetPlanNameModel"); , , dom

$(function(){

 $("#RPPricingNameModel").load("/Home/GetPlanNameModel");

});