七天学会ASP.NETMVC（七）——创建单页应用

   1:  using System.Data.Entity;

   2:  using WebApplication1.DataAccessLayer;

   3:  namespace DataAccessLayer

   4:  {

   5:      public class DatabaseSettings

   6:      {

   7:          public static void SetDatabase()

   8:          {

   9:              Database.SetInitializer(new DropCreateDatabaseIfModelChanges());

  10:          }

  11:      }

  12:  }

   1:  using DataAccessLayer;

   2:

   3:  namespace BusinessLayer

   4:  {

   5:      public class BusinessSettings

   6:      {

   7:          public static void SetBusiness()

   8:          {

   9:              DatabaseSettings.SetDatabase();

  10:          }

  11:      }

  12:  }

   1:  using BusinessLayer;

   2:  .

   3:  .

   4:  .

   5:  BundleConfig.RegisterBundles(BundleTable.Bundles);

   6:  BusinessSettings.SetBusiness();

   1:  using WebApplication1.ViewModels;

   2:  namespace WebApplication1.ViewModels.SPA

   3:  {

   4:      public class MainViewModel

   5:      {

   6:          public string UserName { get; set; }

   7:          public FooterViewModel FooterData { get; set; }//New Property

   8:      }

   9:  }

   1:  using WebApplication1.ViewModels.SPA;

   2:  using OldViewModel=WebApplication1.ViewModels;

   1:  public ActionResult Index()

   2:  {

   3:      MainViewModel v = new MainViewModel();

   4:      v.UserName = User.Identity.Name;

   5:      v.FooterData = new OldViewModel.FooterViewModel();

   6:      v.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value

   7:      v.FooterData.Year = DateTime.Now.Year.ToString();

   8:      return View("Index", v);

   9:  }

   1:  @using WebApplication1.ViewModels.SPA

   2:  @model MainViewModel

   3:  

   4:

   5:  

   6:  

   7:      

   8:      

   1:  context.MapRoute(

   2:                  "SPA_default",

   3:                  "SPA/{controller}/{action}/{id}",

   4:                  new { action = "Index", id = UrlParameter.Optional }

   5:              );

   1:  AreaRegistration.RegisterAllAreas();

   1:  namespace WebApplication1.ViewModels.SPA

   2:  {

   3:      public class EmployeeViewModel

   4:      {

   5:          public string EmployeeName { get; set; }

   6:          public string Salary { get; set; }

   7:          public string SalaryColor { get; set; }

   8:      }

   9:  }

   2:  {

   3:      public class EmployeeListViewModel

   4:      {

   5:          public List Employees { get; set; }

   6:      }

   7:  }

   8:  

   1:  public ActionResult EmployeeList()

   2:  {

   3:      EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();

   4:      EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();

   5:      List employees = empBal.GetEmployees();

   6:

   7:      List empViewModels = new List();

   8:

   9:      foreach (Employee emp in employees)

  10:      {

  11:          EmployeeViewModel empViewModel = new EmployeeViewModel();

  12:          empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName;

  13:          empViewModel.Salary = emp.Salary.Value.ToString("C");

  14:          if (emp.Salary > 15000)

  15:          {

  16:              empViewModel.SalaryColor = "yellow";

  17:          }

  18:          else

  19:          {

  20:              empViewModel.SalaryColor = "green";

  21:          }

  22:          empViewModels.Add(empViewModel);

  23:      }

  24:      employeeListViewModel.Employees = empViewModels;

  25:      return View("EmployeeList", employeeListViewModel);

  26:  }

  27:  

   1:  Add New

   1:  public ActionResult GetAddNewLink()

   2:  {

   3:  if (Convert.ToBoolean(Session["IsAdmin"]))

   4:  {

   5:  return PartialView("AddNewLink");

   6:  }

   7:  else

   8:  {

   9:  return new EmptyResult();

  10:  }

  11:  }

   1:  @using WebApplication1.ViewModels.SPA

   2:  @model EmployeeListViewModel

   3:  

   4:      @{

   5:          Html.RenderAction("GetAddNewLink");

   6:      }

   7:

   8:      

   9:          

  10:              Employee Name

   1:  ...

   2:  

7. 运行

实验 35——创建单页应用3—创建Employee

1. 创建AddNew ViewModels

在SPA中新建 ViewModel类库项的ViewModel，命名为“CreateEmployeeViewModel”。

   1:  namespace WebApplication1.ViewModels.SPA

   2:  {

   3:      public class CreateEmployeeViewModel

   4:      {

   5:          public string FirstName { get; set; }

   6:          public string LastName { get; set; }

   7:          public string Salary { get; set; }

   8:      }

   9:  }

2. 创建AddNew action 方法

在MainController中输入using 语句：

   1:  using WebApplication1.Filters;

在MainController 中创建AddNew action 方法：

   1:  [AdminFilter]

   2:  public ActionResult AddNew()

   3:  {

   4:      CreateEmployeeViewModel v = new CreateEmployeeViewModel();

   5:      return PartialView("CreateEmployee", v);

   6:  }

3. 创建 CreateEmployee 分部View

在“~/Areas/Spa/Views/Main”中创建新的分部View“CreateEmployee”

   1:  @using WebApplication1.ViewModels.SPA

   2:  @model CreateEmployeeViewModel

   3:  

   4:      
   5:          
   6:              
4. 添加 jQuery UI
右击项目选择“Manage Nuget Manager”。找到“jQuery UI”并安装。
项目中会自动添加.js和.css文件
5. 在项目中添加jQuery UI
打开“~/Areas/Spa/Views/Main/Index.cshtml”，添加jQuery.js,jQueryUI.js 及所有的.css文件的引用。这些文件会通过Nuget Manager添加到jQuery UI 包中。
   1:  
   2:  
   3:  
   4:  
   5:  
   6:  
   7:  ...
6. 实现 OpenAddNew 方法
在“~/Areas/Spa/Views/Main/Index.cshtml”中新建JavaScript方法“OpenAddNew”。
   1:  
7. 运行
完成登录步骤后导航到Index中，点击Add New 链接。
8. 创建 ResetForm 方法
在CreateEmployee.cshtml顶部，输入以下代码，创建ResetForm函数：
   1:  @model CreateEmployeeViewModel
   2:  
9. 创建 CancelSave 方法
在CreateEmployee.cshtml顶部，输入以下代码，创建CancelSave 函数：
   1:  document.getElementById('TxtSalary').value = "";
   2:      }
   3:      function CancelSave() {
   4:          $('#DivCreateEmployee').dialog('close');
   5:      }
在开始下一步骤之前，我们先来了解我们将实现的功能：
最终用户点击保存按钮
输入值必须在客户端完成验证
会将合法值传到服务器端
新Employee记录必须保存到数据库中
CreateEmployee对话框使用完成之后必须关闭
插入新值后，需要更新表格。
为了实现三大功能，先确定一些实现计划：
1.验证
验证功能可以使用之前项目的验证代码。
2.保存功能
我们会创建新的MVC action 方法实现保存Employee，并使用jQuery Ajax调用
3. 服务器端与客户端进行数据通信
在之前的实验中，使用Form标签和提交按钮来辅助完成的，现在由于使用这两种功能会导致全局刷新，因此我们将使用jQuery Ajax方法来替代Form标签和提交按钮。
寻求解决方案
1. 理解问题
大家会疑惑JavaScript和Asp.NET 是两种技术，如何进行数据交互？
解决方案： 通用数据类型
由于这两种技术都支持如int，float等等数据类型，尽管他们的存储方式，大小不同，但是在行业总有一种数据类型能够处理任何数据，称之为最兼容数据类型即字符串类型。
通用的解决方案就是将所有数据转换为字符串类型，因为无论哪种技术都支持且能理解字符串类型的数据。
 
问题：复杂数据该怎么传递？
.net中的复杂数据通常指的是类和对象，这一类数据，.net与其他技术传递复杂数据就意味着传类对象的数据，从JavaScript给其他技术传的复杂类型数据就是JavaScript对象。因此是不可能直接传递的，因此我们需要将对象类型的数据转换为标准的字符串类型，然后再发送。
解决方案—标准的通用数据格式
可以使用XML定义一种通用的数据格式，因为每种技术都需要将数据转换为XML格式的字符串，来与其他技术通信，跟字符串类型一样，XML是每种技术都会考虑的一种标准格式。
如下，用C#创建的Employee对象，可以用XML 表示为：
   1:  
   2:        Sukesh
   3:        
Mumbai
   4:  
因此可选的解决方案就是，将技术1中的复杂数据转换为XML格式的字符串，然再发送给技术2.
然而使用XML格式可能会导致数据占用的字节数太多，不易发送。数据SiZE越大意味着性能越低效。还有就是XML的创建和解析比较困难。
为了处理XML创建和解析的问题，使用JSON格式，全称“JavaScript Object Notation”。
C#创建的Employee对象用JSON表示：
   1:  {
   2:    EmpName: "Sukesh",
   3:    Address: "Mumbai"
   4:  }
JSON数据是相对轻量级的数据类型，且JAVASCRIPT提供转换和解析JSON格式的功能函数。
   1:  var e={
   2:  EmpName= “Sukesh”,
   3:  Address= “Mumbai”
   4:  };
   5:  var EmployeeJsonString = JSON.stringify(e);//This EmployeeJsonString will be send to other technologies.
   1:  var EmployeeJsonString=GetFromOtherTechnology();
   2:  var e=JSON.parse(EmployeeJsonString);
   3:  alert(e.EmpName);
   4:  alert(e.Address);
数据传输的问题解决了，让我们继续进行实验。
10. 创建 SaveEmployee action
在MainController中创建action，如下：
   1:  [AdminFilter]
   2:  public ActionResult SaveEmployee(Employee emp)
   3:  {
   4:      EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
   5:      empBal.SaveEmployee(emp);
   6:
   7:  EmployeeViewModel empViewModel = new EmployeeViewModel();
   8:  empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName;
   9:  empViewModel.Salary = emp.Salary.Value.ToString("C");
  10:  if (emp.Salary > 15000)
  11:  {
  12:  empViewModel.SalaryColor = "yellow";
  13:  }
  14:  else
  15:  {
  16:  empViewModel.SalaryColor = "green";
  17:      }
  18:  return Json(empViewModel);
  19:  }
上述代码中，使用Json方法在MVC action方法到JavaScript之间传Json字符串。
11. 添加 Validation.js 引用
   1:  @using WebApplication1.ViewModels.SPA
   2:  @model CreateEmployeeViewModel
   3:  
12. 创建 SaveEmployee 方法
在CreateEmployee.cshtml View中，创建 SaveEmployee方法：
   1:  ...
   2:  ...
   3:
   4:      function SaveEmployee() {
   5:          if (IsValid()) {
   6:              var e =
   7:                  {
   8:                      FirstName: $('#TxtFName').val(),
   9:                      LastName: $('#TxtLName').val(),
  10:                      Salary: $('#TxtSalary').val()
  11:                  };
  12:              $.post("/SPA/Main/SaveEmployee",e).then(
  13:                  function (r) {
  14:                      var newTr = $('
');
  15:                      var nameTD = $('
');
  16:                      var salaryTD = $('
');
  17:
  18:                      nameTD.text(r.EmployeeName);
  19:                      salaryTD.text(r.Salary);
  20:
  21:                      salaryTD.css("background-color", r.SalaryColor);
  22:
  23:                      newTr.append(nameTD);
  24:                      newTr.append(salaryTD);
  25:
  26:                      $('#EmployeeTable').append(newTr);
  27:                      $('#DivCreateEmployee').dialog('close');
  28:                  }
  29:                  );
  30:          }
  31:      }
  32:  
13. 运行
关于实验35
JSON 方法的作用是什么？
返回JSONResult,JSONResult 是ActionResult 的子类。在第六篇博客中讲过MVC的请求周期。
ExecuteResult是ActionResult中声明的抽象方法，ActionResult所有的子类都定义了该方法。在第一篇博客中我们已经讲过ViewResult 的ExecuteResult方法实现的功能，有什么不理解的可以翻看第一篇博客。
实验36——创建单页应用—4—批量上传
1. 创建SpaBulkUploadController
创建新的AsyncController“ SpaBulkUploadController”
   1:  namespace WebApplication1.Areas.SPA.Controllers
   2:  {
   3:      public class SpaBulkUploadController : AsyncController
   4:      {
   5:      }
   6:  }
2. 创建Index Action
在步骤1中的Controller中创建新的Index Action 方法,如下：
   1:  [AdminFilter]
   2:  public ActionResult Index()
   3:  {
   4:      return PartialView("Index");
   5:  }
3. 创建Index 分部View
在“~/Areas/Spa/Views/SpaBulkUpload”中创建 Index分部View
   1:  
   2:      Select File : 
   3:      
   4:  
4. 创建 OpenBulkUpload  方法
打开“~/Areas/Spa/Views/Main/Index.cshtml”文件，新建JavaScript 方法OpenBulkUpload
   1:  function OpenBulkUpload() {
   2:              $.get("/SPA/SpaBulkUpload/Index").then
   3:                  (
   4:                  function (r) {
   5:       $("").html(r).dialog({ width: 'auto', height: 'auto', modal: true, title: "Create New Employee",
   6:                              close: function () {
   7:                                  $('#DivBulkUpload').remove();
   8:                              } });
   9:                      }
  10:                  );
  11:          }
  12:      
  13:  
  14:  
  15:      
5. 运行
6. 新建FileUploadViewModel
在ViewModel SPA文件夹中新建View Model”FileUploadViewModel”。
   1:  namespace WebApplication1.ViewModels.SPA
   2:  {
   3:      public class FileUploadViewModel
   4:      {
   5:          public HttpPostedFileBase fileUpload { get; set; }
   6:      }
   7:  }
7. 创建Upload Action
   1:  [AdminFilter]
   2:  public async Task Upload(FileUploadViewModel model)
   3:  {
   4:      int t1 = Thread.CurrentThread.ManagedThreadId;
   5:      List employees = await Task.Factory.StartNew>
   6:          (() => GetEmployees(model));
   7:      int t2 = Thread.CurrentThread.ManagedThreadId;
   8:      EmployeeBusinessLayer bal = new EmployeeBusinessLayer();
   9:      bal.UploadEmployees(employees);
  10:      EmployeeListViewModel vm = new EmployeeListViewModel();
  11:      vm.Employees = new List();
  12:      foreach (Employee item in employees)
  13:      {
  14:          EmployeeViewModel evm = new EmployeeViewModel();
  15:          evm.EmployeeName = item.FirstName + " " + item.LastName;
  16:          evm.Salary = item.Salary.Value.ToString("C");
  17:          if (item.Salary > 15000)
  18:          {
  19:              evm.SalaryColor = "yellow";
  20:          }
  21:          else
  22:          {
  23:              evm.SalaryColor = "green";
  24:          }
  25:          vm.Employees.Add(evm);
  26:      }
  27:      return Json(vm);
  28:  }
  29:
  30:  private List GetEmployees(FileUploadViewModel model)
  31:  {
  32:      List employees = new List();
  33:      StreamReader csvreader = new StreamReader(model.fileUpload.InputStream);
  34:      csvreader.ReadLine();// Assuming first line is header
  35:      while (!csvreader.EndOfStream)
  36:      {
  37:          var line = csvreader.ReadLine();
  38:          var values = line.Split(',');//Values are comma separated
  39:          Employee e = new Employee();
  40:          e.FirstName = values[0];
  41:          e.LastName = values[1];
  42:          e.Salary = int.Parse(values[2]);
  43:          employees.Add(e);
  44:      }
  45:      return employees;
  46:  }
  47:  
8. 创建Upload 函数
打开”~/Areas/Spa/Views/SpaBulkUpload”的Index View。创建JavaScript函数，命名为“Upload”
   1:  
9. 运行
总结
七天学会MVC 就到这里结束了，谢谢大家的支持，希望大家都能够掌握所讲述的MVC知识，希望都能够进步！
原文链接：http://www.codeproject.com/Articles/1010152/Learn-MVC-Project-in-Days-Day


            分享标题：七天学会ASP.NETMVC（七）——创建单页应用            

            本文链接：http://cxhlcq.com/article/jghjhs.html

    
其他资讯
    

        

                Python全部注释的方法-创新互联
            

                java仿Servlet生成验证码实例详解-创新互联
            

                win7为什么不能启动python-创新互联
            

                notepad++指的是什么软件-创新互联
            

                php数组怎么转js数组对象-创新互联
            
    

    

        

            

                

                    
网站制作
                    重庆网站制作成都网站制作成都网站制作成都网站制作成都网站制作网站制作报价                
                

                    
企业服务
                    成都网站维护成都免费建站软文发布平台友情链接购买网站快速收录一元广告                
                

                    
网站建设
                    专业网站建设医药医疗网站建设方案响应式网站建设公司三台网站建设网站建设公司物流公司网站建设方案                
                

                    
服务器托管
                    棕树服务器托管绵阳机房租用绵阳机房托管机柜租用温江服务器托管光华服务器托管                
            
        
        

            
全国免费咨询:
            400-028-6601
            
业务咨询：028-86922220 / 13518219792
            
节假值班：18980820575 / 13518219792
            
联系地址：成都市太升南路288号锦天国际A幢1002号
        
    
    

        

            
Copyright © 成都创新互联科技有限公司重庆分公司  渝ICP备2021005571号
            
        
    
    

        

            友情链接:：
            成都网站建设
            重庆网站建设
            四川网站建设
            重庆建设网站
            移动服务器托管
            成都服务器托管
            云服务器
            广告设计制作
            重庆网页设计
            重庆做网站
            重庆网站制作
            重庆网站建设
            重庆网站公司
            渝中网站制作
            重庆网站设计
        
    

    

        

            
                
                在线咨询
            
        
        

            
                
                电话咨询
            
        
        

            
                
                QQ咨询
            
        
        

            
                
                预约顾问
            
        
    

    

        

            
                
                
在线咨询
            
        
    
    

        
微信咨询
        

    
    

        
电话咨询
        

            
028-86922220（工作日）
            
18980820575（7×24）
        
    
    

        

            
                
提交需求
            
        
    
    

        

            
                
返回顶部
            
        
    
   7:                  First Name:
   8: