我想在Ajax調用之後呈現部分視圖

我從AJAX調用中返回了部分視圖，但未呈現它。它看起來像showOtherTrade函數沒有被調用，請參閱下面的代碼;我想在Ajax調用之後呈現部分視圖

我的看法是;

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

我正在使用自動完成來連接到要添加到網格的數據項。

所以我的JavaScript看起來像;

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

來源

2013-01-11 arame3333

你需要在你的控制器，你傳遞數據的方法和它返回一個'PartialView'。這會將其渲染爲可以使用Ajax調用的字符串。 –

我應該提到我已經有了。它在dataservice中調用，$ .getJSON（url，...）這部分工作。 – arame3333

可以撥打成敗AJAX調用此代碼

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

和控制器可以返回：

return PartialView("SomePartial", Model)

來源

2013-01-11 21:57:56

問題是showOtherTrade函數由於某種原因未被調用。一旦它的代碼可以工作，或者你的代碼會工作。 – arame3333

我勾選了答案，因爲問題在於我不應該通過getJson Ajax調用返回PartialView。正如你指出的那樣，我應該使用get來取回HTML。 – arame3333

我在谷歌搜索 –

我想在Ajax調用之後呈現部分視圖

回答

相關問題