2016-04-12 28 views
-1

我試圖顯示一個模式,當用戶將鼠標懸停在視圖中的人員名稱上時,數據在部分視圖中呈現。我可以得到模態顯示,但沒有數據,並且由於要在視圖中顯示的名稱由linq語句生成,所以div都具有相同的類名稱。這會導致頁面上的所有名稱在懸停時顯示模型。我不知道如何解決這些問題。顯示模態中的部分視圖不拉數據

這裏是我迄今爲止...

jQuery來爲局部視圖

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); 
     } 

創建和填充模式

$(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; 
    }); 
}); 

控制器動作局部視圖

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

但是,有幾件事要注意。您用於此的操作應該返回PartialView而不是View。局部視圖僅用作局部視圖時的局部視圖。如果你返回View,你的部分將作爲一個標準視圖,並利用一個佈局。接下來,由於您的操作現在返回了部分視圖,因此您不可能直接爲其提供服務。爲了不暴露它的主要路由基礎設施(這樣你就可以通過URL訪問),你應該用[ChildActionOnly]來修飾它。

最後,請記住,呈現子動作需要一筆不小的開銷。它基本上像正常操作一樣通過標準路由基礎設施,然後再呈現給頁面。在頁面上使用少數幾乎沒有什麼大不了的,但是如果你談論的是100多歲,那麼這會大大地降低性能。因此,不建議使用子操作,除非實際上有原因,就像您需要向數據庫發出查詢以獲取與該視圖完全無關的內容一樣。一個很好的例子就像是博客上最近發佈的帖子小部件。主視圖可能會顯示單個博客帖子,然後您可以利用子動作來查詢最近的帖子以填充該小部件區域。但是,如果你要做的只是返回靜態數據,這是浪費,部分更適合。

即使如此,請注意上面的「無關」位。在博客示例中,對於正在呈現的主要操作(顯示單個博客帖子),也必須獲取近期發佈的帖子以填充某個小部件(可能在佈局中),這是沒有意義的。這就是爲什麼使用兒童動作是有道理的。但是,在你的例子中,你的行爲的整個重點是顯示關於人的信息,所以利用孩子的行爲來爲這些人逐一獲取信息是沒有意義的。相反,您應該查詢所有這些信息,並將其作爲一個模型的一部分返回給您的視圖。