Ajax 호출 후에 부분 뷰를 렌더링하려고합니다.

Question

AJAX 호출에서 부분 뷰를 반환하지만 렌더링되지 않습니다. showOtherTrade 함수가 호출되지 않는 것 같습니다 (아래 코드 참조).

내보기입니다.

@model SCD.ViewModels.OtherTradesViewModel 

@{ 
    ViewBag.Title = "Edit Other Trades"; 
} 
<fieldset> 
    <legend>Edit Other Trades for the subcontractor @Model.Subcontractor.CompanyName</legend> 
    <p class="highlight">@ViewBag.Message</p> 
    <p>The Primary Trade is set to @Model.PrimaryTradeName</p> 

    <form method="get" action="@Url.Action("EditOtherTrades")" 
      data-scd-ajax="true" data-scd-target="#otherTradeList"> 
     <p>Select a trade: <input type="search" name="searchOtherTrade" id="searchOtherTrade" data-scd-autocomplete="@Url.Action("AutocompleteOtherTrade", "DataService")" style = "width: 300px;" class="submitSelection"/> 
     </p> 
    </form> 

    @Html.Partial("_OtherTrades", Model.OtherTrades.ToList()) 
</fieldset> 

내 PartialView이 @model IList의

<div id="otherTradeList"> 
    <table> 
     @Html.DisplayForModel() 
    </table> 
</div> 

입니다 그리고 DisplayTemplate이다;

@model SubcontractorTrade 
<tr> 
    <td>@Model.Trade.TradeName </td> 
    <td><input type="button" value="Remove"/>@Html.HiddenFor(model => model.TradeId)</td> 
</tr> 

자동 완성 기능을 사용하여 그리드에 추가 할 데이터 항목에 연결합니다.

그래서 내 자바 스크립트는 다음과 같습니다.

var showOtherTrade = function (data) { 
     var $form = $(this); 
     var $target = $($form.attr("data-scd-target")); 
     var $newHtml = $(data); 
     $target.replaceWith($newHtml); 
     $newHtml.effect("highlight"); 
    }; 

    var updateAutocompleteForm = function (event, ui) { 
     var $input = $(this); 

     if ($input.hasClass("submitSelection")) { 
      $input.val(""); 
      var searchId = ui.item.id; 
      url = AddOtherTradeUrl; 
      dataService.addOtherTrade(searchId, showOtherTrade, url); 
     } 
    }; 

    var createAutocomplete = function() { 
     var $input = $(this); 

     var options = { 
      source: $input.attr("data-scd-autocomplete"), 
      select: updateAutocompleteForm 
     }; 

     $input.autocomplete(options); 
    }; 

그리고 showOtherTrade 함수가 호출되지 않은 것처럼 보입니다. 이것은 아마 내가 고칠 필요가있다.

관심이 있다면 내 dataservice는 다음과 같습니다.

var dataService = new function() { 
    $.ajaxSetup({ 
     cache: false 
    }); 
    addOtherTrade = function(searchId, callback, url) { 
     $.getJSON(url, 
      { searchId: searchId }, 
      function(data) { 
       callback(data); 
      }); 
     }; 

     return { 
      addOtherTrade: addOtherTrade 
     }; 
}(); 

Answer 1

당신은 성공 또는 실패 아약스 호출에서이 코드를 호출 할 수

$.get(action, null, function(data){ 
    $('#someDiv').html(data); 
}, 'html'); 

및 컨트롤러는 반환 할 수 :

return PartialView("SomePartial", Model)