在我的Web表单项目中,我有一个<asp:UpdatePanel>
,并且在面板的<ContentTemplate>
内我使用了几个单选按钮组。 UI Bootstrap示例。
当页面在UpdatePanel中执行部分回发时,我失去了Angular功能,我的Angular指令不再控制单选按钮组及其当前选定的按钮。
当然,我已经看过如何在endRequestHandler
和pageLoad
等部分回发后调用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> Attention Needed
</label>
<label class="btn btn-default" ng-model="radioModel" btn-radio="'Pending'">
<i class='fa fa-paper-plane-o'></i> Pending
</label>
<label class="btn btn-default" ng-model="radioModel" btn-radio="'Complete'">
<i class='fa fa-check'></i> 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功能正在丢失。
有什么想法吗?