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

介绍 相信您在来这里之前已经顺利完成了第一天的工作。 第一天主要集中在 为什么MVC ?Asp。Net Web表单vs. Asp。Net mvc理解控制器和视图 注意: 如果你前一天还没有完成,请务必先完成。我们的目标是最终使用最佳实践和现代方法创建一个小型MVC项目。对于每一个下一个实验室,我们要么在之前的实验室中添加新的功能,要么使之前的实验室变得更好。 完整的系列 第1天第2天第3天第4天第5天第6天7天奖金第1天奖金第2天 我们很高兴地宣布,这篇文章现在可以从亚马逊和FlipKart获得同样的纸质书 第二天的日程 介绍 第二天的日程 将数据从控制器传递到视图 实验3 -使用视图数据 关于实验三的演讲 实验4 -使用ViewBag 关于实验四的演讲 ViewData和ViewBag的问题 实验5 -理解强类型视图 关于实验五的演讲 理解Asp中的视图模型。Net MVC 视图模型的解决方案 实验6 -实现视图模型 关于实验六的演讲 实验7 -检视与收集 关于实验七的演讲 结论 将数据从控制器传递到视图 在实验2中创建的视图非常静态。在现实场景中,它将显示一些动态数据。在下一个实验室中,我们将在视图中显示一些动态数据。 视图将从控制器获取模型形式的数据。 模型 在Asp。Net MVC模型代表业务数据。 实验3 -使用视图数据 ViewData是一个字典,它包含要在控制器和视图之间传递的数据。控制器将向这个字典添加项目,然后视图从中读取。让我们做一个演示。 步骤1 -创建模型类 在模型文件夹中创建一个名为Employee的新类,如下所示。 隐藏,复制Code

public class Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Salary { get; set; }
}

步骤2 -在控制器中获取模型 在GetView方法中创建Employee对象,如下所示 隐藏,复制Code

Employee emp = new Employee();
emp.FirstName = "Sukesh";
emp.LastName="Marla";
emp.Salary = 20000;

注意:确保将using语句放在顶部,否则我们必须将Employee类的完全限定名放在顶部。 隐藏,复制Code

using WebApplication1.Models;

步骤3 -创建ViewData并返回View 在viewdata中存储Employee对象,如下所示。 隐藏,复制Code

ViewData["Employee"] = emp;
return View("MyView");

步骤4 -在视图中显示员工数据 MyView.cshtml开放。 从ViewData检索雇员数据,并按如下方式显示。 隐藏,复制Code

<div>
    @{
        WebApplication1.Models.Employee emp=(WebApplication1.Models.Employee)
            ViewData["Employee"];
    }

<b>Employee Details </b><br />
    Employee Name : @emp.FirstName@emp.LastName <br />
    Employee Salary: @emp.Salary.ToString("C")
</div>

步骤5-测试输出 按F5并测试应用程序。 关于实验三的演讲 使用大括号(即“{”和“}”)和不使用大括号编写剃刀代码有什么区别? 在最后一个实验室@emp。可以用以下代码段替换FirstName。 隐藏,复制Code

@{
	Response.Write(emp.FirstName);
}

没有大括号的@只显示变量或表达式的值。 为什么需要铸造? ViewData在内部保存对象。每次向其添加新值时,都会将其装箱为对象类型。 因此,每次我们试图从中提取值时,都需要进行拆箱。 “@emp”是什么意思?FirstName @emp.LastName”? 它的意思是显示名字后跟空格,然后是姓。 我们可以用一个@关键字写同样的东西吗? 是的,那么它的语法是@(emp)。FirstName + " " + emp.LastName) 为什么在控制器中创建硬编码的Employee类? 只是为了演示。我们将实时从数据库或wcf或web服务或其他地方获得它。 那么数据库逻辑/数据访问层和业务层呢? 数据访问层是Asp中不明确的层之一。净MVC。它总是存在,但从未包含在MVC定义中。如前所述,业务层是模型的一部分。 完整的MVC结构 实验4 -使用ViewBag ViewBag只是ViewData的语法糖。ViewBag使用了c# 4.0的动态特性,并使ViewData动态。 ViewBag内部使用ViewData。 步骤1 -创建视图包 继续相同的实验3,并将步骤3替换为以下代码片段。 隐藏,复制Code

ViewBag.Employee = emp;
<span style="font-size: 9pt;">return View("MyView");</span>

步骤2 -在视图中显示EmployeeData 用以下代码片段更改步骤4。 隐藏,复制Code

@{
    WebApplication1.Models.Employee emp = (WebApplication1.Models.Employee)
        ViewBag.Employee;
}
Employee Details

Employee Name: @emp.FirstName @emp.LastName 

Employee Salary: @emp.Salary.ToString("C")

步骤3 -测试输出 按F5并测试应用程序 关于实验四的演讲 我们能传递ViewData并把它作为ViewBag吗? 是的,我们可以。反之亦然。正如我之前所说的,ViewBag只是ViewData的语法糖, ViewData和ViewBag的问题 ViewData和ViewBag是在控制器和视图之间传递值的好选项。但在实时项目中,使用任何一种都不是一个好习惯。让我们讨论一下使用ViewData和ViewBag的几个缺点。 性能问题 ViewData中的值是Object类型。在使用该值之前,我们必须对其进行类型转换以使其正确。它增加了额外的性能开销。 没有类型安全,没有编译时错误 如果我们尝试将值转换为错误的类型,或者在检索值时使用了错误的键,我们将得到运行时错误。作为一种良好的编程实践,错误应该在编译时处理。 没有合适的公司发送数据和接收数据之间的联系 作为一名开发人员,我个人认为这是一个主要问题。 在MVC中,控制器和视图之间是松散连接的。控制器完全不知道视图中发生了什么视图也不知道控制器中发生了什么。 从控制器中,我们可以传递一个或多个ViewData/ViewBag值。现在,当开发人员编写视图时,他/她必须记住来自控制器的内容。如果Controller developer与View developer不同,那么它会变得更加困难。完全没认识到。它会导致许多运行时问题和开发效率低下。 实验5 -理解强类型视图 ViewData和ViewBag出现这三个问题的原因是数据类型。ViewData中值的数据类型,即“Object”。 如果我们能够设置需要在控制器和视图之间传递的数据类型,问题就会得到解决,这就是强类型视图出现的原因。 让我们做一个演示。这一次,我们将把视图需求提升到下一个层次。如果工资超过15000,那么它将以黄色或绿色显示。 步骤1 -使视图成为强类型视图 在视图的顶部添加以下语句 隐藏,复制Code

@model WebApplication1.Models.Employee

以上陈述使我们的视图成为Employee类型的强类型视图。 步骤2 -显示数据 现在在视图内部输入@Model和Dot(.),在intellisense中你将得到Model (Employee)类的所有属性。 写下以下代码以显示数据 隐藏,复制Code

Employee Details

Employee Name : @Model.FirstName @Model.LastName 

@if(Model.Salary>15000)
{
<span style="background-color:yellow">
        Employee Salary: @Model.Salary.ToString("C")
</span>
}
else
{           
<span style="background-color:green">
       
        Employee Salary: @Model.Salary.ToString("C")
</span>
}

步骤3 -从控制器动作方法传递模型数据 将操作方法中的代码更改为以下。 隐藏,复制Code

Employee emp = new Employee();
emp.FirstName = "Sukesh";
emp.LastName="Marla";
emp.Salary = 20000;           
return View("MyView",emp);

步骤4 -测试输出 关于实验五的演讲 是否需要每次在视图中输入完全限定的类名(namesnamespace . classname) ? 不,我们可以用using语句。 隐藏,复制Code

@using WebApplication1.Models
@model Employee

是必须让视图始终是强类型视图还是有时使用ViewData或ViewBag ? 最佳实践总是使视图成为强类型视图。 我们能使我们的视图成为一个强类型视图,包含多个模型吗? 不,我们不能。在实时项目中,我们经常会在想要在同一个视图中显示多个模型的时候结束。这个需求的解决方案将在下次实验室讨论。 理解Asp中的视图模型。Net MVC 在Lab 5中,我们违反了MVC原则。根据MVC, V即视图应该是纯UI。它不应该包含任何逻辑。我们做了以下三件完全违背MVC架构规则的事情。 附加名和姓并显示为全名-逻辑显示工资与货币-逻辑显示工资在不同的颜色根据值。简单地说,根据某个值改变HTML元素的外观。-逻辑 除了这三个问题,还有一点值得讨论。 假设我们想在视图中显示多种类型的数据。 示例—显示当前登录的用户名和员工数据 我们可以通过以下方式之一来实现这一点。 向Employee类添加用户名属性——每次我们想要在视图中显示新数据时,向Employee类添加新属性似乎是不合逻辑的。这个新属性可能与Employee相关,也可能与Employee无关。它也违反了坚实原则的SRP。使用ViewBag或ViewData——我们已经讨论了使用这种方法的问题。 视图模型的解决方案 ViewModel是Asp中未指明的层之一。净MVC应用程序。它适合于模型和视图之间,充当视图的数据容器 模型和视图模型的区别? 模型是特定于业务的数据。它将基于业务和数据库结构创建。ViewModel是视图特定的数据。它将基于视图创建。 它到底是如何工作的? 这很简单。 控制器处理用户交互逻辑,或者简单地说,处理用户的请求。控制器获得一个或多个模型数据。控制器将决定哪个视图最适合作为正确请求的响应。控制器将通过ViewData/ViewBag/Stongly类型视图将ViewModel数据传递给视图。控制器会返回视图。 这里View和ViewModel是如何连接的? 视图将是ViewModel类型的强类型视图。 模型和ViewModel将如何连接? 模型和视图模型应该彼此独立。控制器将基于一个或多个模型对象创建和初始化ViewModel对象。 让我们做一个小实验室来更好地了解它。 实验6 -实现视图模型 步骤1 -创建文件夹 在项目中创建一个名为ViewModels的新文件夹 步骤2 -创建EmployeeViewModel 为了做到这一点,让我们列出视图上的所有需求 显示金额之前要加上名和姓,货币显示工资要用d表示不同的颜色(基于值)当前用户名也应该显示在视图中 在ViewModels文件夹中创建一个名为employeeviewmodel新类,如下所示。 隐藏,复制Code

public class EmployeeViewModel
{
    public string EmployeeName { get; set; }
    public string Salary { get; set; }
    public string SalaryColor { get; set; }
    public string UserName{get;set;}
}

请注意,在视图模型类中,FirstName和LastName属性被替换为一个名为EmployeeName的属性,Salary属性的数据类型为string,并添加了两个名为SalaryColor和UserName的新属性。 步骤3 -在视图中使用视图模型 在实验5中,我们把我们的观点变成了对类型员工的强烈类型观点。将其更改为EmployeeViewModel 隐藏,复制Code

@using WebApplication1.ViewModels
@model EmployeeViewModel

步骤4 -在视图中显示数据 将视图中的内容替换为以下代码片段。 隐藏,复制Code

Hello @Model.UserName
<hr />
<div>
<b>Employee Details</b><br />
    Employee Name : @Model.EmployeeName <br />
<span style="background-color:@Model.SalaryColor">
        Employee Salary: @Model.Salary
</span>
</div>

步骤5 -创建并传递ViewModel 在GetView操作方法中,获取模型数据并将其转换为ViewModel对象,如下所示。 隐藏,复制Code

public ActionResult GetView()
{
    Employee emp = new Employee();
    emp.FirstName = "Sukesh";
    emp.LastName="Marla";
    emp.Salary = 20000;

    EmployeeViewModel vmEmp = new EmployeeViewModel();
    vmEmp.EmployeeName = emp.FirstName + " " + emp.LastName;
    vmEmp.Salary = emp.Salary.ToString("C");
    if(emp.Salary>15000)
    {
        vmEmp.SalaryColor="yellow";
    }
    else
    {
        vmEmp.SalaryColor = "green";
    }

vmEmp.UserName = "Admin"

    return View("MyView", vmEmp);
}

步骤5 -测试输出 按F5并测试输出 输出与实验5相同,但是这次视图不包含任何逻辑。 关于实验六的演讲 这是否意味着,每个模型都有一个视图模型? 不,每个视图都有它相应的ViewModel。 在Model和ViewModel之间建立某种关系是一个好的实践吗? 不,作为最佳实践模型和ViewModel应该彼此独立。 我们应该总是创建ViewModel吗?如果视图不包含任何表示逻辑,而想按原样显示模型数据,该怎么办? 我们应该始终创建ViewModel。每个视图都应该有自己的视图模型,即使ViewModel将包含与model相同的属性。 假设我们有这样一种情况,视图不包含表示逻辑,它想按原样显示模型数据。让我们假设在这种情况下我们不会创建viewmodel。 问题是,如果在将来的需求中,如果我们被要求在UI中显示一些新数据,或者如果我们要求放置一些表示逻辑,我们可能会以从头开始创建新的UI结束。 所以最好从一开始就保留一个条款并创建ViewModel。在这种情况下,在初始阶段ViewModel将与Model几乎相同。 实验7 -检视与收集 在这个实验室中,我们将在视图中显示员工列表。 步骤1 -更改EmployeeViewModel类 从EmployeeViewModel中删除用户名属性。 隐藏,复制Code

public class EmployeeViewModel
{
    public string EmployeeName { get; set; }
    public string Salary { get; set; }
    public string SalaryColor { get; set; }
}

步骤2 -创建集合视图模型 在ViewModel文件夹中创建一个名为EmployeeListViewModel的类,如下所示。 隐藏,复制Code

public class EmployeeListViewModel
{
    public List<EmployeeViewModel><employeeviewmodel> Employees { get; set; }
    public string UserName { get; set; }
}
</employeeviewmodel>

步骤3 -更改强类型视图的类型 使MyView。EmployeeListViewModel类型的强类型视图。 隐藏,复制Code

@using WebApplication1.ViewModels
@model EmployeeListViewModel

步骤4 -在视图中显示所有员工 隐藏,复制Code

<body>
    Hello @Model.UserName
    <hr/>
    <div>
        <table>
            <tr>
                <th>Employee Name</th>
                <th>Salary</th>
            </tr>
            @foreach (EmployeeViewModel item in Model.Employees)
            {
                <tr>
                    <td>@item.EmployeeName</td>
                    <tdstyle="background-color:@item.SalaryColor">@item.Salary</td>
                </tr>
            }
        </table>
    </div>
</body>

步骤5 -为员工创建业务层 在这个实验室里,我们将把我们的项目提高到一个新的水平。我们将在项目中添加业务层。在模型文件夹中创建一个名为EmployeeBusinessLayer的新类,并使用一个名为GetEmployees的方法。 隐藏,复制Code

public class EmployeeBusinessLayer
{
    public List<Employee><employee> GetEmployees()
    {
        List<Employee><employee> employees = new List<Employee><employee>();
        Employee emp = new Employee();
        emp.FirstName = "johnson";
        emp.LastName = " fernandes";
        emp.Salary = 14000;
        employees.Add(emp);</employee></employee></employee>

        emp = new Employee();
        emp.FirstName = "michael";
        emp.LastName = "jackson";
        emp.Salary = 16000;
        employees.Add(emp);

        emp = new Employee();
        emp.FirstName = "robert";
        emp.LastName = " pattinson";
        emp.Salary = 20000;
        employees.Add(emp);

        return employees;
    }
}

步骤6 -从控制器传递数据 隐藏,收缩,复制Code

public ActionResult GetView()
{
    EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();

    EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
    List<employee> employees = empBal.GetEmployees();

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

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

步骤7 -执行并测试输出 按F5并执行应用程序。 关于实验七的演讲 我们能让视图成为列表的强类型视图吗? 是的,我们可以。 为什么我们创建一个单独的类叫EmployeeListViewModel,为什么我们不让视图成为一个列表类型的强类型视图employeelistviewmodelemployeeviewmodel> ? 如果我们使用List<employeeviewmodel>直接而不是EmployeeListViewModel将会有两个问题。 管理未来的表示逻辑。其次用户名属性。用户名与个别员工没有关联。它与完整视图相关联。 为什么我们从EmployeeViewModel中删除了用户名属性并使其成为EmployeeListViewModel的一部分? 所有员工的用户名都是一样的。在EmployeeViewModel中保留用户名属性只会增加冗余代码,还会增加对数据的总体记忆需求。 结论 我们完成了第2天。在第三天,我们将把我们的项目进入下一个版本。 在Facebook、linkedinor twitter上联系我们,让我们随时了解最新消息。 如需在孟买进行线下技术培训,请访问StepByStepSchools.Net 在线培训请访问JustCompile.com 如果你想开始与MVC 5开始与下面的视频学习MVC 5在2天。 本文转载于:http://www.diyabc.com/frontweb/news1705.html

原文地址:https://www.cnblogs.com/Dincat/p/13456313.html