asp UpdatePanel部分回发后如何维护AngularJS函数?

时间:2014-07-14 17:02:26

标签: c# asp.net angularjs angular-ui-bootstrap

在我的Web表单项目中,我有一个<asp:UpdatePanel>,并且在面板的<ContentTemplate>内我使用了几个单选按钮组。 UI Bootstrap示例。 当页面在UpdatePanel中执行部分回发时,我失去了Angular功能,我的Angular指令不再控制单选按钮组及其当前选定的按钮。

当然,我已经看过如何在endRequestHandlerpageLoad等部分回发后调用Javascript函数的示例,但我并不特别相信如何在一种使用Angular的方法。角度模块在页面顶部声明,如

<html lang="en" ng-app="NewHireFormsManagement">

这是我现在的代码的简短版本......

ASP.NET

<!-- Pull hidden data to set current radio button positions -->
<asp:Label ID="FormStatusCurrentStatusLabel" runat="server" Visible="false" />
<script type="text/javascript">

        // Bind client-side events before/after async page-load
    function pageLoad(sender, args) {
        // Set and Update Form Status
        var ITUpdateStatusRadios = function ($scope) {
            $scope.radioModel = '<%= this.FormStatusCurrentStatusLabel.Text %>';
        };
    }

</script>

<asp:UpdatePanel ID="ITadminStatusUpdatePanel" runat="server">
    <ContentTemplate>
        <div ng-controller="ITUpdateStatusRadios">
            <div class="btn-group">
                <label class="btn btn-default" ng-model="radioModel" btn-radio="'Attention_Needed'">
                    <i class='fa fa-times-circle'></i>&nbsp;Attention Needed
                </label>
                <label class="btn btn-default" ng-model="radioModel" btn-radio="'Pending'">
                    <i class='fa fa-paper-plane-o'></i>&nbsp;Pending
                </label>
                <label class="btn btn-default" ng-model="radioModel" btn-radio="'Complete'">
                    <i class='fa fa-check'></i>&nbsp;Complete
                </label>
            </div>
            <!-- Pull Results from this label on form submit -->
            <input type="hidden" runat="server" id="FormStatusNewStatusInput" value="{{radioModel || 'null'}}">
        </div>
        <asp:Button ID="ITStatusUpdateSubmitButton" runat="server" OnClick="AdminStatusUpdateSubmitButton_Click" CssClass="btn btn-success" Text="Update" />
    </ContentTemplate>
</asp:UpdatePanel>

C#Code-Behind

    // Page Load
    protected void Page_Load(object sender, EventArgs e)
    {
        ...SQL stored procedure query 

        this.FormStatusCurrentStatusLabel.Text = sqlITFormStatusDataReader["CompletionStatus"].ToString(); // Current Form Completion status
    }

    // Update Button
    protected void AdminStatusUpdateSubmitButton_Click(object sender, EventArgs e)
    {

        try
        {
            .. prepair sql connection
            updateformsqlCmd.Parameters.AddWithValue("@udAdminCompletionStatus", FormStatusNewStatusInput.Value);
            .. call stored procedure and update value
        }
        catch()
        {
        }
        finally
        {
        }
    }

基本上,初始无线电位置是根据从Page_Load上的数据库读取的数据动态设置的。何时更新&#39;按下按钮,调用另一个事件来更新同一个数据库表,然后理想地再次在Page_Load上实时重新设置当前无线电位置。只是因为Angular的JS功能正在丢失。

有什么想法吗?

0 个答案:

没有答案