สะท้อนค่าที่เปลี่ยนแปลงในการดําเนินการหลังจากโพสต์ของฟอร์มในมุมมอง

สิ่งแวดล้อม

Visual Studio

• Visual Studio 2022

แกน ASP.NET

• 6.0 MVC

มันทํางานในสภาพแวดล้อมอื่นนอกเหนือจากข้างต้น แต่รหัสที่เผยแพร่ถูกเขียนขึ้นในกรอบด้านบน

สิ่งที่ต้องทํา

พยายามสร้างโปรแกรมง่ายๆ ที่ระบุว่า "โพสต์ข้อความที่คุณพิมพ์บนหน้าจอและนําข้อความที่ประมวลผลกลับคืนมาเป็นหน้าจอเดียวกับผลลัพธ์ใหม่"

รหัส

ฐานคือการสร้างโครงการ MVC ใหม่ซึ่งคุณเพิ่มรหัส รหัสนี้ได้รับการเผยแพร่สําหรับการกําหนดค่าโดยรวมดังนั้นโปรดอ้างอิง

Model (viewmodel)

สร้างแบบจําลองต่อไปนี้สําหรับการโต้ตอบมุมมองและการดําเนินการ ResultValue มีสอง, แต่ฉันต้องการให้สองผลลัพธ์ในมุมมอง, ดังนั้นฉันจึงเตรียมสอง.

ตัวอย่างมุมมองโมเดล

namespace PostValueChange.Models
{
  public class SampleViewModel
  {
    /// <summary>入力値を受け取るプロパティ。</summary>
    public string? InputValue { get; set; }

    /// <summary>結果を出力するプロパティ。</summary>
    public string? ResultValue1 { get; set; }

    /// <summary>結果を出力するプロパティ。</summary>
    public string? ResultValue2 { get; set; }
  }
}

การเคลื่อนไหว

มันเป็นกระบวนการง่ายๆ: รับการแสดงมุมมองนําข้อความที่ป้อนใน POST ประมวลผลและส่งคืนผลลัพธ์

หน้าแรกตัวควบคุม

// 省略

namespace PostValueChange.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    [HttpGet]
    public IActionResult Sample() => View();

    [HttpPost]
    public IActionResult Sample(SampleViewModel model)
    {
      if (ModelState.IsValid == false) View(model);
      model.ResultValue1 = model.InputValue + " テキストを追加1";
      model.ResultValue2 = model.InputValue + " テキストを追加2";
      return View(model);
    }
  }
}

ทิวทัศน์

สร้างมุมมองตามการดําเนินการและแบบจําลอง

เมื่อคุณ ResultValue1 คลิกปุ่มอัปเดตและ ResultValue2 จะปรากฏขึ้น แต่จะแสดงใน "ข้อความป้อนเข้า" และ "ในแท็ก div" ตามลําดับ

Sample.cshtml

@model PostValueChange.Models.SampleViewModel

@{
  ViewData["Title"] = "Sample";
}

<h1>Sample</h1>

<h4>SampleViewModel</h4>
<hr />
<div class="row">
  <div class="col-md-4">
    <form asp-action="Sample" >
      <div asp-validation-summary="ModelOnly" class="text-danger"></div>
      <div class="form-group">
        <label asp-for="InputValue" class="control-label"></label>
        <input asp-for="InputValue" class="form-control" />
        <span asp-validation-for="InputValue" class="text-danger"></span>
      </div>
      <div class="form-group">
        <input type="submit" value="更新" class="btn btn-primary" />
      </div>
      <div class="form-group">
        <label asp-for="ResultValue1" class="control-label"></label>
        <input asp-for="ResultValue1" class="form-control" />
        <span asp-validation-for="ResultValue1" class="text-danger"></span>
      </div>
      <div>@Model?.ResultValue2</div>
    </form>
  </div>
</div>

<div>
  <a asp-action="Index">前の画面に戻る</a>
</div>

@section Scripts {
  @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Index.cshtml เพิ่มการเชื่อมโยงเพื่อให้คุณสามารถเปลี่ยนจาก Sample เป็น

Index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<a asp-action="Sample">Sample</a>    @* 追加 *@

การอัพเดตแบบจําลองที่ได้รับในกระบวนการ POST จะไม่มีผลต่อการป้อนข้อมูลของมุมมอง เป็นต้น

เรียกใช้รหัสที่คุณสร้างไว้ข้างต้นป้อนจาก InputValue หน้าจอตัวอย่างและพยายามอัปเดต

ในด้าน ResultValue1 การกระทําเนื่องจากค่าถูกตั้งค่า ResultValue2 และส่งกลับจะสันนิษฐานว่าทั้งสองจะแสดงในตอนแรก แต่ในความเป็นจริง div จะแสดงเฉพาะ 2 ชุดในแท็กเท่านั้น

ค่าที่ตั้งค่าเป็น ModelState จะมีความสําคัญกว่า

เมื่อ POST ของไคลเอนต์เป็นค่าที่ป้อนค่าจะถูกตั้งค่าเป็นตัวแปรแบบจําลองของ ControllerBase.ModelState อาร์กิวเมนต์ แต่ค่าจะถูกตั้งค่าด้วย จากนั้นค่าที่ป้อนจะถูก ModelState ตรวจสอบความถูกต้องด้วยค่าที่ตั้งค่าเป็น ModelState.IsValid นั่นคือเหตุผลที่มันถูกตัดสินใน เมื่อดีบัก คุณสามารถตรวจสอบเนื้อหาได้โดยการหยุดการประมวลผลที่จุดสั่งหยุด

ถ้าคุณต้องการส่งกลับค่าไปยังมุมมองในตอนแรก ก็ return View(model); ไม่เป็นไรที่จะรวม แต่ถ้าตั้งค่าModelState เป็น ModelState ค่าของ จะมีความสําคัญยิ่งและถูกส่งกลับไปยังมุมมอง

ModelState เนื่องจากค่าที่ตั้งค่าเป็นเป็นค่าที่ส่งโดยการป้อนมุมมอง ฯลฯ ในแง่ของ InputValueแบบจําลอง ResultValue1 จะมีการตั้งค่า ResultValue1 ค่าของ จะ ModelState มีความสําคัญกว่าModelState และค่าที่กําหนดในแบบจําลองที่ไม่ได้ ResultValue2 ตั้งค่าเป็นจะแสดงในมุมมอง

เมื่อต้องการส่งกลับค่าไปยังมุมมองเพื่อสนับสนุนค่ารูปแบบ

ModelStateค่าที่ตั้งค่าให้มีความสําคัญต่อมุมมอง ดังนั้นถ้าคุณModelStateลบค่าที่ตั้งค่าเป็น ค่าของแบบจําลองจะถูกส่งกลับไปยังมุมมอง

ModelState.Clear()คุณสามารถลบค่าทั้งหมดที่มีโดยModelStateการเรียกดังนี้:

[HttpPost]
public IActionResult Sample(SampleViewModel model)
{
  if (ModelState.IsValid == false) View(model);

  // ModelState の値を消してモデルの値をビューに返却できるようにする
  ModelState.Clear();

  // ビューに返す値を設定する
  model.ResultValue1 = model.InputValue + " テキストを追加1";
  model.ResultValue2 = model.InputValue + " テキストを追加2";

  return View(model);
}

ModelState กําลังทํากระบวนการตรวจสอบความถูกต้องด้วยดังนั้นModelState.Clear โปรดอ่าน ModelState.IsValid หลังจากเมื่อคุณโทร

เมื่อคุณเรียกใช้ผลลัพธ์จะแสดงอย่างถูกต้องดังนี้

ModelState.Clear เนื่องจากค่าทั้งหมดหายไปเมื่อคุณเรียกวิธีการจึงเป็นไปได้ที่จะระบุชื่อคุณสมบัติของแบบจําลองและลบค่าทีละค่าดังนี้

[HttpPost]
public IActionResult Sample(SampleViewModel model)
{
  if (ModelState.IsValid == false) View(model);

  // ModelState の値を消してモデルの値をビューに返却できるようにする
  ModelState.Remove(nameof(model.ResultValue1));

  // ビューに返す値を設定する
  model.ResultValue1 = model.InputValue + " テキストを追加1";
  model.ResultValue2 = model.InputValue + " テキストを追加2";

  return View(model);
}