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>

Answer 2

looks like you are missing the selector you are looking for in your jquery selector

you need to add:

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

to your DOM

also your should be 应该是

and finally your javascript to load the partial view should not be your partial view, it should be on the main view that you wanna load the partial view into 你的局部视图中，它应该在主视图上，你想加载部分视图到

Answer 3

replace your index with:

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

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

The null reference is caused by the initial call to your partial by

@Html.Partial("RPPricingPlanNames")

without the required model

Answer 4

Wrap the $("#RPPricingNameModel").load("/Home/GetPlanNameModel"); inside the document ready so that it will be executed only after the complete dom is loaded

$(function(){

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

});