2016-05-17 4 views
1

部分的なビューの中には、アプリケーションを最初に実行すると、期待どおりにロードされますが、ビューをリロードしてモデルをプッシュすると、あたかも部分的でないかのように完全に別個のビューにする。部分図がレンダリングされない内部ビュー

私はそうのようなAjaxのフォームの内側にそれを呼んでいる(アクションリンクをクリックで、_GetSearchModal法):

<div id="modelSearch"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <i class="fa fa-search"></i> Search by Model/Manufacturer 
      </h3> 
     </div> 
     <div class="panel-body"> 
      @using (Ajax.BeginForm("_GetSearch", "Home", new AjaxOptions() {UpdateTargetId = "modelSearch"})) 
      { 
       @Html.AntiForgeryToken() 
       <div class="input-group"> 
        @Html.TextBox("search", null, new {id = "name", @class = "form-control", placeholder = "Please enter a manufacturer or model"}) 
        <span class="input-group-btn"> 
         <button id="search" class="btn btn-default" type="submit"><i class="fa fa-search"></i></button> 
        </span> 
       </div> 
       if (Model != null) 
       { 
        <div id="searchResults" class="fade-in two"> 
         @foreach (var s in Model) 
         { 
          <div class="result"> 
           @switch (s.ResultType) 
           { 
            case "Man": 
             <a href="#">@s.Manufacturer</a> 
             break; 
            case "Mod": 
             @Html.ActionLink(s.Manufacturer + Html.Raw(s.Model), "_GetSearchModal", "Home", new {id = s.MachineId}, new {toggle = "modal", data_target = "#MachineModal"}) 
             <img src="~/Images/General/Tier/@(s.TierId).png" alt="Tier @s.TierId"/> 
             break; 
           } 

          </div> 

         } 
        </div> 
       } 
      } 
     </div> 
    </div> 
</div> 

<!-- Product Modal --> 
<div class="modal fade" id="MachineModal" tabindex="-1" role="dialog" aria-labelledby="MachineModalLabel"> 
    @Html.Partial("_SearchModal", new MachineModal()) 
</div> 

、ビュー自体が異なるビューモデルをロードする必要があります(MachineModal):

@model SpecCheck.Portals.Web.UI.ViewModels.MachineModal 

@if (Model != null) 
{ 

     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="MachineModalLabel">@Model.Manufacturer @Model.Model</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="row"> 
         <div class="col-md-6"> 
          <img src="~/Images/@Model.Manufacturer/logo.png" alt="@Model.Manufacturer" /><br /> 
          <a href="#" type="button" class="btn button">Wiki</a> 
         </div> 
         <div class="col-md-6"> 
          @Model.Catagory1 | @Model.Category2<br /><br /> 
          <span class="modal-em">Region: </span> @Model.Region<br /> 
          <span class="modal-em">Status: </span>@Model.Status<br /> 
          <span class="modal-em">Spec Date: </span>@Model.SpecDate 
         </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <a href="#" type="button" class="btn button">View</a> 
        <a href="#" type="button" class="btn button">Quick Compare</a> 
        <a href="#" type="button" class="btn button">Compare</a> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
} 

そして「ホームコントローラー」でこれを行うには、アクションは次のとおりです。

public ActionResult _GetSearchModal(string machineId) 
{ 
    using (var db = new SpecCheckDbContext()) 
    { 
     MachineModal machine = new MachineModal(); 
     var searchHelper = new SearchHelper(db); 

     //Get Machine Details 
     var dbResults = searchHelper.SearchModal(Convert.ToInt32(machineId)); 

     machine.Model = dbResults.Model; 
     machine.Catagory1 = dbResults.Catagory1; 
     machine.Category2 = dbResults.Category2; 
     machine.Manufacturer = dbResults.Manufacturer; 
     machine.Region = dbResults.Region; 
     machine.SpecDate = dbResults.SpecDate; 
     machine.Status = dbResults.Status; 
     machine.MachineId = dbResults.MachineId; 
     machine.ManufacturerId = dbResults.ManufacturerId; 

     var model = machine; 

     return PartialView("_SearchModal", model); 
    } 
} 

ファースト私がチェックしたものはスクリプトでした。レイアウトページが読み込まれると、スクリプトの問題ではないので、それらはすべて適切な位置にあります。この時点で何を変更しようとするかわからないので、どんな提案も歓迎します。 Ajaxフォームで

+1

新しいビューで部分的にレンダリングすると、正しいスクリプト( 'jquery-unobtrusive-ajax.js')が含まれていないことと、ajaxのサブミットではなく通常のサブミットを行うことを意味します。しかし、それは 'UpdateTargetId =" modelSearch "'または 'UpdateTargetId =" MachineModal "'であるべきですか? –

答えて

3

_GetSearch => _GetSearchModal(name of the action)

は、部分的なビューにmachineを返すようにしてください? View階層に表示される場合がありますが、第2の_SearchModal部分ビューが返されますか?

関連する問題