学习MVC项目在7天-第7天

• 下载Day_7.zip

介绍 快乐的一天。最后我们进入了“7天学习MVC项目”系列的最后阶段。我相信你已经享受了所有的日子，并从中学到一些东西。 请不要忘记在文章的最后留下你的评论/建议/反馈。 议程 最后一天是什么时间?实验室32 -制定计划 关于实验室32的演讲 实验33 -创建单页应用程序-第1部分-设置 领域是什么?关于33实验室的演讲 实验室35—创建单页面应用程序—第3部分—创建员工 接下来是什么?让我们计划 寻找解决方案的旅程 理解问题解决方案——常见的数据类型问题——那么复杂数据呢?解决方案-一个常见的数据格式标准问题- XML格式问题解决方案- JSON 回到我们35实验室的演讲 实验36 -创建单个页面应用程序-第4部分-批量上传结论从MVC 5开始 完整的系列 第1天第2天第3天第4天第5天第6天7天奖金第1天奖金第2天 我们很高兴地宣布，这篇文章现在可以从www.amazon.com和www.flipkart.com获得同样的纸质书 实验室32 -制定计划 这实际上不是一个与任何新功能相关的实验室。这个实验室只是为了让项目更加结构化和系统化。 步骤1 -创建解决方案文件夹 右键单击解决方案，选择“添加>>新解决方案文件夹”。 将文件夹命名为“视图和控制器”。 现在，重复上述步骤，创建另外三个类似的文件夹，分别叫做“Model”、“ViewModel”和“Data Access Layer” 步骤2 -创建数据访问层项目 右击数据访问层文件夹并创建一个名为“DataAccessLayer”的新类库项目。 步骤3 -创建业务层和业务实体项目 在模型文件夹中创建两个新的类库项目，分别称为“BusinessLayer”和“BusinessEntities”。 步骤4 -创建ViewModel项目 在ViewModel文件夹中创建一个新的项目类库项目，并将其命名为ViewModel。 步骤5 -添加引用 首先逐个右击每个项目。选择Add>>Reference，并选择如下引用。 对于DataAccessLayer，选择BusinessEntities 对于BusinessLayer，选择DataAccessLayer和BusinessEntities 对于MVC网络应用，选择BusinessLayer,BusinessEntities, ViewModel 对于businessentity System.ComponentModel.DataAnnotations 步骤6 -设置项目 将saleserpdale .cs从MVC项目中的DataAccessLayer文件夹复制到新创建的DataAccessLayer类库项目中。 从MVC (WebApplication1)项目中删除DataAccessLayer文件夹。 复制的员工。从MVC项目中的模型文件夹到新创建的BusinessEntities类库项目。 将EmployeeBusinessLayer.cs从theMVC项目中的Model文件夹复制到新创建的BusinessLayer类库项目中。 从MVC项目中删除模型文件夹。 将MVC项目中的ViewModels文件夹中的所有类复制到新创建的ViewModel类库项目中。 从MVC项目中删除ViewModels文件夹 移动MVC项目(WebApplication1)到“视图和控制器”解决方案文件夹。 步骤7 -建立项目 从菜单栏中选择Build>>Build Solution。 您将得到以下错误消息。 步骤8 -解决错误 添加系统。ViewModel项目的Web引用 使用Nuget manager并在DataAccessLayer和BusinessLayer项目中安装实体框架。(如果你对如何使用Nuget Manager感到困惑，我建议你看看第三天) 注意:业务层内部需要实体框架引用，因为业务层直接连接到数据访问层。作为一个合适的体系结构，业务层不应该直接连接到数据访问层。我们可以通过Repository模式来完成这一任务。存储库模式将完全超出本系列的讨论范围。 从MVC项目中删除EntityFramework。 右击MVC项目并选择“管理Nuget包”选项。 选择“管理Nuget软件包”对话框左侧的“已安装软件包”。 右边部分将显示之前安装的所有包。选择EntityFramework并单击uninstall。 步骤9 -建立解决方案 您将得到以下错误。 步骤10 -解决错误 现在我们在MVC项目中既没有SalesERPDAL引用，也没有实体框架引用。添加这些引用不是一个好的做法。作为一个最佳实践，控制器不应该直接连接到数据访问层。 1. 在DataAccessLayer项目中使用名为SetDatabase的静态方法创建一个名为DatabaseSettings的新类，如下所示。 隐藏,复制Code

using System.Data.Entity;
using WebApplication1.DataAccessLayer;
namespace DataAccessLayer
{
    public class DatabaseSettings
    {
        public static void SetDatabase()
        {
            Database.SetInitializer(new DropCreateDatabaseIfModelChanges<SalesERPDAL>());<saleserpdal>
        }
    }	
}
</saleserpdal>

2. 在BusinessLayer项目内部使用名为SetBusiness的静态方法创建一个名为BusinessSettings的新类，如下所示。 隐藏,复制代码

using DataAccessLayer;

namespace BusinessLayer
{
    public class BusinessSettings
    {
        public static void SetBusiness()
        {
            DatabaseSettings.SetDatabase();
        }
    }
}

3.从全局中删除两个错误的使用语句。asax和删除数据库。SetInitializer声明。调用BusinessSettings。设置业务功能如下。 隐藏,复制Code

using BusinessLayer;
.
.
.
BundleConfig.RegisterBundles(BundleTable.Bundles);
BusinessSettings.SetBusiness();

构建应用程序。构建会成功。 确保执行应用程序一次,☻ 关于实验室32的演讲 什么是解决方案文件夹? 解决方案文件夹只是逻辑文件夹。它们实际上不会在物理硬盘驱动器中创建。唯一的目的是使解决方案更加系统化。 实验33 -创建单页应用程序-第1部分-设置 现在，我们将不对现有的控制器和视图进行任何更改。我们将为这个实验室创建新的控制器和视图。 保持现有选项不变，以便在后期比较早期版本和单页版本，从而更好地了解它。 实现和理解Asp中的另一个概念。Net MVC称为区域。 正如我所说的，在这个实验室中，我们将从头开始创建新的控制器、视图和视图模型。 只有遵循的东西才会被重复使用 现有的业务层 现有数据访问层 现有的业务实体 身份验证和异常过滤器 FooterViewModel Footer.cshtml 步骤1 -创建一个新的区域 右键单击项目并选择Add>>Area。将弹出一个对话框。将其设置为SPA并选择ok。 它将在我们的项目中创建一个新的文件夹结构，如下所示。 显然，与该区域相关的模型文件夹是不需要的。删除它。 领域是什么? 区域只是在Asp中实现模块的一种方法。净MVC项目。 每个项目都由多个模块组成。例如:账户模块、客户关系模块、支付网关模块等。 在传统的应用程序开发风格中，我们通常使用“文件夹”来实现这一点。我们在单个项目中创建多个文件夹。每个文件夹代表一个模块。我们将各自模块的所有文件保存在各自的文件夹中。 现在，自定义文件夹将是一个大问题时，Asp。净MVC。 比如说在Asp中。Net MVC我们将使用简单的文件夹来实现模块。 现在DataAccessLayer, BusinessLayer, BusinessEntities和viewmodel不会产生任何问题。它们是简单类，因此可以保存在任何地方。 控制器-我们不能把它放在任何地方。它必须保存在Controller文件夹中。但这不是什么大问题，因为从MVC 4对控制器位置的限制被删除了。现在我们可以把它放在任何我们想要的地方。 视图——不幸的是，对于视图来说，这是不可能的。所有的视图必须放在“~/ views /ControllerName”或“~/ views /Shared”文件夹中。 这就是我们要描绘的区域。 步骤2 -创建所需的视图模型 在ViewModel类库项目中创建一个名为SPA的新文件夹，并创建一个名为MainViewModel的ViewModel，如下所示。 隐藏,复制Code

using WebApplication1.ViewModels;
namespace WebApplication1.ViewModels.SPA
{
    public class MainViewModel
    {
        public string UserName { get; set; }
        public FooterViewModel FooterData { get; set; }//New Property
    }
}

步骤3 -创建索引操作方法 在MainController中放入以下using语句。 隐藏,复制Code

using WebApplication1.ViewModels.SPA;
using OldViewModel=WebApplication1.ViewModels;

现在在MainController中创建一个名为Index的新操作方法，如下所示。 隐藏,复制Code

public ActionResult Index()
{
    MainViewModel v = new MainViewModel();
    v.UserName = User.Identity.Name;
    v.FooterData = new OldViewModel.FooterViewModel();
    v.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value
    v.FooterData.Year = DateTime.Now.Year.ToString();
    return View("Index", v);
}

正如你所看到的，一个名为OldViewModelis的别名被添加为WebApplication1。视图模型名称空间。现在我们不用写WebApplication1.ViewModels了。我们可以简单地编写OldViewModel.ClassName。 不指定别名将导致歧义错误。两个namesapces WebApplication1.ViewModels。水疗和WebApplication1。ViewModels有一些类似的类。 步骤4 -创建索引视图 创建与上述索引方法关联的视图，如下所示。 隐藏,复制Code

@using WebApplication1.ViewModels.SPA
@model MainViewModel
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Employee Single Page Application</title>
</head>
<body>
    <div style="text-align:right">
        Hello, @Model.UserName
        <a href="/Authentication/Logout">Logout</a>
    </div>
    <hr />
    <div id="DivOption">
       
    </div>
    @Html.Partial("Footer", Model.FooterData)
</body>
</html>

, 步骤5 -执行并测试应用程序 按F5并执行应用程序。完成登录过程并在主控制器中导航到索引操作。 关于33实验室的演讲 为什么控制器名称前必须有SPA关键字? 当我们向ASP中添加一个区域时。在asp.net MVC应用程序中，Visual Studio创建一个名为AreaName的文件arearegistr .cs，其中包含一个派生自AreaRegistration的类。该类定义AreaName属性和RegisterArea方法，后者为新区域注册路由信息。 在我们的例子中，你可以找到nameSpaArealRegistration.cs文件，它将位于" ~/Areas/Spa "文件夹中。SpaArealRegistration类的RegisterArea方法包含以下代码。 隐藏,复制Code

context.MapRoute(
                "SPA_default",
                "SPA/{controller}/{action}/{id}",
                new { action = "Index", id = UrlParameter.Optional }
            );

这就是为什么，当涉及到控制器时，我们把SPA关键字放在控制器名称之前 注册类中的注册区是如何被调用的? 开放的全球。asax文件。Application_Start的第一行如下所示。 隐藏,复制Code

AreaRegistration.RegisterAllAreas();

RegisterAllAreas方法查找应用程序域中派生自aregistration的所有类型，并调用它们的每个RegisterArea方法。 我们能在不使用SPA的情况下调用MainController操作吗? 让我们把这个问题简单化。 问题是这个URL能工作吗?“localhost: 8870 /主要指数” 答案是-是的。 AreaRegistration类创建新路由，但不会删除其他路由。在RouteConfig类中定义的路由仍然可以正常工作。如前所述，控制器位置没有限制。因此，它将工作，但输出不会正确显示，因为它将无法找到视图。我建议您执行一次应用程序并尝试它。 实验室34 -创建单个页面应用程序-第2部分显示员工 步骤1 -创建显示现有员工的ViewModel。 在ViewModel类库的SPA文件夹中创建新的ViewModel类EmployeeViewModel和EmployeeListViewModel，如下所示。 隐藏,复制Code

namespace WebApplication1.ViewModels.SPA
{
    public class EmployeeViewModel
    {
        public string EmployeeName { get; set; }
        public string Salary { get; set; }
        public string SalaryColor { get; set; }
    }
}

隐藏,复制Code

namespace WebApplication1.ViewModels.SPA
{
    public class EmployeeListViewModel
    {
        public List<employeeviewmodel> Employees { get; set; }
    }
}
</employeeviewmodel>

注意:这两个视图模型都是为非spa应用程序创建的ViewModel的精确副本。唯一的区别是这次BaseViewModel不是必需的。 步骤2 -创建员工名单索引 在MainController中创建名为EmployeeList的新操作方法，如下所示。 隐藏,收缩,复制Code

public ActionResult EmployeeList()
{
    EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();
    EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
    List<employee> employees = empBal.GetEmployees();

    List<employeeviewmodel> empViewModels = new List<employeeviewmodel>();

    foreach (Employee emp in employees)
    {
        EmployeeViewModel empViewModel = new EmployeeViewModel();
        empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName;
        empViewModel.Salary = emp.Salary.Value.ToString("C");
        if (emp.Salary > 15000)
        {
            empViewModel.SalaryColor = "yellow";
        }
        else
        {
            empViewModel.SalaryColor = "green";
        }
        empViewModels.Add(empViewModel);
    }
    employeeListViewModel.Employees = empViewModels;
    return View("EmployeeList", employeeListViewModel);
}
</employeeviewmodel></employeeviewmodel></employee>

注意:HeaderFooterFilter不是必需的。 步骤3 -创建AddNewLink PartialView 现在我们不能使用早期的AddNewLink部分视图，因为我们在那里的锚标签会导致完全刷新。我们的目标是创建一个“单一页面应用程序”，因此不应该有任何完全刷新。 创建一个名为AddNewLink的新的部分视图。cshtml在“~/Areas/Spa/Views/Main”文件夹中。 隐藏,复制Code

<a href="#" onclick="OpenAddNew();">Add New</a>
&nbsp;
&nbsp;
<a href="#" onclick="OpenBulkUpload();">BulkUpload</a>

步骤4 -创建AddNewLink操作方法 在MainController中创建一个名为GetAddNewLink的新操作方法，如下所示。 隐藏,复制Code

public ActionResult GetAddNewLink()
{
if (Convert.ToBoolean(Session["IsAdmin"]))
{
return PartialView("AddNewLink");
}
else
{
return new EmptyResult();
}
}

步骤5 -创建员工列表视图 在~/Areas/Spa/Views/Main文件夹中创建一个名为EmployeeList的新的部分视图。 隐藏,复制Code

@using WebApplication1.ViewModels.SPA
@model EmployeeListViewModel
<div>
    @{
        Html.RenderAction("GetAddNewLink");
    }

    <table border="1" id="EmployeeTable">
        <tr>
            <th>Employee Name</th>
            <th>Salary</th>
        </tr>
        @foreach (EmployeeViewModel item in Model.Employees)
        {
            <tr>

                <td>@item.EmployeeName</td>
                <td style="background-color:@item.SalaryColor">@item.Salary</td>
            </tr>
        }
    </table>
</div>

步骤6 -设置EmployeeList作为初始屏幕 用于此打开索引。cshtml位于" ~/Areas/Spa/Views/Main "文件夹中，在DivOptions div中包含雇员列表操作结果，如下所示。 隐藏,复制Code

...  
</div>
<hr />
<div id="DivOption">
   @Html.Action("EmployeeList","Main")
</div>
@Html.Partial("Footer"...

步骤7 -执行和测试 按F5并执行应用程序。 实验室35 -创建单页应用程序-第3部分-创建员工 步骤1 -创建AddNew ViewModels 在ViewModel类库项目的SPA文件夹中创建一个名为CreateEmployeeViewModel的新视图模型，如下所示。 隐藏,复制Code

namespace WebApplication1.ViewModels.SPA
{
    public class CreateEmployeeViewModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Salary { get; set; }
    }
}

步骤2 -创建AddNew动作方法 在MainController中放入以下using语句 隐藏,复制Code

using WebApplication1.Filters;

现在在MainController中创建AddNew动作方法，如下所示。 隐藏,复制Code

[AdminFilter]
public ActionResult AddNew()
{
    CreateEmployeeViewModel v = new CreateEmployeeViewModel();
    return PartialView("CreateEmployee", v);
}

步骤3 -创建CreateEmployee部分视图 在“~/Areas/Spa/Views/Main”文件夹中创建一个名为CreateEmployee的新的部分视图，如下所示。 隐藏,收缩,复制Code

@using WebApplication1.ViewModels.SPA
@model CreateEmployeeViewModel
<div>
    <table>
        <tr>
            <td>
                First Name:
            </td>
            <td>
                <input type="text" id="TxtFName" name="FirstName" value="@Model.FirstName" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("FirstName")
            </td>
        </tr>
        <tr>
            <td>
                Last Name:
            </td>
            <td>
                <input type="text" id="TxtLName" name="LastName" value="@Model.LastName" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("LastName")
            </td>
        </tr>
        <tr>
            <td>
                Salary:
            </td>
            <td>
                <input type="text" id="TxtSalary" name="Salary" value="@Model.Salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("Salary")
            </td>
        </tr>
        <tr>
            <td colspan="2">

                <input type="submit" name="BtnSubmit" value="Save Employee" onclick="SaveEmployee();" />
                <input type="submit" name="BtnSubmit" value="Cancel" onclick="CancelSave()"  />
                <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" />
            </td>
        </tr>
    </table>
</div>

步骤4 -包括jQuery UI 右击项目并选择“管理Nuget管理器”。 搜索“jQuery UI”。 安装jQuery UI。 它将向项目添加几个JavaScript (.js)和样式表(.css)文件。 步骤5-包括jQuery UI 开放”~ /区域/水疗中心/视图/主/索引。包括jQuery.js,jQueryUI.js等。综援。所有这些文件都是由Nuget manager作为jQuery UI包的一部分添加的。 隐藏,复制Code

<head>
<metaname="viewport"content="width=device-width"/>
<scriptsrc="~/Scripts/jquery-1.8.0.js"></script>
<scriptsrc="~/Scripts/jquery-ui-1.11.4.js"></script>
<title>Employee Single Page Application</title>
<linkhref="~/Content/themes/base/all.css"rel="stylesheet"/>
...

步骤6 -实现OpenAddNew函数。 在“~/Areas/Spa/Views/Main/Index”中创建一个新的JavaScript函数OpenAddNew。cshtml”,如下所示。 隐藏,复制Code

<script>
    function OpenAddNew() {
        $.get("/SPA/Main/AddNew").then
            (
                function (r) {
                    $("<div id='DivCreateEmployee'></div>").html(r).
                        dialog({
                             'auto', height: 'auto', modal: true, title: "Create New Employee",
                            close: function () {
                                $('#DivCreateEmployee').remove();
                            }
                        });
                }
            );
    }
</script>

步骤7 -执行和测试 按F5并执行应用程序。 完成登录过程并在MainController中导航到索引操作。最后点击添加新超链接。 步骤8 -创建ResetForm函数 CreateEmployee开放。cshtml视图。在顶部创建ResetForm函数，如下所示。 隐藏,复制Code

@model CreateEmployeeViewModel
<script>
    function ResetForm() {
        document.getElementById('TxtFName').value = "";
        document.getElementById('TxtLName').value = "";
        document.getElementById('TxtSalary').value = "";
    }
</script>
<div>
    <table>
......
......
<input type="submit" name="BtnSubmit" value="Save Employee" onclick="SaveEmployee();" />
                <input type="submit" name="BtnSubmit" value="Cancel" onclick="CancelSave()" />
                <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" />
            </td>
        </tr>
......
……

步骤9 -创建CancelSave函数 CreateEmployee开放。cshtml视图。在顶部创建CancelSave函数，如下所示。 隐藏,复制Codedocument.getElementById(“TxtSalary”)。值= " "; ,,} ,,函数CancelSave () { ,,,,,,$ (' # DivCreateEmployee ') .dialog(“关闭”); ,,} 接下来是什么? 在继续执行步骤10之前，首先让我们了解下一步应该做什么。 最终用户单击Save Employee按钮。 控件中的值必须在客户端进行验证。 如果所有的值都是有效的，那么所有的值将被传输到服务器端。 必须在数据库中保存一个新的员工记录。 CreateEmployee对话框必须在此之后关闭 使用新值更新网格。 让我们计划 验证 对于验证，我们可以使用在项目的非spa版本中使用的相同的验证JavaScript代码。 保存员工 我们将创建一个MVC操作方法来保存employee并使用jQuery Ajax调用它。 从客户端到服务器端的数据传输 在早期，通过表单标记和提交按钮的帮助，可以轻松自动地处理这个问题。现在我们不能遵循这种方法，因为它会导致完全刷新。这次我们使用的是jQuery Ajax方式，这将让我们调用服务器端MVC动作方法而不需要fu页面刷新。 现在最重要的问题是，如果调用是手动的，数据将如何从JavaScript转移到MVC的动作方法。 寻找解决方案的旅程 理解这个问题 不管是JavaScript、。net还是其他任何技术，当你听到data这个词的时候，你首先想到的是什么? 它的变量。我们使用变量来临时保存数据，然后将其转储到数据库等持久性存储中。 在我们的例子中，我们使用两种技术——JavaScript和Asp。净MVC。 JavaScript是一种技术和Asp。Net MVC是另一个。 它们不能交换数据，或者简单地说，它们不能相互直接交换变量。 你可能会想，为什么他们不能? 它们都有变量。这两种技术都支持像float, int和char这样的数据类型，那么为什么它们不能直接互相发送变量呢? 答案是，他们有，但不一样。 . net中的整数数据类型不需要与其他技术中的整数数据类型相同。它们可能在大小上不同，也可能在其他属性上不同。 举一个实时的例子。 人有腿、手、眼睛等。 狗也有一些共同之处。 它们都一样吗?肯定没有。人的眼睛不能被狗的眼睛所替代，反之亦然。 同样，我们在所有的技术中都有变量的概念，但它们并不相同。再次重复同样的句子“。net中的整数不同于Java中的整数” 解决方案——一种常见的数据类型 行业在过去已经意识到这个问题，并认为数据类型实际上将是相同的。能够容纳任何数据的数据类型，我们称之为“最兼容的数据类型”，即字符串数据类型。 字符串数据类型结束了，它可以容纳任何东西。 我们可以将整型数据转换为字符串类型，并将其存储为字符串变量。 我们可以将浮动数据转换为字符串类型，并将其存储在字符串变量中。 … 任何数据都可以存储在string类型的变量中。 最终的解决方案是“每次需要从techny1发送到technolgoy2时，techny1将把数据转换成字符串类型并将其发送给techny2，因为100%保证techny2会理解字符串”。 现在这已经成为行业标准。 问题——复杂数据怎么样? 问题——复杂数据怎么样? 如果是，那么复杂数据呢? 如果我们想把员工的信息从一种技术转移到另一种技术呢? 在。net中，“类和对象”将用于表示复杂数据。 请看下面的示例 隐藏,e=new Employee(); e。EmpName = " Sukesh”; e。地址=“孟买”; 在JavaScript中，“JavaScript对象”将用于表示复杂数据。 请看下面的例子: 隐藏,复制Codevar e = { EmpName = " Sukesh ", 地址=“孟买” }; 将复杂数据从。net传递给其他技术，将类对象从。net传递给其他技术，将数据从JavaScript传递给其他技术，将JavaScript对象从JavaScript传递给其他技术。 这是不可能的。根据标准，首先我们将转换数据(。Net对象或JavaScript对象)的字符串类型，然后它将被发送。 解决方案-通用数据格式标准 就像以前一样，行业在这里确定了一个共同的标准。它说，应该有一个共同的，每个人都应该在发送数据之前表示自己的数据。这就是XML出现的原因。 每种技术都将其数据转换为XML格式的字符串，然后将其发送给另一种技术。就像字符串一样，XML也被认为是标准格式，因此每种技术都知道它。 在上面的c#代码中创建的雇员对象可以用XML格式表示，如下所示。 隐藏,Code<复印件;employee> & lt; / employee> & lt; employee> ,,,& lt; EmpName> Sukesh< / EmpName> ,,,& lt; Address> Mumbai< / Address> & lt; / Employee> 所以解决方案是，“技术1将把它的复杂数据转换成用XML格式表示的字符串数据，然后将字符串发送给技术2” 问题- XML格式问题 XML格式存在以下问题 1. XML格式增加了需要发送的总字符串的大小。 弦的尺寸越大，传递的时间就越长。这意味着更低的性能。 2. 第二个原因(也是主要原因)是XML很难创建和解析。 让我们再多谈谈。 如前所述，每种技术都必须基于数据创建XML字符串，它将发送该XML字符串。现在在c#中，在XML序列化器的帮助下，从。net对象创建XML字符串很容易。 但是JavaScript呢?在JavaScript中，我们既没有序列化的概念，也没有现成的XML操作库。因此，当从JavaScript向其他技术发送数据时，我们必须从JavaScript对象手动创建XML字符串。这是一个非常困难的任务。 当一个技术接收来自其他技术的数据，它总是使用XML格式的字符串。在c#中，在XML反序列化器的帮助下，解析XML字符串并从中创建。net对象将变得非常容易。 但是JavaScript呢?在JavaScript中，我们既没有XML反序列化器，也没有XML操作库，因此解析XML字符串在这里是一项非常困难的任务。 解决方案- JSON 为了解决XML格式的问题，业界提出了一种名为JSON的新格式。它是“JavaScript对象表示法”的缩写。 在上面c#代码中创建的Employee对象可以用JSON格式表示，如下所示。 隐藏,复制代码{ EmpName:“Sukesh”, 地址:“孟买” } 用JSON格式表示的数据看起来像JavaScript对象，因此这种格式被命名为JSON (JavaScript对象表示法) 正如您所看到的，与之前相比，它是轻量级的。 JavaScript中有现成的函数，用于将JavaScript对象转换为JSON格式的字符串，以及将JSON格式的字符串解析为JavaScript对象。 下面的代码解释了JSON字符串的创建和解析。 隐藏,复制Codevar e = { EmpName = " Sukesh ", 地址=“孟买” }; var EmployeeJsonString = JSON.stringify(e);//这个EmployeeJsonString将被发送到其他技术。 隐藏,复制Codevar EmployeeJsonString = GetFromOtherTechnology (); var e = JSON.parse (EmployeeJsonString); 警报(e.EmpName); 警报(e.Address); 关闭对话框 为了关闭CreateEmployee对话框，我们可以使用jQuery Api。 更新网格 网格更新可以通过两种方式中的一种来完成。 1. 与局部视图 为grid创建一个部分视图，就像我们为CreateEmployee功能所做的那样。 在EmployeeListview中创建一个带有id的div，并在其中显示部分视图(网格)。 当单击Save Employee按钮时，以部分视图结果的形式获得更新的网格，并用新的PartialViewResult替换网格div的内部HTML。 我相信到目前为止我们完成的任何实验都会给你们一个很好的想法关于如何实现这个，因此我保留这个作为一个任务。完成后，不要忘记对这次经历发表评论。 2. 与手工代码 在这种方法中，MVC action方法将返回单个EmployeeViewModel而不是EmployeeListViewModel，后者将在JavaScript端接收，并使用JavaScript将新行手动插入到grid手动中。(EmployeeViewModel将作为JSON字符串从MVC操作方法发送到JavaScript)。 回到我们的实验室 步骤10 -创建SaveEmployee操作 现在在MainController中创建一个名为SaveEmployee的新操作，如下所示。 隐藏,复制代码(AdminFilter) public ActionResult SaveEmployee(雇员emp) { ,,EmployeeBusinessLayer empBal = new EmployeeBusinessLayer(); ,,empBal.SaveEmployee (emp); EmployeeViewModel(); empViewModel。EmployeeName = emp.FirstName + " " + emp.LastName; empViewModel。工资= emp.Salary.Value.ToString(“C”); 如果(emp.Salary比;15000) { empViewModel。SalaryColor =“黄色”; } 其他的 { empViewModel。SalaryColor =“绿色”; ,,} 返回Json (empViewModel); } 现在我们只使用Json方法将Json字符串从MVC动作方法发送到JavaScript。 步骤11 -包括valid. js 包括在以前的实验室中创建的valid. js文件，如下所示。 隐藏,复制Code@using WebApplication1.ViewModels.SPA @ model CreateEmployeeViewModel & lt;脚本src = " ~ /脚本/ Validations.js”祝辞& lt; / script> & lt; script> 函数ResetForm () { …… 步骤12 -创建SaveEmployee函数 CreateEmployee开放。cshtml视图。在顶部创建SaveEmployee函数，如下所示。 , 隐藏,收缩,复制代码… … 函数SaveEmployee () { 如果(IsValid ()) { var e = { FirstName: $ (' # TxtFName ') .val (), 姓:$ (' # TxtLName ') .val (), 年薪:$ (' # TxtSalary ') .val () }; $ . post(“/水疗中心/主/ SaveEmployee”,e),然后( 函数(r) { var newTr = $('<tr></tr>'); var nameTD = $('<td></td>'); var salaryTD = $('<td></td>'); nameTD.text (r.EmployeeName); salaryTD.text (r.Salary); salaryTD。css(“背景颜色”,r.SalaryColor); newTr.append (nameTD); newTr.append (salaryTD); $ (' # EmployeeTable ') .append (newTr); $ (' # DivCreateEmployee ') .dialog(“关闭”); } ); } } & lt; / script> , 步骤13 -执行和测试 按F5并执行应用程序。 关于35实验室的演讲 JSON方法做什么? 它将返回JSONResult。 JSONResult是ActionResult的子元素之一。 在第六天，我们谈到了MVC请求周期。让它再来一次吧。 ExecuteResult在ActionResult类中被声明为抽象。ActionResult类的所有子类都以自己的方式定义它。在第一天我们谈到了ViewResult。在ViewResult类中，ExecuteResult方法将执行以下操作。 它将创建ViewPageActivator类的对象。 它将选择正确的ViewEngine并将ViewPageActivator对象作为参数传递给ViewEngine的构造函数。创建View类的对象 它将调用View的RenderView方法，该方法将呈现最终的HTML输出响应。 对于JsonResult, ExecuteResult方法将， 将响应内容类型设置为“Application/Json” 使用JavaScript Serializerit将传递的数据转换为JSON格式的字符串 将最终的JSON格式的字符串写入响应流。 实验36 -创建单页应用程序-第4部分-批量上传 步骤1 -创建SpaBulkUploadController 创建一个名为SpaBulkUploadController的新AsyncController 隐藏,复制Codenamespace WebApplication1.Areas.SPA.Controllers { ,,公共类SpaBulkUploadController: AsyncController ,,{ ,,} } 步骤2 -创建索引操作 在上面的控制器中创建一个名为Index的新操作方法，如下所示。 隐藏,复制代码(AdminFilter) 公共ActionResult指数() { ,,返回PartialView(“指数”); } 步骤3 -创建索引PartialView 在“~/Areas/Spa/Views/SpaBulkUpload”中创建一个新的名为Index的PartialView，如下所示。 隐藏,复制Code< div> ,,选择File: <input type=" File " name="fileUpload" id="MyFileUploader" value="" /> ,,<input type="submit" name="name" value="Upload" onclick="Upload();"/比; & lt; / div> 步骤4 -创建OpenBulkUpload方法 开放指数。cshtml在" ~/Areas/Spa/Views/Main "文件夹中创建一个JavaScript方法Index。cshtml如下。 隐藏,复制代码函数OpenBulkUpload() { ,,,,,,$ . get(" /水疗中心/ SpaBulkUpload指数”)不要犹豫 ,,,,,,,,( ,,,,,,,,,,函数(r) { ,,,,,,,,,,,,$ (" & lt; div id =“DivBulkUpload”祝辞& lt; / div>”). html (r)。对话框({ 'auto'， height: 'auto'， modal: true, title: "Create New Employee"， ,,,,,,,,,,,,,,关闭:function () { ,,,,,,,,,,,,,,,,$ (' # DivBulkUpload ') .remove (); ,,,,,,,,,,,,,,}}); ,,,,,,,,,,} ,,,,,,,,); ,,,,} ,,& lt; / script> & lt; / head> & lt; body> ,,& lt; div风格= " text-align:对"比; , 步骤5 -执行和测试 按F5并执行应用程序。完成登录过程 导航到主控制器的索引操作并单击BulkUpload链接。 步骤6 -创建FileUploadViewModel 在ViewModel类库的SPA文件夹中创建一个新的视图模型类FileUploadViewModel。 隐藏,复制Codenamespace WebApplication1.ViewModels.SPA { ,,公开课FileUploadViewModel ,,{ ,,,,,,获取HttpPostedFileBase文件;设置;} ,,} } 步骤7 -创建上传操作 在SpaBulkUploadController中创建一个名为Upload的新操作方法，如下所示。 隐藏,收缩,复制代码(AdminFilter) 公共异步Task< actionresult>上传(FileUploadViewModel模型) { int t1 = Thread.CurrentThread.ManagedThreadId; List< employee>员工=等待任务。工厂。 (() =比;GetEmployees(模型)); int t2 = Thread.CurrentThread.ManagedThreadId; bal = new EmployeeBusinessLayer(); bal.UploadEmployees(员工); vm = new EmployeeListViewModel(); vm。Employees = new List<employeeviewmodel>(); foreach (Employee中的Employee项) { EmployeeViewModel(); 维生素。EmployeeName =项目。FirstName + " " + item.LastName; 维生素。工资= item.Salary.Value.ToString(“C”); 如果项目。工资比;15000) { 维生素。SalaryColor =“黄色”; } 其他的 { 维生素。SalaryColor =“绿色”; } vm.Employees.Add(维生素); } 返回Json (vm); } 私人List< employee>GetEmployees (FileUploadViewModel模型) { List< employee>employees = new List<employee>(); StreamReader = new StreamReader(model.fileUpload.InputStream); csvreader。ReadLine();//假设第一行是header 而(! csvreader.EndOfStream) { var line = csvreader.ReadLine(); var值= line.Split('，');//值之间用逗号分隔 员工e =新员工(); e。FirstName =值[0]; e。LastName =值[1]; e。工资= int.Parse(值[2]); employees.Add (e); } 返回的员工; } & lt; / employee> & lt; / employee> & lt; / employee> & lt; / employeeviewmodel> & lt; / list< employee> & lt; / employee> & lt; / actionresult> 正如您所看到的，这次我们没有重定向，而是返回JsonResult。 步骤8 -创建上传功能 打开~/Areas/Spa/Views/SpaBulkUpload”文件夹中的索引视图。 并创建一个JavaScript函数Upload，如下所示。 隐藏,收缩,复制Code< script> 函数上传(){ 调试器; var fd = new FormData(); $('#MyFileUploader')[0]; fd。追加(“类”,file.files [0]); . ajax({美元 url:“/水疗中心/ SpaBulkUpload /上传”, 类型:“文章”, contentType:假的, processData:假的, 数据:fd })。然后(函数(e) { 调试器; for (i = 0;我& lt;e.Employees.length;我+ +) { var newTr = $('<tr></tr>'); var nameTD = $('<td></td>'); var salaryTD = $('<td></td>'); nameTD.text (e.Employees[我].EmployeeName); salaryTD.text (e.Employees[我].Salary); salaryTD。css(“背景颜色”,e.Employees[我].SalaryColor); newTr.append (nameTD); newTr.append (salaryTD); $ (' # EmployeeTable ') .append (newTr); } $ (' # DivBulkUpload ') .dialog(“关闭”); }); } & lt; / script> & lt; div> 选择文件:…… 步骤9 -执行和测试 为测试创建一个文本文件，如下所示。 按F5并执行应用程序。 结论 在这里我们完成了7天的旅程。我们使用Asp中的许多特性完成了一个简单的项目。净MVC。我们还详细讨论了许多理论概念。 很快我将发布另外两篇关于MVC的文章。它不会是系列的一部分，但它包括了在这7天作为项目的一部分没有涉及到的一些事情 第2条-学习MVC项目在7天-奖金天1 在这里，我们将再次创建一个SPA项目，但是要借助Web API和angular的帮助 第1条-学习MVC项目在7天-奖金天1 在这里，我们将谈谈一些MVC主题，其中没有涵盖在7天。 捆绑和缩小 Appliaction_Error 临时数据 创建自定义助手类 MVC单元测试 MVC依赖解析器 从MVC 5开始 如果你想开始与MVC 5开始与下面的视频学习MVC 5在2天。 如果你认为有更多的东西需要包括在内，请免费给我一个电子邮件差不多。 你的评论，邮件总是激励我们做更多。把你的想法和评论写在下面，或者发送邮件到SukeshMarla@Gmail.com 在Facebook, LinkedIn或twitter上联系我们，以保持最新的版本。 如需在孟买进行线下技术培训，请访问StepByStepSchools.Net 在线培训请访问JustCompile.com或www.Sukesh-Marla.com 本文转载于：http://www.diyabc.com/frontweb/news1757.html