实验6—— 实现ViewModel

最新推荐文章于 2024-04-13 11:05:40 发布
最新推荐文章于 2024-04-13 11:05:40 发布
阅读量320 收藏
点赞数
分类专栏： .NET web
web 同时被 2 个专栏收录
707 篇文章 0 订阅
订阅专栏
.NET
424 篇文章 1 订阅
订阅专栏

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


namespace MvcAppLesson2.ViewModels
{
    public class EmployeeViewModel
    {
        public string EmployeeName { get; set; }
        public string Salary { get; set; }
        public string SalaryColor { get; set; }
        public string UserName{get;set;}
    }
}


       public ActionResult MyViewModel()
         {
             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("StrongViewModel", vmEmp);
         }


  @using MvcAppLesson2.ViewModels
  @model EmployeeViewModel


@{
    Layout = null;
}


<!DOCTYPE html>


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>StrongViewModel</title>
</head>
<body>
    <div>
       使用以下脚本代替View部分的内容 
    </div>
    Hello @Model.UserName <br />
    <hr />
    <div>
    <b>Employee Details</b><br />
        Employee Name : @Model.EmployeeName <br />
    <span style="background-color:@Model.SalaryColor">
            Employee Salary: @Model.Salary
    </span>
    </div>


</body>
</html>

理解ASP.NET MVC 中的View Model

实验5中已经违反了MVC的基本准则。根据MVC，V是View纯UI，不包含任何逻辑层。而我们在实验5中以下三点违反了MVC的体系架构规则。

1. 附加姓和名显示全名——逻辑层

2. 使用货币显示工资——逻辑层

3. 使用不同的颜色表示工资值，使用简单的逻辑改变了HTML元素的外观。——逻辑层

ViewModel 解决方法

ViewModel是ASP.NET MVC应用中隐式声明的层。它是用于维护Model与View之间数据传递的，是View的数据容器。

Model 和 ViewModel 的区别

Model是业务相关数据，是根据业务和数据结构创建的。ViewModel是视图相关的数据。是根据View创建的。

具体的工作原理

  1. Controller 处理用户交互逻辑或简单的判断。处理用户需求
  2. Controller 获取一个或多个Model数据
  3. Controller 决策哪个View最符合用户的请求
  4. Controller 将根据Model数据和View需求创建并且初始化ViewModel对象。
  5. Controller 将ViewModel数据以ViewData或ViewBag或强类型View等对象传递到View中。
  6. Controller 返回View。

View 与 ViewModel 之间是如何关联的？

View将变成ViewModel的强类型View。

Model和 ViewModel 是如何关联的？

Model和ViewModel 是互相独立的，Controller将根据Model对象创建并初始化ViewModel对象。

接下来我们来看实验6：

实验6—— 实现ViewModel

1. 新建文件夹

在项目中创建新文件夹并命名为ViewModels。

2. 新建EmployeeViewModel

为了达到实验目的，首先列出我们的实验需求：

1. 名和姓应该合并显示。

2. 使用货币显示数量

3. 薪资以不同的颜色来显示

4. 当前登录用户也需要在View中显示。

在ViewModels类中，创建新类并命名为EmployeeViewModel，如下所示：

   1:  public class EmployeeViewModel
   2:  {
   3:      public string EmployeeName { get; set; }
   4:      public string Salary { get; set; }
   5:      public string SalaryColor { get; set; }
   6:      public string UserName{get;set;}
   7:  }
注意，姓和名应该使用EmployeeName这一个属性。而Salary属性的数据类型是字符串，且有两个新的属性添加称为SalaryColor和UserName。
3. View中使用ViewModel

实验五中已经创建了View的强类型Employee。将它改为 EmployeeViewModel

   1:  @using WebApplication1.ViewModels
   2:  @model EmployeeViewModel
 

 4. 在View中显示数据
 

 使用以下脚本代替View部分的内容
 

 
 
   1:  Hello @Model.UserName
 
 
   2:  <hr />
 
 
   3:  <div>
 
 
   4:  <b>Employee Details</b><br />
 
 
   5:      Employee Name : @Model.EmployeeName <br />
 
 
   6:  <span style="background-color:@Model.SalaryColor">
 
 
   7:          Employee Salary: @Model.Salary
 
 
   8:  </span>
 
 
   9:  </div>
 

 

 5. 新建并传递ViewModel
 

 在GetView方法中，获取Model数据并且将强制转换为ViewModel对象。
 

 
 
   1:  public ActionResult GetView()
 
 
   2:  {
 
 
   3:      Employee emp = new Employee();
 
 
   4:      emp.FirstName = "Sukesh";
 
 
   5:      emp.LastName="Marla";
 
 
   6:      emp.Salary = 20000;
 
 
   7:   
 
 
   8:      EmployeeViewModel vmEmp = new EmployeeViewModel();
 
 
   9:      vmEmp.EmployeeName = emp.FirstName + " " + emp.LastName;
 
 
  10:      vmEmp.Salary = emp.Salary.ToString("C");
 
 
  11:      if(emp.Salary>15000)
 
 
  12:      {
 
 
  13:          vmEmp.SalaryColor="yellow";
 
 
  14:      }
 
 
  15:      else
 
 
  16:      {
 
 
  17:          vmEmp.SalaryColor = "green";
 
 
  18:      }
 
 
  19:   
 
 
  20:  vmEmp.UserName = "Admin"
 
 
  21:   
 
 
  22:      return View("MyView", vmEmp);
 
 
  23:  }
 

 

 6. 测试输出
 

 clip_image006
 

 尽管运行结果类似，但是View中不包含任何业务逻辑。
 

 关于实验6
 

 是否意味着，每个Model都有一个ViewModel？
 

 每个View有其对应的ViewModel。
 

 Model与ViewModel之间存在关联是否是好的实现方法？
 

 最好的是Model与ViewModel之间相互独立。
 

 需要每次都创建ViewModel吗？假如View不包含任何呈现逻辑只显示Model数据的情况下还需要创建ViewModel吗？
 

 建议是每次都创建ViewModel，每个View都应该有对应的ViewModel，尽管ViewModel包含与Model中相同的属性。
 

 假定一个View不包含任何呈现逻辑，只显示Model数据，我们不创建ViewModel会发生什么？
 

 无法满足未来的需求，如果未来需要添加新数据，我们需要从头开始创建全新的UI，所以如果我们保持规定，从开始创建ViewModel，就不会发生这种情况。在本实例中，初始阶段的ViewModel将与Model几乎完全相同。
 

 


 

                

        

        

    

  


    

      

        

            

              
                
                  Hustudent20080101
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
根据对MVVM中ViewModel的理解写的一个前端脚本

				
			

			

				

					xumingxsh的专栏
				

				

					04-24
					
					244
					
				

			

		

		

			
				
这几天对MVVM模式做了简单的理解. MVVM中的MV是MVC中的MV, 而VM是在View之前添加了一层前端的逻辑层ViewModel. 该Model中的对象针对前端显示提供数据和接口. VM中有一部分功能是实现ViewModel和前端控件的自动绑定,包括读取和写入,我根据这个理解写了个简单的脚本,并进行了一次重构,写在这儿,权当整理.

1: 展示对象

展示对象很简单,本例中是一个用户信息...

			
		

	



                

              
                



	

		

			

				
					
Jetpack组件之ViewModel实现原理

				
			

			

				

					Guxxxxxxxd的博客
				

				

					12-10
					
					283
					
				

			

		

		

			
				
提纲

ViewModel是什么
ViewModel的优势
ViewModel基本用法
ViewModel相关方法说明及实现原理

一、ViewModel是什么
ViewModel 具备宿主生命周期感知能力的数据存储组件，使用ViewModel保存的数据，在页面因配置变更导致页面销毁重建之后依然也是存在的。

配置变更：横竖屏切换、分辨率调整、权限变更、系统字体样式变更等

二、ViewModel的优势
2.1 页面配置更改数据不丢失
当设备因配置更改导致 Activity/Fragment 重建，View

			
		

	



                


  
              

                


	

		

			

				
					
简单分析ViewModel源码

				
			

			

				

					
				

				

					05-15
					
					362
					
				

			

		

		

			
				
先从使用的代码开始：


XxxViewModel viewModel = ViewModelProviders.of(FragmentActivity).get(XxxViewModel.class);
XxxViewModel viewModel = ViewModelProviders.of(Fragment).get(XxxViewModel.class);

用法很简单，继承ViewMo...

			
		

	





	

		

			

				
					
Android ViewModel深入解析

				
			

			

				

					weixin_44780781的博客
				

				

					03-03
					
					2168
					
				

			

		

		

			
				
ViewModel 类是一种业务逻辑或屏幕级状态容器。它用于将状态公开给界面，以及封装相关的业务逻辑。它的主要优点是，它可以缓存状态，并可在配置更改后持久保留相应状态。这意味着在 activity 之间导航时或进行配置更改后（例如旋转屏幕时），界面将无需重新提取数据。注意：AndroidX以后才能使用ViewModel。

			
		

	



		

			
		



	

		

			

				
					
Jetpack系列-ViewModel的使用及原理浅析_viewmodel by，鸿蒙开发自学技巧

				
			

			

				

					kOS0ym的博客
				

				

					04-13
					
					776
					
				

			

		

		

			
				
有时候ViewModel中可能会需要使用到Android Context（获取文本、颜色等资源），此时可以使用AndroidViewModel，它提供了一个getApplication()方法，可以很方便的获取上下文实例。实例，里面有Application实例、SavedStateRegistryOwner 的实例、ViewModelStoreOwner的实例，以及Intent中extras参数bundle。androidx中的。中根据key查找是否有现成的实例，有就直接使用，没有就调用Factory的。

			
		

	





	

		

			

				
					
C#综合实验——图片浏览器

				
			

			

				

					06-07
				

			

		

		

			
				
【C#综合实验——图片浏览器】是一个以C#编程语言实现的项目，旨在提供一个能够浏览和管理图片的用户界面应用程序。在这个实验中，你将深入理解C#的基础语法、图形用户界面（GUI）设计以及图像处理技术。下面将详细...

			
		

	





	

		

			

				
					
基于android的实验课程管理系统.zip

					
最新发布

				
			

			

				

					05-12
				

			

		

		

			
				
通过对这些文件的分析，我们可以推测出该实验课程管理系统可能采用了MVC（Model-View-Controller）或MVVM（Model-View-ViewModel）架构，以实现数据管理、用户交互和界面呈现的分离。系统可能集成了数据库来存储课程...

			
		

	





	

		

			

				
					
学生项目——慧记账APP.zip

				
			

			

				

					12-20
				

			

		

		

			
				
总的来说，"学生项目——慧记账APP" 是一个展示学生初步编程技能和软件开发实践的实例，它涵盖了软件生命周期的多个阶段，并可能使用了各种技术和工具来实现一个实际的移动应用。尽管可能存在一些局限性，但这样的...

			
		

	





	

		

			

				
					
《多媒体技术实验》设计及编程模板.doc

				
			

			

				

					09-19
				

			

		

		

			
				
在这个实验中，我们关注的是一个特定的项目——手机屏幕保护APP的设计与实现，这涉及到移动应用开发、用户界面设计、多媒体元素处理等多个关键知识点。  1. 任务及目标：  - 学习并理解移动应用开发的基本流程，包括...

			
		

	





	

		

			

				
					
Android综合案例——RSS阅读器实源代码+讲解

				
			

			

				

					12-11
				

			

		

		

			
				
 - `LiveData`结合`ViewModel`，可实现数据的实时更新和生命周期管理。  7. **UI交互**：  - 当用户点击列表项时，启动新的Activity显示文章详情。  - 可以用`WebView`加载文章的全文，或者自定义布局解析和展示HTML...

			
		

	





	

		

			

				
					
viewmodel全解析

				
			

			

				

					Genius_sasuke的博客
				

				

					05-12
					
					416
					
				

			

		

		

			
				
首先看初始化：



先看of里干了什么：



可以看到，初始化了一个AndroidViewModelFactory,接着初始化了一个ViewModelProvider，先看看AndroidViewModelFactory有什么重要的方法没有



记住这个create！因为这个是我们自定义的ViewModel初始化的地方！可以看到，就是拿到viewmodel的构造方法进行了初始化然后再看看get方法里干了什么



这里的create就是调用的上面截图的create方法，将viewmodel初始化并返回

			
		

	





	

		

			

				
					
ViewModel的共享(上)

				
			

			

				

					教我数理化的博客
				

				

					07-31
					
					1137
					
				

			

		

		

			
				
我们先来试着了解一下，为什么叫做“ViewModel”这个名字？（以下是个人的解读）将ViewModel就可以拆成“View”和“Model”。View就是我们看到的UI界面。例如常见的实现了lifecycleOwner的Fragment、activity、自定义View等等。View应该专注于处理UI界面的展示。Model就是数据的获取类。例如网络请求、数据库读取等等。ViewModel就是介于View和Model这两个之间存在的一个组件，连接着View和Model。...

			
		

	





	

		

			

				
					
ViewModel 使用及原理解析

				
			

			

				

					weixin_34297704的博客
				

				

					03-20
					
					1477
					
				

			

		

		

			
				
本文是基于 androidx.lifecycle:lifecycle-extensions:2.0.0 的源码进行分析
ViewModel旨在以生命周期意识的方式存储和管理用户界面相关的数据,它可以用来管理Activity和Fragment中的数据.还可以拿来处理Fragment与Fragment之间的通信等等.
当Activity或者Fragment创建了关联的ViewModel,那么该Acti...

			
		

	





	

		

			

				
					
Android架构组件——ViewModel

					
热门推荐

				
			

			

				

					qq_24442769的博客
				

				

					03-02
					
					2万+
					
				

			

		

		

			
				
概述

ViewModel，从字面上理解的话，它肯定是跟视图(View)以及数据(Model)相关的。正像它字面意思一样，它是负责准备和管理和UI组件(Fragment/Activity)相关的数据类，也就是说ViewModel是用来管理UI相关的数据的，同时ViewModel还可以用来负责UI组件间的通信。



之前存在的问题

ViewModel用来存储和管理UI相关的数据，可于将一个Act...

			
		

	





	

		

			

				
					
ViewModel的简单实例

				
			

			

				

					曲幽
				

				

					11-05
					
					2456
					
				

			

		

		

			
				
ViewModel类是被设计用来以可感知生命周期的方式存储和管理 UI 相关数据，数据持久，生命周期贯穿整个Activity，解耦合，可以Activity和其下Fragment之间数据共享。

			
		

	





	

		

			

				
					
ViewModel

				
			

			

				

					小迈的博客
				

				

					12-25
					
					4151
					
				

			

		

		

			
				
ViewModel 负责根据生命周期来存储和管理 UI 相关（Activity 或 Fragment）的数据。当配置发生变化时，如：屏幕方向旋转，它可以保证数据不被销毁。

			
		

	





	

		

			

				
					
ViewModel实现原理

				
			

			

				

					qq_42806685的博客
				

				

					07-17
					
					244
					
				

			

		

		

			
				
ViewModel复用，实际是ViewModelStore的复用；
ViewModelStore使用HashMap存取了ViewModel对象
大概如下图所示：




			
		

	





	

		

			

				
					
ViewModel 在 Activity 中的实现原理

				
			

			

				

					一个有思想的搬运工
				

				

					03-21
					
					2560
					
				

			

		

		

			
				
系统源码参考自 Android API 30 Platform，以及 androidx.lifecycle:lifecycle-viewmodel:2.2.0

在文章开始之前，有如下几点疑惑，先记录下来：

ViewModel#onCleared() 的调用时机 ？
ViewModel 与 onSaveInstanceState() 有联系吗？或者有什么区别吗？
ViewModel 是否涉及序列化与反序列化？
一个 Activity 中是否支持多个 ViewModel ？


1. 与 ViewModel

			
		

	





	

		

			

				
					
Android ViewModel实现原理

				
			

			

				

					Beatles_The的专栏
				

				

					03-14
					
					584
					
				

			

		

		

			
				
本文基于：

androidx.lifecycle:lifecycle-viewmodel:2.3.0

androidx.fragment:fragment:1.1.0

androidx.appcompat:appcompat:1.2.0

一.ViewModel简介

ViewModel是google随Jetpack发布的，旨在以注重生命周期的方式存储和管理界面相关的数据，ViewModel 类让数据可在发生屏幕旋转等配置更改后继续留存。详细的文档介绍参考：

https://developer.an

			
		

	





	

		

			

				
					
多个fragment内实现ViewModel的共享

				
			

			

				

					03-28
				

			

		

		

			
				
在多个Fragment之间共享ViewModel，可以使用以下步骤：

1. 创建一个ViewModel类，该类包含需要共享的数据和方法。

```java
public class SharedViewModel extends ViewModel {
    private MutableLiveData<String> selected = new MutableLiveData<String>();

    public void select(String item) {
        selected.setValue(item);
    }

    public LiveData<String> getSelected() {
        return selected;
    }
}
```

2. 在需要共享ViewModel的Fragment中，通过ViewModelProvider获取ViewModel实例。

```java
public class Fragment1 extends Fragment {
    private SharedViewModel model;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        model = new ViewModelProvider(requireActivity()).get(SharedViewModel.class);
    }

    // ...
}
```

3. 在其他需要访问ViewModel的Fragment中，也通过ViewModelProvider获取同一个ViewModel实例。

```java
public class Fragment2 extends Fragment {
    private SharedViewModel model;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        model = new ViewModelProvider(requireActivity()).get(SharedViewModel.class);
    }

    // ...
}
```

4. 在Fragment中使用ViewModel中的数据和方法。这样就可以在多个Fragment之间共享ViewModel了。

```java
public class Fragment1 extends Fragment {
    private SharedViewModel model;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        model = new ViewModelProvider(requireActivity()).get(SharedViewModel.class);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment1, container, false);
        Button button = view.findViewById(R.id.button);
        final EditText editText = view.findViewById(R.id.editText);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                model.select(editText.getText().toString());
            }
        });

        return view;
    }
}

public class Fragment2 extends Fragment {
    private SharedViewModel model;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        model = new ViewModelProvider(requireActivity()).get(SharedViewModel.class);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment2, container, false);
        final TextView textView = view.findViewById(R.id.textView);

        model.getSelected().observe(getViewLifecycleOwner(), new Observer<String>() {
            @Override
            public void onChanged(String item) {
                textView.setText(item);
            }
        });

        return view;
    }
}
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值