Angular JS with Asp：UpdatePanel

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMasterpage.master" AutoEventWireup="true" CodeBehind="ExamSet.aspx.cs" Inherits="demo.Admin.ExamSet" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="server"> 
<style> 
    #body-wrapper {background:none !important;} 
    #ctl00_menu_liProduct{background: transparent url(../images/bg-menu-item-green.png) right center no-repeat !important; color:#fff !important;} 
    #ctl00_menu_liProduct a{ color:#fff !important;} 
    #main-content tbody tr.alt-row{ background:none;} 
    .text-input{ width:100%;} 
    #main-content table td{ text-align:center} 
    #main-content table td span{ text-align:center; font-size:16px; font-weight:bold;} 
    #main-content tbody { border:none;} 
    #main-content table td, #main-content table th {padding: 8px;line-height: 1.3em;} 
    #main-content tbody tr { 
    background: none; 

} 

</style> 
<script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.js"></script> 
<script type="text/javascript"> 
    var app = angular.module('plunker', []); 

    app.controller('MainCtrl', function ($scope) { 

     $scope.total = function() { 
      var total = parseFloat($scope.txtAmount1 || 0) + parseFloat($scope.txtAmount2 || 0) + 
        parseFloat($scope.txtAmount3 || 0) + parseFloat($scope.txtAmount4 || 0) + 
        parseFloat($scope.txtAmount5 || 0); 
      return total || 0; 
     }; 
    }); 
</script> 
<script language="javascript" type="text/javascript"> 
    function CheckNumeric(e) { 

     if (window.event) // IE 
     { 
      if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) { 
       event.returnValue = false; 
       return false; 

      } 
     } 
     else { // Fire Fox 
      if ((e.which < 48 || e.which > 57) & e.which != 8) { 
       e.preventDefault(); 
       return false; 

      } 
     } 
    } 

    </script> 
<div ng-app="plunker"> 
<div ng-controller="MainCtrl"> 
<link href="../css/style_ExamSet.css" rel="stylesheet" type="text/css" /> 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 

    <div id="main-content" style=" height:1100px;"> 
     <div class="content-box" style=" height:100%;"> 
      <!-- Start Content Box --> 
      <div class="content-box-header"> 
       <h3 title="Add Sub Class"> 
        Add Examination Set 
       </h3> 
       <div class="clear"> 
       </div> 
      </div> 
      <!-- End .content-box-header --> 
      <div class="content-box-content"> 
       <asp:ScriptManager ID="ScriptManager1" runat="server"> 
       </asp:ScriptManager> 
      <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
      <ContentTemplate> 
      <div class="su-main"> 
<div class="full-main"> 
<table width="100%"> 
<tr> 
<td> 
<div class="select"> 

<div class="lab"> 
<label>Select Class</label> 
</div> 
<div class="lab"> 
<asp:DropDownList class="form-control" ID="ddlClass" runat="server" AutoPostBack="true" onselectedindexchanged="ddlClass_SelectedIndexChanged"></asp:DropDownList> 
</div> 
</div> 
</td> 
<td> 
<div class="select"> 
<div class="lab"> 
<label>Select Class</label> 
</div> 
<div class="lab"> 
<asp:DropDownList class="form-control" ID="ddlSection" runat="server"> 
<asp:ListItem Text="Select Section" Value="0" Selected></asp:ListItem> 
</asp:DropDownList> 
</div> 
</div> 
</td> 
</tr> 

</table> 

<table width="100%" class="table-2"> 
<tr> 
<th colspan="2">Select Subject</th> 
<th width="27%" colspan="2">Select Topic</th> 
<th width="33%" colspan="2">Select Concept</th> 
</tr> 
<tr> 
<td colspan="2"> 
<asp:ListBox ID="SubjectList" runat="server" AutoPostBack="True" Rows="12" 
     Width="224px" onselectedindexchanged="SubjectList_SelectedIndexChanged"></asp:ListBox> 
</td> 
<td colspan="2"> 
<asp:ListBox ID="TopicList" runat="server" AutoPostBack="True" Rows="12" 
     Width="224px" SelectionMode="Multiple" 
     onselectedindexchanged="TopicList_SelectedIndexChanged"></asp:ListBox> 
</td> 
<td colspan="2"> 
<asp:ListBox ID="ConceptList" runat="server" AutoPostBack="True" Rows="12" 
     Width="224px" SelectionMode="Multiple" 
     onselectedindexchanged="ConceptList_SelectedIndexChanged"></asp:ListBox> 
</td> 
</tr> 
<tr class="text-lavel"> 
<td>Level 1</td> 
<td width="17%">Level 2</td> 
<td>Level 3</td> 
<td>Level 4</td> 
<td>Level 5</td> 
<td>Total Available Questions</td> 

</tr> 
<tr class="text-lavel"> 
    <td><asp:Label ID="LblL_1" runat="server"></asp:Label></td> 
    <td width="17%"><asp:Label ID="LblL_2" runat="server"></asp:Label></td> 
    <td><asp:Label ID="LblL_3" runat="server"></asp:Label></td> 
    <td><asp:Label ID="LblL_4" runat="server"></asp:Label></td> 
    <td><asp:Label ID="LblL_5" runat="server"></asp:Label></td> 
    <td><asp:Label ID="LblTotalQuestion" runat="server"></asp:Label></td> 
</tr> 

<tr class="input-t" > 

    <td> <input type="text" placeholder="0" onkeypress="CheckNumeric(event);" xmlns:asp="#unknown" id="txtAmount1" ng-model='txtAmount1' /></td> 
    <td> <input type="text" placeholder="0" onkeypress="CheckNumeric(event);" xmlns:asp="#unknown" id="txtAmount2" ng-model='txtAmount2' /></td> 
    <td> <input type="text" placeholder="0" onkeypress="CheckNumeric(event);" xmlns:asp="#unknown" id="txtAmount3" ng-model='txtAmount3' /></td> 
    <td> <input type="text" placeholder="0" onkeypress="CheckNumeric(event);" xmlns:asp="#unknown" id="txtAmount4" ng-model='txtAmount4' /></td> 
    <td> <input type="text" placeholder="0" onkeypress="CheckNumeric(event);" xmlns:asp="#unknown" id="txtAmount5" ng-model='txtAmount5' /></td> 
    <td> <input type="text" disabled id="txtTotalFx" ng-value="total()" /></td> 

</tr> 

</table> 


<table width="100%" class="line-s"> 
<tr> 
<td>Please Enter No of Sets You Want To Create: <asp:TextBox ID="txtNoOfSet" 
     runat="server" onkeypress="CheckNumeric(event);" xmlns:asp="#unknown" 
     AutoPostBack="True" ontextchanged="txtNoOfSet_TextChanged"></asp:TextBox></td> 
</tr> 

</table> 

<table width="100%" class="table-3"> 

<tr> 
<th>Set 1</th> 
<th width="33%" colspan="2">Set 2</th> 
<th width="33%" colspan="2">Set 3</th> 
</tr> 

<tr> 
<td width="33%"> 
<asp:Repeater ID="Repeater1" runat="server" 
     onitemdatabound="Repeater1_ItemDataBound"> 
<HeaderTemplate> 
      <table cellpadding="2" cellspacing="2"> 
       <tr> 
        <th scope="col" style="width: 120px"> 
         S.no 
        </th> 
        <th scope="col" style="width: 100px"> 
         Level Name 
        </th> 
       </tr> 
     </HeaderTemplate> 
<ItemTemplate> 
<tr> 
    <td> 
     <asp:Label ID="lblLevelNo" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelId_ExamSet")%>'></asp:Label> 
    </td> 
    <td> 
     <asp:Label ID="lblLevelName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelName_ExamSet")%>'></asp:Label> 
     <asp:BulletedList ID="LstQuestions" BulletStyle="UpperRoman" runat="server"></asp:BulletedList> 
    </td> 
</tr> 

</ItemTemplate> 
<FooterTemplate> 
    </table> 
</FooterTemplate> 
</asp:Repeater> 

</td> 
<td colspan="2" width="33%" style="vertical-align:text-top;"> 
     <asp:Panel ID="PanelSetOption" runat="server" Visible="false"> 
     <asp:RadioButtonList ID="ShuffelingType_ExamSet" runat="server" AutoPostBack="true" 
       onselectedindexchanged="ShuffelingType_ExamSet_SelectedIndexChanged"> 
     <asp:ListItem Text="Question Shuffling" Value="1"></asp:ListItem> 
     <asp:ListItem Text="Level Shuffling" Value="2"></asp:ListItem> 
     <asp:ListItem Text="Both" Value="3"></asp:ListItem> 
     </asp:RadioButtonList> 
     </asp:Panel>  
     <asp:Panel ID="SetData_1" runat="server" Visible="false"> 
      <asp:Repeater ID="Repeater2" runat="server" 
       onitemdatabound="Repeater2_ItemDataBound"> 
       <HeaderTemplate> 
        <table cellpadding="2" cellspacing="2"> 
         <tr> 
          <th scope="col" style="width: 120px"> 
           S.no 
          </th> 
          <th scope="col" style="width: 100px"> 
           Level Name 
          </th> 
         </tr> 
       </HeaderTemplate> 
       <ItemTemplate> 
         <tr> 
          <td> 
           <asp:Label ID="lblLevelNo" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelId")%>' Visible="false"></asp:Label> 
            <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelId_ExamSet")%>'></asp:Label> 
          </td> 
          <td> 
           <asp:Label ID="lblLevelName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelName")%>'></asp:Label> 
           <asp:BulletedList ID="LstQuestions" BulletStyle="UpperRoman" runat="server"></asp:BulletedList> 
          </td> 
         </tr> 

       </ItemTemplate> 
       <FooterTemplate> 
        </table> 
       </FooterTemplate> 
      </asp:Repeater> 

     </asp:Panel> 
     <asp:Panel ID="SetData_2" runat="server" Visible="false"> 
      <asp:Repeater ID="Repeater3" runat="server"> 
       <HeaderTemplate> 
        <table cellpadding="2" cellspacing="2"> 
         <tr> 
          <th scope="col" style="width: 120px"> 
           S.no 
          </th> 
          <th scope="col" style="width: 100px"> 
           Level Name 
          </th> 
         </tr> 
       </HeaderTemplate> 
       <ItemTemplate> 
         <tr> 
          <td> 
           <asp:Label ID="lblLevelNo" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelId")%>' Visible="false"></asp:Label> 
            <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelId_ExamSet")%>'></asp:Label> 
          </td> 
          <td> 
           <asp:Label ID="lblLevelName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelName")%>'></asp:Label> 
           <asp:BulletedList ID="LstQuestions" BulletStyle="UpperRoman" runat="server"></asp:BulletedList> 
          </td> 
         </tr> 

       </ItemTemplate> 
       <FooterTemplate> 
        </table> 
       </FooterTemplate> 
      </asp:Repeater> 

     </asp:Panel> 
     <asp:Panel ID="SetData_3" runat="server" Visible="false"> 
      <asp:Repeater ID="Repeater4" runat="server" 
       onitemdatabound="Repeater4_ItemDataBound"> 
       <HeaderTemplate> 
        <table cellpadding="2" cellspacing="2"> 
         <tr> 
          <th scope="col" style="width: 120px"> 
           S.no 
          </th> 
          <th scope="col" style="width: 100px"> 
           Level Name 
          </th> 
         </tr> 
       </HeaderTemplate> 
       <ItemTemplate> 
         <tr> 
          <td> 
           <asp:Label ID="lblLevelNo" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelId_ExamSet")%>' Visible="false"></asp:Label> 
            <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelId_ExamSet")%>'></asp:Label> 
          </td> 
          <td> 
           <asp:Label ID="lblLevelName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LevelName_ExamSet")%>'></asp:Label> 
           <asp:BulletedList ID="LstQuestions" BulletStyle="UpperRoman" runat="server"></asp:BulletedList> 
          </td> 
         </tr> 

       </ItemTemplate> 
       <FooterTemplate> 
        </table> 
       </FooterTemplate> 
      </asp:Repeater> 

     </asp:Panel> 
</td> 
<td colspan="2" width="33%" style="vertical-align:text-top;"> 
     <asp:Panel ID="PanelSetOption1" runat="server" Visible="false"> 
     <asp:RadioButtonList ID="ShuffelingType_ExamSet1" runat="server"> 
     <asp:ListItem Text="Question Shuffling" Value="1"></asp:ListItem> 
     <asp:ListItem Text="Level Shuffling" Value="2"></asp:ListItem> 
     <asp:ListItem Text="Both" Value="3"></asp:ListItem> 
     </asp:RadioButtonList> 
     </asp:Panel>  
</td> 
</tr> 
</table> 
<table width="100%" class="line-s" style="text-align:center;"> 
<tr> 
<td><button class="button-btn">Submit</button></td> 
</tr> 
</table> 
</div> 
</div> 
</ContentTemplate> 
</asp:UpdatePanel> 
      </div> 
    </div> 
    </div> 
</div> 
</div> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="contentChild" runat="server"> 
</asp:Content>

這是我的源代碼。它第一次準確地工作，但在回發任何功能後，它被禁用。Angular JS with Asp：UpdatePanel

來源

2017-07-29 Prashant Upadhyaya

。你需要在post-back上註冊你的java腳本代碼。 – Ravikumar

當頁面回傳時，它會丟棄jquery處理程序。她需要嘗試這個

<script type="text/javascript"> 
    function CheckNumeric(e) { 

     if (window.event) // IE 
     { 
      if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) { 
       event.returnValue = false; 
       return false; 

      } 
     } 
     else { // Fire Fox 
      if ((e.which < 48 || e.which > 57) & e.which != 8) { 
       e.preventDefault(); 
       return false; 

      } 
     } 
    } 

    //Initial bind 
    $(document).ready(function() { 
     CheckNumeric(); 
    }); 

    //Re-bind for callbacks 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
     CheckNumeric(); 
    }); 

</script>

，因爲更新面板的更多信息here is Microsoft documentation

來源

2017-07-29 10:20:03 Ravikumar

Angular JS with Asp：UpdatePanel

回答

相關問題