Как сделать частичное представление в MVC3

Question

Я пытаюсь сделать частичное представление в моем приложении и не могу отобразить значение. Вот как выглядит мой вид.

My Main Index View

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

Частичное представление

@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>

Вот контроллер, который возвращает представление.

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

Вот код для модели

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

Когда я пытаюсь отобразить значение в TD, оно ничего не показывает. Не могли бы вы помочь мне с этим?

Answer 1

Если все, что вы пытаетесь сделать, - это использовать частичные представления и не загружать их динамически с помощью jquery, пожалуйста, посмотрите на мой ответ на этот вопрос, и это, вероятно, должно решить вашу проблему:

MVC3 Частичные представления

Все, что вам нужно сделать, - это создать ViewModel для вашего индекса, который содержит все объекты, которые нужны вашему частичному представлению (ям)

Контроллер ActionMethod:

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

Модель представления:

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

Индексное представление

@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

Оберните $("#RPPricingNameModel").load("/Home/GetPlanNameModel"); внутри документа готовым, чтобы он был выполнен только после полной загрузки домена

$(function(){

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

});

Answer 4

замените ваш индекс на:

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

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

Нулевая ссылка вызвана начальным вызовом вашего частичного

@Html.Partial("RPPricingPlanNames")

без требуемой модели