c# - ASP.Net , SQL Server 2016, AnqularJS Material -

i have been working on creating hr management/employee portal company workplace. while have been able user interface , simple coding completed have moved unknown terrain me.

as title says using asp.net c# in the code behind sql being data base , angularjs material of user interface , body elements. brings me first item of issue. employee portal has "time off" tab. tab allows user see there past, current, , future requests. has section allows them submit new request. once employee inputs data the request form , clicks submit dialog appears explaining company policy. once read employee has option click cancel or submit. struggling. having hard time figuring out how when employee clicks "submit" dialog trigger actual submission through asp code behind.

so thought process follows

angularjs dialog "submit" ------> hidden asp:button ------> code behind sends information sql ----> page refreshes table show new request.

i have been able label update on "submit" using ng-bind i'm not sure how trigger click event on asp:button.

second problem have page using custom elements angular material. when tried build code behind actual submission kept giving me errors name not exist in current context. imagine due of elements being verse etc. thoughts on how achieve this?

here break down of code note html "time off tab"

// date time picker code  angular.module('date', ['ngmaterial', 'ngmessages']).controller('appctrl', function ($scope) {      $scope.mydate = new date();        $scope.mindate = new date(          $scope.mydate.getfullyear(),          $scope.mydate.getmonth() - 2,          $scope.mydate.getdate());        $scope.maxdate = new date(          $scope.mydate.getfullyear(),          $scope.mydate.getmonth() + 2,          $scope.mydate.getdate());        $scope.onlyweekendspredicate = function (date) {          var day = date.getday();          return day === 0 || day === 6;      }  });    // code mddialog confirm (employee reimbursement policy)  angular.module('date', ['ngmaterial'])    .controller('appctrl', function($scope, $mddialog) {    $scope.status = '  ';    $scope.customfullscreen = true;      $scope.showconfirm = function(ev) {            var confirm = $mddialog.confirm()            .title('reimbursement policy')            .textcontent('by clicking submit button below agree have wackerli auto withhold number of days , amount paid taken before accrual last payroll check upon leaving company before vacation time has been accrued according our company vacation policy.')            .arialabel('lucky day')            .targetevent(ev)            .ok('submit')            .cancel('cancel');        $mddialog.show(confirm).then (function() {          $scope.status = 'congrats worked!.';      },      function() {          $scope.status1 = 'your request not submitted. please try again or contact hr manager assistance.';      });    };        function dialogcontroller($scope, $mddialog) {      $scope.hide = function() {        $mddialog.hide();      };        $scope.cancel = function() {        $mddialog.cancel();      };        $scope.answer = function(answer) {        $mddialog.hide(answer);      };    }      // section benefits , employee form tabs   $scope.doprimaryaction = function (event) {          $mddialog.show(            $mddialog.alert()              .title('primary action')              .textcontent('primary actions can used 1 click actions')              .arialabel('primary click demo')              .ok('awesome!')              .targetevent(event)          );   };        $scope.dosecondaryaction = function (event) {          $mddialog.show(            $mddialog.alert()              .title('secondary action')              .textcontent('secondary actions can used 1 click actions')              .arialabel('secondary click demo')              .ok('neat!')              .targetevent(event)          );      };    });

   asp.net c#    using system;  using system.configuration;  using system.data;  using system.data.sqlclient;      namespace test  {      public partial class employee : system.web.ui.page      {                   protected void page_load(object sender, eventargs e)          {              sqlconnection con = new sqlconnection("data source=wackdbs\\wackhrdata;initial catalog=hrweb;persist security info=true;user id=sa;password=**********");    {              con.open();          }              if (!string.isnullorempty(request.querystring["wack"]))              {                  username.text = request.querystring["wack"];              }                else              {                  response.redirect("log.aspx");              }           }            protected void time_offclick(object sender, eventargs e)          {                       }            protected void button1_click(object sender, eventargs e)          {              sqlcommand cmd = new sqlcommand("insert log_table values('" + not sure element + "', '" + not sure element + "', '" + not sure element + "')", con);          }            protected void logout_click(object sender, eventargs e)          {              response.redirect("log.aspx");          }        }  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <asp:panel id="timeoff" class="tabcontent">      <div class="mdl-card">          <md-card>              <md-card-title>            <md-card-title-text>              <span class="md-headline">my requests</span>            </md-card-title-text>          </md-card-title>          <asp:gridview id="gridview1" runat="server" autogeneratecolumns="false" datasourceid="sqldatasource1" emptydatatext="you have no time off requests @ time" selectcommand="dbo.usernametime" selectcommandtype="storedprocedure">              <columns>                  <asp:boundfield datafield="first_name" headertext="first name" sortexpression="first_name" />                  <asp:boundfield datafield="last_name" headertext="last name" sortexpression="last_name" />                  <asp:boundfield datafield="date_request_made" headertext="date of request" sortexpression="date_request_made" />                  <asp:boundfield datafield="manager" headertext="manager" sortexpression="manager" />                  <asp:boundfield datafield="type" headertext="type" sortexpression="type" />                  <asp:boundfield datafield="start_date" headertext="start date" sortexpression="start_date" dataformatstring="{0:mm/dd/yy}" />                  <asp:boundfield datafield="end_date" headertext="end date" sortexpression="end_date" dataformatstring="{0:mm/dd/yy}"/>                  <asp:boundfield datafield="return_date" headertext="return date" sortexpression="return_date" dataformatstring="{0:mm/dd/yy}" />                  <asp:boundfield datafield="status_of_request" headertext="status" sortexpression="status_of_request" />              </columns>          </asp:gridview>              <asp:sqldatasource id="sqldatasource1" runat="server" connectionstring="<%$ connectionstrings:hrwebconnectionstring %>"  selectcommand="select [first name] first_name, [last name] last_name, [date request made] date_request_made, [manager], [start date] start_date, [type], [end date] end_date, [return date] return_date, [status of request] status_of_request [time_off] ([username] = @username)" >                  <selectparameters>                      <asp:querystringparameter name="username" querystringfield="wack" type="string" />                  </selectparameters>              </asp:sqldatasource>              <br />               <md-divider  ng-if="!$last"></md-divider>              <br />              <div>              <asp:gridview id="gridview2" runat="server" autogeneratecolumns="false"  datasourceid="timedetail">                  <columns>                      <asp:boundfield datafield="days_taken" headertext="days taken" sortexpression="days_taken"></asp:boundfield>                      <asp:boundfield datafield="days_available" headertext="days available" sortexpression="days_available"></asp:boundfield>                      <asp:boundfield datafield="total_qualifying_days" headertext="qualifying days" sortexpression="total_qualifying_days"></asp:boundfield>                  </columns>              </asp:gridview>              <asp:sqldatasource runat="server" id="timedetail" connectionstring='<%$ connectionstrings:hrwebconnectionstring %>' selectcommand="select top 1 [days taken] days_taken, [days available] days_available, [total qualifying days] total_qualifying_days [time_off] ([username] = @username) order [days taken] desc">                  <selectparameters>                      <asp:querystringparameter name="username" querystringfield="wack" type="string" />                  </selectparameters>              </asp:sqldatasource>          </div>         <br />       </md-card>        </div>      <div class="mdl-card-3">              <h3>request time off</h3>       <div id="actionable">      <form action="#">      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">      <input class="mdl-textfield__input" type="text" id="first"/>      <label class="mdl-textfield__label" for="sample3">first name...</label>            </div>      </form>      </div>        <div id="actionable2">       <form action="#">         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">          <input class="mdl-textfield__input" type="text" id="last"/>         <label class="mdl-textfield__label" for="sample3">last name...</label>            </div>              </form>            </div>       <div id="actionable3">         <form  action="#">           <md-content layout="row" layout-align="center center" id="md-content" ng-app="date">                <div ng-controller="appctrl" class="md-padding" id="popupcontainer" ng-cloak>       <md-input-container>            <label>start date</label>            <md-datepicker ng-model="mydate" name="datefield" md-min-date="mindate"              md-max-date="maxdate" id="srtdate"></md-datepicker>       </md-input-container>     <md-input-container>            <label>end date</label>            <md-datepicker ng-model="mydate2" name="datefield" md-min-date="mindate"              md-max-date="maxdate" id="enddate"></md-datepicker>       </md-input-container>                               <md-checkbox class="md-checkbox" ng-model="data.cb1" aria-label="vacation" id="chkbox">              vacation             </md-checkbox>               <md-checkbox class="md-checkbox" ng-model="data.cb2" aria-label="personal" id="chkbox" >              personal / unpaid             </md-checkbox>               <md-checkbox class="md-checkbox" ng-model="data.cb3" aria-label="sick" id="chkbox">              sick            </md-checkbox>                <md-input-container class="md-block" style="margin-left:18px">            <label>details of request....</label>            <textarea ng-model="user.biography" md-maxlength="200" rows="2" md-select-on-focus"></textarea>                </md-input-container>    <div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">      <md-button class="md-primary md-raised" ng-click="showconfirm($event)" >        submit      </md-button>   </div>          <span id=status visible="false" ng-bind = "status" onclick="button1"></span>       <asp:label runat="server" id=status1 visible="false"></asp:label>        <asp:button id="button1" runat="server" cssclass="hidden" onclick="button1_click"></asp:button>           </md-content>       </form>        </div>          </asp:panel>

here 2 screen shots of webpage webpage example dialog example

the architectural choices made project strong constraints against you. asp.net web forms nasty nasty choice angularjs or contemporary web app. , have made elegant, lightweight code behind asp.net web form apps.

if have started project scratch, start over. worth it, though explain reasons why better in person or on phone.

and continue current path need do.

1. start using ajax, alot of ajax
2. your javascript/jquery/angularjs ajax calls start calling .ashx handler, or an.asmx web service or [webmethod] in code behind page.

yes, can call methods in code behind page ajax:

    [webmethod]     public static string onsubmit(string name, bool isgoing, string returnaddress)     {         return "it worked";     } 

in general though, doing wrong , should not using asp.net web forms api angularjs app.