Отобразить частичный вид в модальном формате, не вытягивая данные

Question

Я пытаюсь отобразить модальный файл с данными, отображаемыми на частичном изображении, когда пользователь наводил имя лица в представлении. Я могу получить модальное отображение, но данных нет, и поскольку имя, которое будет отображаться в представлении, генерируется оператором 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

Я был в состоянии получить данные для заполнения. Просто не знаете, как сделать это так, чтобы только имя зависало, открывая связанный модальный вариант, и все имена открыли модалы?

Answer 1

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

@Html.Partial("_MyPartial", myPartialModel) 

Если вы не проходите мимо модели, модель основных представлений передается неявно.

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

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

Однако, есть несколько примечаний. Действие, которое вы используете для этого, должно возвращать PartialView, а не View. Частичный вид - это лишь частичный вид, когда он используется как частичный вид. Если вы вернетесь View, ваша часть будет вести себя как стандартное представление и использовать макет. Затем, поскольку ваше действие теперь возвращает частичное представление, маловероятно, что вы когда-либо захотите его обслуживать напрямую. Чтобы не показывать основную инфраструктуру маршрутизации (чтобы вы могли получить доступ через URL-адрес), вы должны украсить ее [ChildActionOnly].

Наконец, имейте в виду, что для выполнения дочернего действия требуется нетривиальное количество служебных данных. Он в основном проходит через стандартную инфраструктуру маршрутизации так же, как и обычное действие, прежде чем будет отображаться на странице. Использование нескольких страниц на странице не имеет большого значения, но если вы говорите о 100 или что-то, это значительно сократит производительность. Из-за этого не рекомендуется использовать дочерние действия, если в действительности нет причины , например, вам нужно отправить запрос в базу данных, чтобы получить что-то совершенно не связанное с представлением. Хорошим примером может быть что-то вроде недавнего виджета сообщений в блоге. В главном представлении может отображаться одно сообщение в блоге, а затем вы можете использовать дочернее действие для запроса последних сообщений, чтобы заполнить эту область виджетов. Однако, если все, что вы собираетесь сделать, это вернуть статические данные, это пустая трата, а частичная намного лучше подходит.

Даже тогда обратите внимание, что «несвязанный» бит выше.В примере с блогами было бы нецелесообразно, чтобы основное действие, отображаемое на одном блоге, отображалось в виде отдельных сообщений, чтобы заполнить некоторые виджеты, возможно, в макете. Вот почему имеет смысл использовать дочернее действие. Но в вашем примере здесь весь смысл вашего действия - отображать информацию о людях, поэтому использование дочернего действия для фактического получения информации для этих людей один за другим не имеет смысла. Вместо этого вы должны запросить всю эту информацию и вернуть ее как часть одной модели к вашему представлению.