Mencerminkan nilai yang diubah dalam tindakan setelah posting formulir dalam tampilan

lingkungan

Visual Studio

• Studio Visual 2022

Inti ASP.NET

• 6.0 MVC

Ini bekerja di lingkungan selain di atas, tetapi kode yang diterbitkan ditulis dalam kerangka kerja di atas.

Apa yang harus dibuat

Cobalah untuk membuat program sederhana yang mengatakan, "Posting teks yang Anda ketik di layar dan kembalikan teks yang diproses ke layar yang sama dengan hasil baru."

kode

Basisnya adalah pembuatan proyek MVC baru, dari mana Anda menambahkan kode. Kode diterbitkan untuk konfigurasi keseluruhan, jadi silakan merujuknya.

Model (viewmodel)

Buat model berikut untuk interaksi tampilan dan tindakan: ResultValue Ada dua, tetapi saya ingin memberikan dua hasil dalam pandangan, jadi saya menyiapkan dua.

SampleViewModel

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; }
  }
}

perbuatan

Ini adalah proses yang sederhana: bisa menampilkan tampilan, mengambil teks yang dimasukkan dalam POST, memprosesnya, dan mengembalikan hasilnya.

HomeKontroler

// 省略

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);
    }
  }
}

melihat

Buat tampilan berdasarkan tindakan dan model.

Ketika Anda ResultValue1 mengklik tombol perbarui, dan ResultValue2 ditampilkan, tetapi mereka ditampilkan dalam "teks input" dan "dalam tag div", masing-masing.

Sampel.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 Tambahkan tautan sehingga Anda dapat beralih dari Sample ke .

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>    @* 追加 *@

Memperbarui model yang diterima dalam proses POST tidak memengaruhi input tampilan, dll.

Jalankan kode yang Anda buat di atas, masukkan dari InputValue layar Sampel, dan coba perbarui.

Di sisi tindakan, ResultValue1 karena nilai diatur dan ResultValue2 dikembalikan, diasumsikan bahwa keduanya awalnya ditampilkan, tetapi sebenarnya div hanya 2 yang ditetapkan dalam tag yang ditampilkan.

Nilai yang diatur ke ModelState diutamakan

Ketika klien MEMASANG nilai input, nilai diatur ke variabel ControllerBase.ModelState model argumen, tetapi nilainya juga diatur. Nilai yang ModelState dimasukkan kemudian divalidasi dengan nilai yang ditetapkan ke . ModelState.IsValid Itulah sebabnya ia dihakimi. Saat debugging, Anda dapat memeriksa konten dengan menghentikan pemrosesan di breakpoint.

Jika Anda awalnya ingin mengembalikan nilai ke tampilan, tidak return View(model); apa-apa untuk menyertakan , tetapi jika nilai ModelState diatur ke ,ModelState nilai didahulukan dan dikembalikan ke tampilan.

ModelState Karena nilai yang ditetapkan adalah nilai yang dikirim dengan memasukkan tampilan, dll., Dalam hal InputValuemodel, , ResultValue1 diatur. Oleh karena itu,ResultValue1 nilai didahulukan ModelState ,ModelState dan nilai yang ditetapkan dalam model yang tidak ResultValue2 diatur ditampilkan dalam tampilan.

Untuk mengembalikan nilai ke tampilan yang mendukung nilai model

ModelState Nilai diatur untuk didahulukan ke tampilan, jadi jika ModelState Anda menghapus nilai yang diatur ke , nilai model akan dikembalikan ke tampilan.

ModelState.Clear() Anda dapat menghapus semua nilai yang dimiliki ModelState dengan memanggil sebagai berikut:

[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 juga melakukan proses validasi,ModelState.Clear jadi pastikan ModelState.IsValid untuk membacanya setelah Anda menelepon .

Saat Anda menjalankannya, hasilnya akan ditampilkan dengan benar sebagai berikut.

ModelState.Clear Karena semua nilai menghilang saat Anda memanggil metode, Anda juga dapat menentukan nama properti model dan menghapus nilai satu per satu sebagai berikut.

[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);
}