ASP.Net、SQL Server 2016、AnqularJS材料

Question

我一直在为我公司的工作场所创建一个人力资源管理/员工门户。虽然我已经能够完成用户界面和简单的编码，但我现在已经进入了一些对我来说未知的领域。

正如标题所说，我在代码后面使用了带有C#的ASP.net，将SQL作为我的数据库，并为一些用户界面和主体元素提供了AngularJS材料。这就引出了我的第一个问题。我的员工门户有一个“休假”选项卡。此选项卡允许用户轻松查看过去、当前和将来的请求。它还有一个允许他们轻松提交新请求的部分。一旦员工在请求表单中输入数据并单击submit，就会出现一个对话框，解释公司政策。阅读后，员工可以选择单击cancel或submit。这才是我真正苦苦挣扎的地方。我很难弄清楚，当员工点击“提交”时，对话框如何通过ASP代码触发实际的提交。

所以我的思考过程是这样的

AngularJS“提交”对话框->隐藏的ASP:按钮->后台代码将信息发送到AngularJS->页面刷新表格以显示新的请求。

我已经能够使用NG-Bind在"submit“上获得一个标签来更新，但我不确定如何在asp:button上触发一个click事件。

我遇到的第二个问题是页面使用了来自Angular材料的自定义元素。当我试图在后台为实际的提交构建代码时，它总是给我错误，即该名称在当前上下文中不存在。我想这是由于大多数元素是诗歌等。你有什么想法来实现这一点吗？

这是我的代码说明的一个分解，html只用于“休假”选项卡。

​

// 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;
    }
});

// This code is only for the 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 the Submit button below I agree to have Wackerli Auto withhold the number of days and amount paid taken before accrual from my last payroll check upon my leaving the company before vacation time has been accrued according to our company vacation policy.')
          .ariaLabel('Lucky day')
          .targetEvent(ev)
          .ok('Submit')
          .cancel('Cancel');

    $mdDialog.show(confirm).then (function() {
        $scope.status = 'Congrats it worked!.';
    },
    function() {
        $scope.status1 = 'Your request was not submitted. Please try again or contact the HR manager for assistance.';
    });
  };


  function DialogController($scope, $mdDialog) {
    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };

    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    };
  }
    // This section is for the benefits and employee form tabs
 $scope.doPrimaryAction = function (event) {
        $mdDialog.show(
          $mdDialog.alert()
            .title('Primary Action')
            .textContent('Primary actions can be used for one 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 be used for one click actions')
            .ariaLabel('Secondary click demo')
            .ok('Neat!')
            .targetEvent(event)
        );
    };

});

   This is my 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 into log_table values('" + not sure what element + "', '" + not sure what element + "', '" + not sure what 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 at this 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] AS First_Name, [Last Name] AS Last_Name, [Date Request Made] AS Date_Request_Made, [Manager], [Start Date] AS Start_Date, [Type], [End Date] AS End_Date, [Return Date] AS Return_Date, [Status of Request] AS Status_of_Request FROM [time_off] WHERE ([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] AS Days_Taken, [Days Available] AS Days_Available, [Total Qualifying Days] AS Total_Qualifying_Days FROM [time_off] WHERE ([Username] = @Username) ORDER BY [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>

​

以下是Webpage Example Dialog Example网页的两个屏幕截图

Answer 1

为您的项目所做的架构选择是对您的强大约束。对于AngularJs或任何当代的ASP.NET应用程序来说，AngularJs Web Forms是一个令人讨厌的选择。我在ASP.NET网页表单应用程序后面编写了一些优雅、轻量级的代码。

如果您从头开始这个项目，请从头开始。这将是值得的，尽管解释一下为什么当面或通过电话更好的原因。

为了继续你当前的道路，这就是你需要做的。

1. 开始使用Ajax，很多Ajax
2. 您的Javascript/jQuery/AngularJs Ajax调用将开始调用.ashx处理程序、an.asmx网络服务或后台代码页面中的[WebMethod]。

可以，您可以使用Ajax在代码后台页面中调用方法：

    [WebMethod]
    public static string OnSubmit(string name, bool isGoing, string returnAddress)
    {
        return "it worked";
    }

不过，总的来说，您这样做是错误的，不应该使用AngularJs Forms作为ASP.NET应用程序的应用程序接口。