0

在单个 asp.net MVC 页面中，我必须显示 3 个相同布局/结构的报告。因此，我创建了一个使用 Knockout 数据绑定生成报告的页面，并通过传递一些附加参数生成了 10 个报告。

我尝试使用 Ajax 部分视图加载所有 3 个报告，通过这种方式，我将这 10 个报告填充到一个页面中。

现在我碰巧看到一个奇怪的问题，虽然每个报告的数据不同，但最后一个报告数据出现在所有 3 个报告中。任何人都知道如何处理这个问题？

主页视图，我通过 Ajax 调用调用 3 个报告。 

 <div id="RecentlyAddedReport" ></div>
    <div id="RecentlyConsultedReport"></div>
    <div id="RecentlyPrescribedReport"></div>

    <!-- start here -->
    <script type="text/javascript">
        $(document).ready(function () {
            AjaxLoadReport('RecentlyAddedReport', 'Patient/Report?type=RecentlyAdded&name=Recently Added');
            AjaxLoadReport('RecentlyConsultedReport', 'Patient/Report?type=RecentlyConsulted&name=Recently Consulted');
            AjaxLoadReport('RecentlyPrescribedReport', 'Patient/Report?type=RecentlyPrescribed&name=Recently Prescribed');
        });

        function AjaxLoadReport(reportType, actionURL) {
            var resultDiv = $('#' + reportType);
            $.ajax({ type: "GET", url: actionURL, data: {},
                success: function (response) {
                    resultDiv.html('');
                    resultDiv.html(response);
                }
            });
        }
    </script>

报告视图 - 我对所有 3 个报告都使用相同的视图

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<TryHomeo.Web.UI.Models.UserControlViewData>" %>

<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script src="../../Scripts/jquery.timeago.js" type="text/javascript"> </script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"> </script>
<h1>
    <%:Model.ReportName%>
</h1>
<div class='loadingIndicator' title="Loading..."></div>
<ul id="<%=Model.ReportType %>" data-bind="template: { name: 'patient-template', foreach: patients}"></ul>
<script type="text/html" id="patient-template">   
    <span>
        <li>
            <div>
                <a data-bind="text: PatientName"></a>- (<abbr class='timeago' data-bind="timeago: DatedString"></abbr>)
            </div>
        </li>
    </span>
</script>
<script type="text/javascript">

    // ReportViewModel View Model //
    function ReportViewModel() {
        var self = this;
        self.patients = ko.observableArray([]);
    }

    var objVM = new ReportViewModel();
    ko.applyBindings(objVM);

    // Using jQuery for Ajax loading indicator 
    $(".loadingIndicator").ajaxStart(function () { $(this).fadeIn(); }).ajaxComplete(function () { $(this).fadeOut(); });

    $(document).ready(function () {
        $.ajax({
            dataType: 'json',
            url: '/Patient/GetPatientReport/?type=' + '<%=Model.ReportType %>' + '&' + '<%=DateTime.Now.ToString() %>',
            success: SetData,
            error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
        });
    });

    function SetData(data) {
        objVM.patients(data);
    }

    ko.bindingHandlers.timeago = {
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            var $this = $(element);
            // Set the title attribute to the new value = timestamp        
            $this.attr('title', value);
            // If timeago has already been applied to this node, don't reapply it -    
            // since timeago isn't really flexible (it doesn't provide a public     
            // remove() or refresh() method) we need to do everything by ourselves. 
            if ($this.data('timeago')) {
                var datetime = $.timeago.datetime($this);
                var distance = (new Date().getTime() - datetime.getTime());
                var inWords = $.timeago.inWords(distance);
                // Update cache and displayed text..    
                $this.data('timeago', { 'datetime': datetime });
                $this.text(inWords);
            } else {
                // timeago hasn't been applied to this node -> we do that now!          
                $this.timeago();
            }
        }
    };
</script>
4

0 回答 0