2015-08-27 1 views
0

У меня есть 2 проблемы, которые дают частичный вид модального диалога.частичный вид с jquery ajax не будет отображаться

1) Я использую пост ajax, он вызывает действие, возвращает частичное представление со списком контактов, я обновляю div, но он не отображается. Если я закрою и перезагрузим диалог, он отобразится.

2) есть элементы текстового поля в диалоговом окне частичного просмотра, которое находит селектор jquery, но val() пуст.

Отладка полностью и полностью ... просто не отображается.

модальный:

@model CRM.Model.Shared.ContactSearchModel 

<div id="divSearchContactModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <form id="contactSearchForm" class="form-horizontal"> 
       <div class="modal-header"> 
        <h4 class="modal-title">Search/Add Contact</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="row"> 
         <div class="col-md-12"> 
          <div class="form-group"> 
           <div class="col-md-4"> 
            @Html.LabelFor(model => model.FirstName, new { @class = "control-label" }) 
            @Html.EditorFor(model => model.FirstName) 
           </div> 
           <div class="col-md-4"> 
            @Html.LabelFor(model => model.LastName) 
            @Html.EditorFor(model => model.LastName) 
           </div> 
           <div class="col-md-2"> 
             <button id="contact-search-button" type="button" onclick="Search();" class="btn btn-mercury-modal-search" style="vertical-align: middle">Search</button> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div id="divSearchResultsContent"> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Ajax в функции поиска:

function Search() { 

    //these return empty text for val() !!! 
    var firstName = $("#FirstName").val(); 
    var lastName = $("#LastName").val(); 

    $.ajax({ 
     type: "POST", 
     url: "/ContactSearch/Search/", 
     data: { FirstName: firstName, LastName: lastName }, 
     success: function (data) { 
      $('#divSearchResultsContent').html(data); 
     }, 
     error: function (jqXhr, textStatus, errorThrown) { 
      console.log(textStatus, errorThrown); 
     } 
    }); 
    return true; 
} 

Контроллер:

[HttpPost] 
    [OutputCache(Duration = 0)] 
    public ActionResult Search(ContactSearchModel model) 
    { 
      model.FirstName = "Daffy"; 
      model.LastName = "Duck"; 

      var response = _contactManager.SearchContacts(new SearchContactsRequest 
      { 
       FirstName = model.FirstName, 
       LastName = model.LastName 
      }); 

      if (!response.IsSuccess) 
      { 
       throw new Exception(response.ErrorMessage); 
      } 

      model.SearchFinished = true; 
      model.ContactList = response.ContactList; 
      model.SearchCount = response.ContactList.Count; 

      return PartialView("_ContactSearchResults", model); 

    } 

Частичный вид на _ContactSearchResults

@using CRM.Entities.Common 
@model CRM.Model.Shared.ContactSearchModel 
<table class="table table-responsive"> 
    <thead> 
     <tr> 
      <th> 
       First Name 
      </th> 
      <th> 
       Last Name 
      </th> 
      <th> 
       DBA Name 
      </th> 
      <th> 
       Address 
      </th> 
      <th> 
       City 
      </th> 
      <th> 
       State 
      </th> 
      <th> 
       Zip 
      </th> 
      <th> 
       Phone 
      </th> 
      <th> 
      </th> 
    </thead> 
    <tbody> 
     @if (Model.SearchFinished) 
     { 
      if (Model.SearchCount > 0) 
      { 
       foreach (Contact contact in Model.ContactList) 
       { 
        <tr> 
         <th> 
          @Html.Label(contact.FirstName) 
         </th> 
         <th> 
          @Html.Label(contact.LastName) 
         </th> 
         <th> 
          @Html.Label(contact.DbaName) 
         </th> 
         <th> 
          @Html.Label(contact.ContactAddress) 
         </th> 
         <th> 
          @Html.Label(contact.ContactCity) 
         </th> 
         <th> 
          @Html.Label(contact.ContactState) 
         </th> 
         <th> 
          @Html.Label(contact.ContactZipCode) 
         </th> 
         <th> 
          @Html.Label(contact.PhoneNumber) 
         </th> 
         <th> 
          @*@Html.ActionLink("Select", "Select", "ContactSearch", new { EntityId = Model.EntityId, ContactEntityId = @contact.ContactId, RoleId = Model.RoleId }, null)*@ 
         </th> 
        </tr> 
       } 
      } 
      else 
      { 
       <tr> 
        <th> 
         "No contacts found." 
        </th> 
       </tr> 
      } 
     } 
    </tbody> 
</table> 

Любая помощь будет оценена по достоинству.

Спасибо!

+0

Вы можете реплицировать то же самое на jsfiddle, http: //jsfiddle.net с сгенерированным html (не использовать код asp.net в jsfiddle) – dreamweiver

ответ

0

1) Это делает, но проблема в том, что размер мода jquery не увеличивается (поэтому вы можете увидеть его при повторном открытии диалога). См. Это: Make JQuery UI Dialog automatically grow or shrink to fit its contents

2) Может быть, у вас есть несколько элементов управления с именем FirstName, LastName на той же странице?

+0

Спасибо за ответ. Я проверил возвращенный html, который был отображен, и html не находится в диалоге, хотя размер слишком мал. –

+0

дважды проверил, что у нас нет одинакового идентификатора на 2 элемента управления для FirstName. Даже изменил имя до уверенности, но не кубики. –

0

Я подозреваю, что все это связано и связано с тем, что мой диалог - это частичный вид, который обрабатывается ajax после того, как дом построен.

Когда я беру этот же диалог и перемещаю его в свое представление и использую HTML.RenderPartial, затем показываем диалог по щелчку, все начинает работать как ожидалось.