Angular template and .NET Partial Postback

Angular template and .NET Partial Postback

本文关键字：Partial Postback NET and template Angular      更新时间：2023-09-26

我在处理.Net部分回发时遇到了一个问题。

问题与此基本相同：在部分回发后重新初始化角度绑定

基本上，我有一个选项卡，上面有angular应用程序，然后我有第二个带有c#控件的选项卡，我必须在选项卡之间进行部分回发，当我返回到我的应用程序时，什么都没有。

我尝试了ngView路由，然后尝试了$route.reload()（它转到控制器，我可以看到模板正在被拉下，但页面上的结果是没有）。然后我尝试了这里提到的compile(templateCache.get(lazyTableControllerRoute.current.templateUrl))(scope)。没有什么

请帮助：）

每次回邮后，我都会把这个html:放在页面上

LiteralControl lazyControl = new LiteralControl("<div ng-app='"LazyLoadingApp'" style='"padding:10px'" ng-controller='"LazyTableController'" ng-view><lazy-table> </lazy-table></div>");
Controls.Add(lazyControl);

以及一些配置常量，如templateUrl。

这是我的代码：

var app = angular.module('LazyLoadingApp', ['ui.bootstrap', 'ngRoute'], function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});
app.config(function ($routeProvider, $locationProvider, tableTemplateUrl) {
    $routeProvider.when('/Page.Web.UI/sptl_project.aspx', {
        controller: 'LazyTableController',
        templateUrl: tableTemplateUrl,
    });
    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
});
//**This objects I am using after partial postback to check in the console if e.g. $route.reload() works..**
var lazyTableControllerRoute = null;
var templateCache = null;
var compile = null;
var scope = null;
app.directive('lazyTable', ['tableTemplateUrl',
    function (tableTemplateUrl) {
        return {
            name: 'lazyTable',
            priority: 0,
            restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
            templateUrl: tableTemplateUrl
        };
    }
]).controller('LazyTableController', ['$scope', '$rootScope', 'lazyFactory', 'opsPerRequest', 'header', '$route', '$templateCache', '$compile',
    function ($scope, $rootScope, lazyFactory, opsPerRequest, header, $route, $templateCache, $compile) {
        lazyTableControllerRoute = $route;
        var loadingPromise = null;
        templateCache = $templateCache;
        compile = $compile;
        scope = $scope;
(...) rest is not important

更新：

我试着使用require.js。（同样，它在整个页面加载后工作。）我的想法是在部分回发后引导元素。我构建了一个简单的测试用例，在更新面板和我的应用程序中有一个简单按钮，只是进行部分回发。点击后（当应用程序消失时）我尝试在控制台：

angular.bootstrap(document, ['LazyLoadingApp'])

但后来我得到了一个我无法删除的错误：

App Already Bootstrapped with this Element 'document'

以下是以require.js方式为应用程序提供的plunker（但请记住，它只是用于代码审查目的。）

  • 不要同时使用ng-app和angular.bootstrap
  • 你编译了"ng-app"吗？如果是的话，不要

ngtutorial.com/learn/bootstrap

好吧！问题已解决。。因此，为了处理部分回发，您需要：

这样定义应用程序：（记住你必须从html中删除ng应用程序！）

<base href="/">
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
         <asp:Button ID="fire" runat="server" Text="fire!" />
            <div id="parent" >  <div id="boodstapped" ng-view ></div></div>
    </ContentTemplate>
</asp:UpdatePanel>

像这样实例化应用程序：

var app = angular.module('LazyLoadingApp', ['ui.bootstrap', 'ngRoute']);
jQuery(document).ready(function ($) {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    function EndRequestHandler(sender, args) {
        jQuery('#parent').children().remove();
        jQuery('#parent').append('<div id="boodstapped" ng-view ></div>');
        angular.bootstrap(jQuery('#boodstapped'), ['LazyLoadingApp']);
    }
    prm.add_endRequest(EndRequestHandler);
});

然后，当您尝试进行部分回发时，EndRequestHandler将再次引导应用程序。重要的是要删除以前的引导元素，以避免角度"已经引导"的错误。

单击此处了解更多信息。

虽然其他答案可能有效，但我发现最好的做法是尽量不要处于.net控件和角度控件的"混合"状态，这取决于两者之间的交互。

这一过程充其量是没有记录的。。。你最终会写很多代码来适应简单的事情。

我不建议长期执行以下操作，只建议将其作为临时/过渡解决方案，我知道这可能无法解决所有情况。。。。但请注意，你总是可以从dot.net方面攻击这个问题，如下所示，并重定向回你所在的页面…

      protected void cbChecked_My_DotNet_CallBack(object sender, EventArgs e)
        {
             DoDotNetStuff();
             if(NeedToSignalToAngular){
                   response.redirect(yourpage.aspx?yourparams=xxx)     
             }
         }
相关文章：