Angular 基本部件 3

分享于 

6分钟阅读

Web开发

  繁體

对于延迟的每个人,我都很抱歉,因为我忙于重新定位到一个新城市,所以下一部分是 Angular。

直到现在,我们对 Angular 如何注入和如何从 angular控制器 传递视图中的数据有很好的理解。 让我们继续看看如何使用MVC从中访问数据。

我们将创建一个员工列表并以表格格式显示一个新的student,并创建一个新的。

  • 首先,让我们添加名为 student的新类,我们使用MVC模板将这个类添加到模型下,并添加少量属性。 below 代码段显示我的类现在看起来如何。

EmplClass

  • 接下来,让我们创建一个新的控制器,并将它的命名为 StudentController。 只需右键单击控制器文件夹选择 Add-> 控制器。 在 vs 中,我们将看到空控制器。读/写操作,只选择空控制器,在接下来的博客中,我们将看到如何使用这些模板。
  • 请将控制器命名为 StudentController 然后单击ok现在你可以available控制器,如果你会注意到,我们的解决方案中创建了一个新的学生文件夹:你会看到我们现在的解决方案是如何创建一个新

StudentController

  • 现在,大多数人都熟悉n 层架构,但我遵循相同的原则,但为了简化,我们不使用n 层架构,而是在前面使用 DataAccess 层,将使用相同的架构。 现在,让我们添加一个名为服务的文件夹,该文件夹将作为虚拟 DataAccesss 层运行。
  • 右击解决方案并选择 Add-> 新文件夹, 并将它的命名为 Service,让我们添加一个名为 StudentService的新文件。
  • 现在让我们在这个服务下添加一些方法,我们将有 2个方法作为 GetStudentList()CreateNewStudent()。 这就是现在的服务方式,因为这是一个虚拟服务,我们手工传递数据。

1104702/sudentservice.jpg

  • StudentController 中使用服务,我们创建了这个服务,我们将在 StudentControllerGetStudent()SaveStudentData() 中创建 2个操作。
  • 我们将添加一个新的方法 GetStudentList(),它将返回 jsondata,inside,我们将调用服务的GetStudentList() 方法。 为了保存数据,我们将有一个操作方法 SaveStudentData(),它将调用 CreateNewStudent() 方法,并返回 employeeid

StudentController1

  • 在的学生文件夹中,我们将显示 student 数据,添加名为 Index.cshtml的视图,添加右键单击学生文件夹 Add-> 视图。
  • 让我们从我们创建的angularController 中调用我们的操作,我们将使用 Angular的$http 服务。 我们将在 load 事件中调用相同的。 我们将把值分配给名为 StudentList的作用域变量。 使用 $ajax的开发人员类似于我们在Jquery中调用我们的API或者控制器,below 是代码。

agularController

  • 如果我们注意到类似 $ajax,它返回成功和错误,在错误中我们将设置 error= true,在索引视图中显示一个 div。 below 现在是我们的视图外观:

View

  • 让我们按F5查看结果。

Result

  • 很好,我们显示了数据,现在让我们移动新的记录。 首先,我们将添加一个名为的视图,右键单击学生文件夹 Add-> 视图 on。
  • 显示视图,还将添加一个用于渲染视图的操作。 below 是 action 方法。

AddAction

  • 现在,我们将在 Index 页面上有一个链接,将用户重定向到 AddStudent 视图。 在最后一行添加这里代码 @Html.ActionLink("Add Student","AddStudent") ,它将创建一个链接。 另外,让我们修改 AddStudent 视图以创建表单。

AddStudent

  • 现在让我们按F5查看结果。

View1

View2

  • 如果你注意到,我们已经使用了 ng-click,并且如果你想要的话,它是一个指令。 ng-model的指令,我们可以将数据从视图传递到控制器。 让我们修改视图并添加成功和错误div以在成功和错误时显示。

ModifiedView

  • 现在,让我们在 angular控制器 中编写代码来保存它。

ModifiedController

  • 现在让我们按F5并查看结果。 保存数据后,我们将得到如下结果:

AddStudentResult

现在我们已经完成了基本的任务。 如果你有任何疑问或者疑问,你可以在 santosh.yadav198613@gmail.com 邮箱给我发电子邮件。

我的下一个博客将进入高级级别,我们将使用 6.0和HTML页面而不是 Razor 视图。 我们还将使用 ui-router 覆盖路由。

继续阅读我的博客,了解更多信息,请分享。


PAR  angular  Basic  
相关文章