2016-04-12 3 views
-1

ユーザーがビュー内の人物名の上を移動したときに、部分ビューで表示されるデータでモーダルを表示しようとしています。私はモーダルを表示することができますが、データはなく、ビューに表示される名前はlinq文によって生成されるので、divはすべて同じクラス指定を持っています。これにより、ページ上のすべての名前にモデルが表示されます。私はこれらの問題をどのように克服するかについてはわかりません。ここでモーダルで部分的に表示してデータを表示しない

は、私がこれまでに...

jQueryのモーダル

$(document).ready(function (data) { 
    $('accountNumber').hover(function() { 
     var id = $(this).data("personID") 
     $(".modal").dialog({ 
      autoOpen: true, 
      position: { my: "center", at: "center", of: parent }, 
      width: 300, 
      resizable: false, 
      title: 'Accounts Information', 
      modal: true, 
      open: function() { 
       $(this).load('@Url.Action("_AccountNumberModal", "ICMS", ' + id + ')'); 
      }, 
      buttons: { 
       Ok: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     return false; 
    }); 
}); 

コントローラのアクション部分図のため

public ActionResult _AccountNumberModal(SearchViewModel viewModel, string id) 
     { 
      tblPeople people = db.tblPeoples.FirstOrDefault(x => x.PeopleCounterID.ToString() == id); 
      { 
       viewModel.FirstName = people.FirstName; 
       viewModel.LastName = people.LastName; 
       viewModel.AccountNumber = people.AccountNumber; 
       viewModel.AccountNumber2 = people.AccountNumber2; 
       viewModel.AccountNumber3 = people.AccountNumber3; 
       viewModel.AccountNumber4 = people.AccountNumber4; 
       viewModel.AccountClosed = people.AccountClosed; 
       viewModel.AccountClosed2 = people.AccountClosed2; 
       viewModel.AccountClosed3 = people.AccountClosed3; 
       viewModel.AccountClosed4 = people.AccountClosed4; 
       viewModel.AccountClosedDate1 = people.AccountClosedDate1; 
       viewModel.AccountClosedDate2 = people.AccountClosedDate2; 
       viewModel.AccountClosedDate3 = people.AccountClosedDate3; 
       viewModel.AccountClosedDate4 = people.AccountClosedDate4; 
       viewModel.TypeofAccount1 = people.TypeofAccount1; 
       viewModel.TypeofAccount2 = people.TypeofAccount2; 
       viewModel.TypeofAccount3 = people.TypeofAccount3; 
       viewModel.TypeofAccount4 = people.TypeofAccount4; 
      } 
      return View(viewModel); 
     } 

を作成し、移入したものです部分図

@model FHN.EIR.Web.Models.SearchViewModel 

<section id="accountNumbers" class="sectionHeadingBold">Account Information</section> 
@if (!string.IsNullOrEmpty(Model.AccountNumber)) 
{ 
    <dl class="inline dl-rows"> 
     <dt> 
      @Html.DisplayNameFor(model => model.AccountNumber) 
     </dt> 
     <dd> 
      @Html.DisplayFor(model => model.AccountNumber) 
     </dd> 
     <dt> 
      @Html.DisplayNameFor(model => model.TypeofAccount1) 
     </dt> 
     <dd class="width-275px"> 
      @Html.DisplayFor(model => model.TypeofAccount1) 
     </dd> 
     <dt> 
      @Html.DisplayNameFor(model => model.AccountClosed) 
     </dt> 
     <dd class="width-dateField"> 
      @if (Model.AccountClosed) 
       { 
       @Html.DisplayName("Closed") 
      } 
      else 
      { 
       @Html.DisplayName("Open") 
      } 
     </dd> 
     @if (Model.AccountClosed) 
     { 
      <dt> 
       @Html.DisplayNameFor(model => model.AccountClosedDate1) 
      </dt> 
       <dd> 
        @Html.DisplayFor(model => model.AccountClosedDate1) 
       </dd> 
     } 
    </dl> 
     <br /> 
    if (!String.IsNullOrEmpty(Model.AccountNumber2)) 
    { 
     <dl class="inline dl-rows"> 
      <dt> 
       @Html.DisplayNameFor(model => model.AccountNumber2) 
      </dt> 
      <dd> 
       @Html.DisplayFor(model => model.AccountNumber2) 
      </dd> 
      <dt> 
       @Html.DisplayNameFor(model => model.TypeofAccount2) 
      </dt> 
      <dd class="width-250px"> 
       @Html.DisplayFor(model => model.TypeofAccount2) 
      </dd> 
      <dt> 
       @Html.DisplayNameFor(model => model.AccountClosed2) 
      </dt> 
      <dd class="width-dateField"> 
       @if (Model.AccountClosed2) 
        { 
        @Html.DisplayName("Closed") 
       } 
       else 
       { 
        @Html.DisplayName("Open") 
       } 
      </dd> 
      @if (Model.AccountClosed2) 
      { 
       <dt> 
        @Html.DisplayNameFor(model => model.AccountClosedDate2) 
       </dt> 
        <dd> 
         @Html.DisplayFor(model => model.AccountClosedDate2) 
        </dd> 
      } 
     </dl> 
      <br /> 
    } 
    if (!String.IsNullOrEmpty(Model.AccountNumber3)) 
    { 
     <dl class="inline dl-rows"> 
      <dt> 
       @Html.DisplayNameFor(model => model.AccountNumber3) 
      </dt> 
      <dd> 
       @Html.DisplayFor(model => model.AccountNumber3) 
      </dd> 
      <dt> 
       @Html.DisplayNameFor(model => model.TypeofAccount3) 
      </dt> 
      <dd class="width-250px"> 
       @Html.DisplayFor(model => model.TypeofAccount3) 
      </dd> 
      <dt> 
       @Html.DisplayNameFor(model => model.AccountClosed3) 
      </dt> 
      <dd class="width-dateField"> 
       @if (Model.AccountClosed3) 
        { 
        @Html.DisplayName("Closed") 
       } 
       else 
       { 
        @Html.DisplayName("Open") 
       } 
      </dd> 
      @if (Model.AccountClosed3) 
      { 
       <dt> 
        @Html.DisplayNameFor(model => model.AccountClosedDate3) 
       </dt> 
        <dd> 
         @Html.DisplayFor(model => model.AccountClosedDate3) 
        </dd> 
      } 
     </dl> 
      <br /> 
    } 
    if (!String.IsNullOrEmpty(Model.AccountNumber4)) 
    { 
     <dl class="inline dl-rows"> 
      <dt> 
       @Html.DisplayNameFor(model => model.AccountNumber4) 
      </dt> 
      <dd> 
       @Html.DisplayFor(model => model.AccountNumber4) 
      </dd> 
      <dt> 
       @Html.DisplayNameFor(model => model.TypeofAccount4) 
      </dt> 
      <dd class="width-250px"> 
       @Html.DisplayFor(model => model.TypeofAccount4) 
      </dd> 
      <dt> 
       @Html.DisplayNameFor(model => model.AccountClosed4) 
      </dt> 
      <dd class="width-dateField"> 
       @if (Model.AccountClosed4) 
        { 
        @Html.DisplayName("Closed") 
       } 
       else 
       { 
        @Html.DisplayName("Open") 
       } 

      </dd> 
      @if (Model.AccountClosed4) 
      { 
       <dt> 
        @Html.DisplayNameFor(model => model.AccountClosedDate4) 
       </dt> 
        <dd> 
         @Html.DisplayFor(model => model.AccountClosedDate4) 
        </dd> 
      } 
     </dl> 
    } 
} 
else 
{ 
    <dl class="inline dl-rows"> 
     <dt> 
      <span class="mar-l-15px inline-messages">There are no accounts associated with this person</span> 
     </dt> 
    </dl> 
} 

UPDATE

私は、データを取り込むために取得することができました。名前をつけただけで関連するモーダルが開かれ、すべての名前がモーダルになるようにする方法を確かめないでください。

答えて

1

部分的なビューは、読み込むためのアクションを使用しません。モデルに直接渡す必要があります。

@Html.Partial("_MyPartial", myPartialModel) 

モデルを渡さないと、メインビューモデルが暗黙的に渡されます。

アクションを使用して部分的なビューをレンダリングする必要がある場合は、子のアクションについて話しています。その構文は次のとおりです。

@Html.Action("ActionName", "ControllerName") 

ただし、注意すべき点がいくつかあります。これに使用するアクションは、ViewではなくPartialViewを返す必要があります。部分図は、部分図として使用されている場合の部分図のみです。 Viewを返すと、パーシャルは標準ビューとして動作し、レイアウトを利用します。次に、あなたの行動が部分的なビューを返すようになったので、あなたが直接それを提供したいとは思わないでしょう。メインのルーティングインフラストラクチャ(URL経由でアクセスできるような)を公開しないようにするには、[ChildActionOnly]で飾る必要があります。

最後に、子のアクションをレンダリングするには、軽微なオーバーヘッドが必要であることに注意してください。基本的には、通常のアクションのように、ページに表示される前に、標準のルーティングインフラストラクチャを通過します。ページ上で少数を使用することは大したことではありませんが、100以上のことについて話していると、パフォーマンスが大幅に低下します。このため、実際にという理由がある場合を除いて、子のアクションを使用することはお勧めできません。ビューに完全に無関係なものをフェッチするためにデータベースにクエリを発行する必要があるように、です。良い例は、最近のブログの投稿ウィジェットのようなものです。メインビューには1つのブログ投稿が表示され、子アクションを使用して最新の投稿をクエリしてそのウィジェットエリアを埋めることができます。しかし、静的なデータを返すだけなら、それは無駄であり、部分的にははるかに適しています。

でも、上記の「無関係」なビットに注意してください。ブログの例では、レンダリングされる主なアクション(単一のブログ投稿を表示する)が、おそらくレイアウト内のウィジェットを埋めるために最新の投稿のコレクションを取得しなければならないということは意味がありません。そういうわけで、子供の行動を使うのが理にかなっています。しかし、あなたのここでの例では、あなたの行動の全ポイントは人に関する情報を表示することです。そのため、子供の行動を利用して実際に人々の情報を1つずつ取り出すことは意味をなさない。代わりに、このすべての情報を照会し、1つのモデルの一部としてビューに戻す必要があります。

関連する問題