jquery - 我想在 Ajax 调用后渲染部分 View

Question

我从 AJAX 调用返回部分 View ，但它没有被渲染。看起来 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 是@模型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 函数似乎没有被调用。这可能就是我需要解决的问题。

如果您有兴趣，我的数据服务看起来像；

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

您可以在成功或失败的ajax调用中调用此代码

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

并且您的 Controller 可能返回:

return PartialView("SomePartial", Model)