猿教程 Logo

Asp.Net Core-Razor Edit Form

阿里云服务器,每月低至7.8元,项目演示即建站必备,比腾讯云更便宜,并且不需学生认证,从此链接购买有效:去购买

在本章中,我们将继续讨论Tag Helper。 我们还将在我们的应用程序中添加一个新功能,并让它能够编辑现有员工的详细信息。 我们将首先在每个员工一侧添加一个链接,该链接将转到HomeController上的编辑操作。

@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>

我们还没有编辑操作,但我们需要一个我们可以编辑的员工ID。 因此,让我们先创建一个新的视图,方法是右键单击Views→Home文件夹,然后选择Add→New Items。


在中间窗格中,选择MVC视图页面; 页面命名为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>

从此页面的标题可以看出来,这个页面我们要的功能是编辑,可以编辑员工姓名。

  • 编辑前面的美元符号将允许运行时将Model.Name替换为该属性中的值,如employee name。

  • 在表单标记中,我们可以使用标记辅助函数,如asp-action和asp-controller。 以便当用户提交此表单时,它会直接转到特定的控制器操作。

  • 在这种情况下,我们想在同一个控制器上进行编辑操作,我们要明确表示,对于这个表单上的方法,它应该使用HttpPost。

  • 表单的默认方法是GET,我们不想使用GET操作编辑员工。

  • 在标签标签中,我们使用了asp-for Tag Helper,它表示这是模型的Name属性的标签。 此Tag Helper可以设置Html.For属性以具有正确的值,并设置此标签的内部文本,以便它实际显示我们想要的内容,如员工姓名。

让我们去HomeController类,添加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请求的Edit操作。 它将获取一个员工ID, 这里的代码将类似于我们在“Details ”操作中的代码。 我们将首先提取用户想要编辑的员工的数据。 我们还需要确保员工确实存在。 如果它不存在,我们将重定向用户回到Index视图。 但是当一个员工存在时,我们将渲染Edit视图。

我们还需要响应表单将发送的HttpPost请求。

让我们在HomeController.cs文件中添加一个新类,如下面的程序所示。

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

在Edit Action中,在响应HttpPost时将采用EmployeeEditViewModel,但不是一个员工本身,因为我们只想要捕获在 Edit.cshtml 文件中的窗体中的数据。

以下是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); 
}

编辑表单应始终根据我们的路由规则(如/ home / edit / 1)。

  • 该表单总是发送数据回同一个URL,/ home / edit / 1。

  • MVC框架将能够从URL中拉出该ID并将其作为参数传递。

  • 我们总是需要检查ModelState是否有效,并且确保这个员工在数据库中存在,并且在我们在数据库中执行更新操作。

  • 如果这些都不是真的,我们将返回一个视图,并允许用户再试一次。虽然在具有并发用户的实际应用程序中,如果该雇员为null,则可能是因为某人删除了员工详细信息。

  • 如果该员工不存在,则告诉用户该员工不存在。

  • 否则,请检查ModelState。如果ModelState无效,则返回一个视图。这允许修复编辑并使ModelState有效。

  • 将名称从输入视图模型复制到从数据库检索的员工并保存更改。 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; }
   }
}

让我们编译程序并运行应用程序。


我们现在有一个编辑链接可用; 让我们通过点击编辑链接编辑Josh的详细信息。


让我们把名字改为Josh Groban。


单击保存按钮。


你可以看到,名称已经改变为Josh Groban,如上面的截图。 让我们现在点击Home链接。


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

阿里云服务器,每月低至7.8元,项目演示即建站必备,比腾讯云更便宜,并且不需学生认证,从此链接购买有效: 去购买


版权声明:本站所有教程均为本站原创或翻译,转载请注明出处,请尊重他人劳动果实。请记住本站地址:www.yuanjiaocheng.net (猿教程) 作者:卿文刚
本文标题: C#环境
本文地址:http://www.yuanjiaocheng.net/ASPNET-CORE/core-edit-form.html