首页 > 编程语言 >无涯教程-ASP.NET Core - Razor表单

无涯教程-ASP.NET Core - Razor表单

时间:2023-10-11 21:32:49浏览次数:41  
标签:Core ASP Razor Edit SQLEmployeeData context new model public

在本章中,无涯教程将继续讨论标签助手,还将在应用程序中添加新功能,并使其能够编辑现有员工的详细信息,将在每个员工添加一个链接,该链接将转到HomeController上的Edit动作。

@model HomePageViewModel  
@{  
   ViewBag.Title = "Home"; 
} 
<h1>Welcome!</h1> 

<table> 
   @foreach (var employee in Model.Employees) { 
      <tr> 
         <td>@employee.Name</td> 
         
         <td> 
            <a asp-controller = "Home" asp-action = "Details" 
               asp-routeid = "@employee.Id">Details</a> 
            
            <a asp-controller = "Home" asp-action = "Edit" 
               asp-routeid = "@employee.Id">Edit</a> 
               
         </td> 
      </tr> 
   } 
</table>

还没有"Edit"操作,但是需要一个可以编辑的员工ID。因此,首先通过右键单击 Views→Home 文件夹并选择 Add→New Items 创建新视图。

View Home

在中间窗格中,选择" MVC View Page";调用页面Edit.cshtml。现在,单击添加按钮。

在 Edit.cshtml 文件中添加以下代码。

@model Employee 
@{ 
   ViewBag.Title = $"Edit {Model.Name}"; 
} 
<h1>Edit @Model.Name</h1>  

<form asp-action="Edit" method="post"> 
   <div> 
      <label asp-for = "Name"></label> 
      <input asp-for = "Name" /> 
      <span asp-validation-for = "Name"></span> 
   </div> 
   
   <div> 
      <input type = "submit" value = "Save" /> 
   </div> 
</form>

对于此页面的标题,可以说无涯教程要编辑然后提供员工姓名。

转到HomeController类,并添加 Edit 操作,该操作返回为用户提供表单以编辑员工的视图的视图,然后将需要第二个Edit操作,该操作将响应HttpPost,如下所示。

[HttpGet] 
public IActionResult Edit(int id) { 
   var context = new FirstAppDemoDbContext(); 
   SQLEmployeeData sqlData = new SQLEmployeeData(context); 
   var model = sqlData.Get(id); 
   
   if (model == null) { 
      return RedirectToAction("Index"); 
   } 
   return View(model); 
}

首先,需要一个可以响应GET请求的编辑操作,这将需要一个员工ID,这里的代码将类似于" Details"操作中的代码,将首先提取用户要编辑的员工的数据,还需要确保该雇员确实存在,如果不存在,会将用户重定向回Index视图,当有员工存在时,将渲染"Edit"视图。

还需要响应表单将发送的HttpPost。

在HomeController.cs文件中添加一个新类,如以下程序所示。

public class EmployeeEditViewModel { 
   [Required, MaxLength(80)] 
   public string Name { get; set; } 
}

以下是"Edit"操作的实现。

[HttpPost] 
public IActionResult Edit(int id, EmployeeEditViewModel input) { 
   var context = new FirstAppDemoDbContext(); 
   SQLEmployeeData sqlData = new SQLEmployeeData(context); 
   var employee = sqlData.Get(id); 
   
   if (employee != null && ModelState.IsValid) { 
      employee.Name = input.Name; 
      context.SaveChanges();  
      return RedirectToAction("Details", new { id = employee.Id }); 
   } 
   return View(employee); 
}

根据路由规则,应始终从在URL中具有ID的URL交付编辑表单,如/home/edit/1 。

将名称从"input"视图模型复制到从数据库中检索到的员工,并保存更改,SaveChagnes()方法将把所有这些更改刷新到数据库中。

以下是HomeController的完整实现。

using Microsoft.AspNet.Mvc; 

using FirstAppDemo.ViewModels; 
using FirstAppDemo.Services; 
using FirstAppDemo.Entities; 
using FirstAppDemo.Models; 

using System.Collections.Generic; 
using System.Linq; 
using System.ComponentModel.DataAnnotations;  

namespace FirstAppDemo.Controllers { 
   public class HomeController : Controller { 
      public ViewResult Index() { 
         var model = new HomePageViewModel(); 
         using (var context = new FirstAppDemoDbContext()) { 
            SQLEmployeeData sqlData = new SQLEmployeeData(context); 
            model.Employees = sqlData.GetAll(); 
         }  
         return View(model); 
      }  
      public IActionResult Details(int id) { 
         var context = new FirstAppDemoDbContext(); 
         SQLEmployeeData sqlData = new SQLEmployeeData(context); 
         var model = sqlData.Get(id)
         
         if (model == null) { 
            return RedirectToAction("Index"); 
         } 
         return View(model); 
      } 
      [HttpGet] 
      public IActionResult Edit(int id) { 
         var context = new FirstAppDemoDbContext(); 
         SQLEmployeeData sqlData = new SQLEmployeeData(context); 
         var model = sqlData.Get(id); 
            
         if (model == null) { 
            return RedirectToAction("Index"); 
         } 
         return View(model); 
      }  
      [HttpPost] 
      public IActionResult Edit(int id, EmployeeEditViewModel input) { 
         var context = new FirstAppDemoDbContext(); 
         SQLEmployeeData sqlData = new SQLEmployeeData(context); 
         var employee = sqlData.Get(id); 
         
         if (employee != null && ModelState.IsValid) { 
            employee.Name = input.Name; 
            context.SaveChanges();  
            return RedirectToAction("Details", new { id = employee.Id }); 
         } 
         return View(employee); 
      } 
   }
   public class SQLEmployeeData {
      private FirstAppDemoDbContext _context { get; set; }
      public SQLEmployeeData(FirstAppDemoDbContext context) {
         _context = context;
      }
      public void Add(Employee emp) {
         _context.Add(emp);
         _context.SaveChanges();
      }
      public Employee Get(int ID) {
         return _context.Employees.FirstOrDefault(e => e.Id == ID);
      }
      public IEnumerable<Employee> GetAll() {
         return _context.Employees.ToList<Employee>();
      }
   }
   public class HomePageViewModel {
      public IEnumerable<Employee> Employees { get; set; }
   }
   public class EmployeeEditViewModel {
      [Required, MaxLength(80)]
      public string Name { get; set; }
   }
}

编译程序并运行应用程序。

compile and Run Program

现在,有一个"Edit"链接;通过单击"Edit"链接来编辑Josh的详细信息。

Edit Josh

将名称更改为Josh Groban。

Josh Groban

单击保存按钮。

Save Button

您可以看到名称已更改为Josh Groban,如上面的屏幕截图所示。现在单击"Home"链接。

Name has Changed

在主页上,您现在将看到更新的名称。

参考链接

https://www.learnfk.com/asp.net_core/asp.net-core-razor-edit-form.html

标签:Core,ASP,Razor,Edit,SQLEmployeeData,context,new,model,public
From: https://blog.51cto.com/u_14033984/7816475

相关文章

  • Web api整合EF Core
    注意这个是asp.netcore,asp.net出门左转首先vs创建或者rider创建新项目空的webapi项目,当前项目版本.NET6建表 添加依赖配置efcore使用nuget添加或者控制台 ,对应数据库和版本自己确定Microsoft.EntityFrameworkCore.SqlServers实体类映射配置和DbContext配置pub......
  • 无涯教程-ASP.NET Core - Razor导入
    在本章中,无涯教程将讨论RazorViewImport,除了ViewStart文件之外,还有一个ViewImports文件,MVC框架在呈现任何视图时都将查找该文件。就像ViewStart文件一样,可以将ViewImports.cshtml放到文件夹中,并且ViewImports文件可以影响文件夹层次结构中的所有视图。此视图是此版本MVC的......
  • 无涯教程-ASP.NET Core - Razor视图
    在本章中,无涯教程将讨论RazorViewStart。MVC中的Razor视图引擎有一个约定,即它将查找名称为_ViewStart.cshtml的任何文件,并在该文件中执行代码。ViewStart文件中的代码无法呈现到页面的HTML输出中,但可用于从各个视图内的代码块中删除重复的代码。在示例中,如果希望每个视图......
  • 无涯教程-ASP.NET Core - Razor布局
    在本章中,无涯教程将了解“RazorLayout”视图,大多数网站和Web应用程序都希望创建呈现一些常见元素的页面。布局视图现在了解什么是布局视图。"Layout"视图是扩展名为*.cshtml的Razor视图,您可以选择以所需的方式命名布局视图,在本章中,将使用名为_Layout.cshtml。这是"Layou......
  • 无涯教程-ASP.NET Core - 实体框架
    在本章中,无涯教程将设置和配置应用程序以保存和读取SQLServer数据库中的数据。要使用数据库,将使用实体框架,该框架经过了重新编写以与新的.NETFramework一起使用。在此应用程序中,将使用SQLServerLocalDB。LocalDB是为开发人员优化的SQLServer的特殊版本。VisualStudio......
  • intel 4305ue coremark 跑分
    2Kperformancerunparametersforcoremark.CoreMarkSize:666Totalticks:11713Totaltime(secs):11.713000Iterations/Sec:9391.274652Iterations:110000Compilerversion:GCC4.8.520150623(RedHat4.8.5-44)Compilerflags:-O2-DPER......
  • 兆芯6640MA coremark跑分
    2Kperformancerunparametersforcoremark.CoreMarkSize:666Totalticks:13561Totaltime(secs):13.561000Iterations/Sec:8111.496202Iterations:110000Compilerversion:GCC4.8.520150623(RedHat4.8.5-44)Compilerflags:-O2-DPER......
  • NXP ls1021a coremark跑分
    RELEASE版本2Kperformancerunparametersforcoremark.CoreMarkSize:666Totalticks:42504300Totaltime(secs):42.504300Iterations/Sec:2352.703138Iterations:100000Compilerversion:GCC4.9.320150311(prerelease)Compilerflags:-o3......
  • zynq7z030 coremark 跑分
    zynq>./coremarko02Kperformancerunparametersforcoremark.CoreMarkSize:666Totalticks:214430000Totaltime(secs):214.430000Iterations/Sec:466.352656Iterations:100000Compilerversion:GCC4.6.1Compilerflags:-o0Memorylo......
  • 无涯教程-ASP.NET Core - 属性路由
    在本章中,无涯教程将学习另一种路由方法,即基于属性的路由,通过基于属性的路由,可以在控制器类和这些类内部的方法上使用C#属性,这些属性具有告诉ASP.NETCore何时调用特定控制器的元数据。它是基于约定的路由的替代方法。按照出现的顺序,注册的顺序对路由进行判断,但是映射多个路由是......