在 ASP .NET MVC 中，挖空 html 绑定不起作用(绑定到调用分部视图的函数)

本文关键字：绑定 调用 视图 函数 不起作用 MVC NET ASP html 挖空 | 更新日期: 2023-09-27 18:36:48

我有一个ASP .NET MVC应用程序，另外我正在使用Knockout 2.0.0。我创建了一个部分视图，我想使用挖空将其呈现到页面。部分需要在 Knockout foreach 语句中呈现。我无法让挖空 HTML 绑定工作，所以我目前正在使用 JQuery 将 html 放入div 中。

此页面上有很多html，因此无法发布

所有源代码，因此我将尝试发布相关代码：

<div data-bind="foreach:issues">
    @* SNIP - A lot of other html here*@
    <div id="myPartialDiv" data-bind="html: $parent.getHtml(issueId())">
    </div>  
</div>

再往下，我的KO视图模型上有以下javascript函数（我已经注释掉了我的hack并包含了返回HTML的代码）：

   var getHtml = function (issueId) {
              var baseUrl = '@Url.Action("GetHtmlAction","MyController")';
              $.ajax(
                {
                    type: "POST",
                    url: baseUrl,
                    data: "&issueId=" + issueId,
                    success: function (data) {
                        //$('#mypartialDiv').html(data);                          
                        return data;
                    },
                    error: function (req, status, error) {
                        //$('#myPartialDiv').html('Something went wrong.');
                        return 'Something went wrong.'
                    },
                    dataType: "text"
                });
         }

上面的代码导致没有数据呈现到页面。使用 Chrome 调试工具，我看到没有发生 JavaScript 错误，并且 KNOCKOUT 只是没有将div 的 html 绑定到 getHtml 函数返回的结果。

我做错了什么？

谢谢

在 ASP .NET MVC 中，挖空 html 绑定不起作用(绑定到调用分部视图的函数)

正如 Miroslav Popovic 所解释的那样，问题在于 AJAX 请求是异步的，因此return data被忽略，并且调用 getHtml 时没有返回值。

我建议使用处理异步 HTML 加载的自定义绑定（我在这里放了一个工作示例）。

这是通过将 2 个参数带到 asyncHtml 来工作的：一个要调用的函数，该函数将成功回调作为它的最终参数（加上任何其他参数）和一个需要传递给该函数的参数数组。

<div id="myPartialDiv" data-bind="asyncHtml: { source: getHtml, params: [123] }">Loading...</div>
然后，自定义

绑定获取这些值，将自定义回调连接到传递给它的参数，并调用指定的函数：

ko.bindingHandlers.asyncHtml = {
    init: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var parameters = value.params.concat([function(data) {
           $(element).html(data); 
        }]);
        value.source.apply(null, parameters);
    }
};

最后，我们可以重新实现视图模型 HTML 检索方法来进行 POST 调用并调用新的成功处理程序：

var ViewModel = function() {
    this.getHtml = function(issueId, callback) {
        $.ajax(
            {
                type: "POST",
                url: "/echo/html/",
                data: {
                        html: "<p>server response " + issueId + "</p>",
                        delay: 1
                    },
                success: callback,
                dataType: "text"
            });            
    };
};

注意：在本例中，我使用 jsFiddle echo 回发随机响应

$.ajax是一个异步调用。调用它时，执行将只继续执行 getHtml 函数中的下一条语句。由于这是最后一条语句，因此getHtml函数将返回undefined 。

关于您的return data;...此返回在成功回调函数中。数据将是该函数的结果，而不是父函数getHtml。此外，getHtml已经完成。您无法从中返回结果。

如何在视图模型中拥有一个名为 html 的可观察属性，然后找到一些其他方法来触发 getHtml 函数（按钮单击、其他一些成功回调、issueId 属性更改......），这将反过来设置"html"属性值。然后，您可以简单地将数据绑定到该属性data-bind="html: html"。

相关文章：