七天学会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://kswsj.cn/article/jghjhs.html

        
其他资讯
        

            

                    go语言使用js go语言使用场景
                

                    cdm怎么进入mysql cdm怎么进入文件夹
                

                    帝国cms互动 帝国cms演示
                

                    gis技术高吗 gis的前景
                

                    linux命令日期转换 linux 时间转换
                
        
    

    

        

            
                
                
在线咨询
            
        
        

            
                
                
拨打电话
            
        
    
   7:                  First Name:
   8: