Mencerminkan nilai yang diubah dalam tindakan selepas siaran borang dalam pandangan

Persekitaran

Visual Studio

• Studio Visual 2022

Teras ASP.NET

• 6.0 MVC

Ia berfungsi dalam persekitaran selain daripada yang di atas, tetapi kod yang diterbitkan ditulis dalam rangka kerja di atas.

Apa yang perlu dibuat

Cuba buat program mudah yang mengatakan, "Siarkan teks yang anda taip pada skrin dan kembalikan teks yang diproses ke skrin yang sama dengan hasil baru."

Kod

Asasnya ialah penciptaan projek MVC baru, dari mana anda menambah kod. Kod ini diterbitkan untuk konfigurasi keseluruhan, jadi sila rujuknya.

Model (viewmodel)

Cipta model berikut untuk interaksi pandangan dan tindakan: ResultValue Terdapat dua, tetapi saya mahu memberikan dua keputusan dalam pandangan, jadi saya menyediakan 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; }
  }
}

Tindakan

Ini adalah proses yang mudah: dapatkan paparan paparan, ambil teks yang dimasukkan dalam POST, proseskannya, dan kembalikan hasilnya.

UtamaPengawal

// 省略

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

Lihat

Buat pandangan berdasarkan tindakan dan model.

Apabila anda ResultValue1 mengklik butang kemas kini, dan ResultValue2 dipaparkan, tetapi ia dipaparkan dalam "teks input" dan "dalam tag div", masing-masing.

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 Tambah pautan supaya anda boleh 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>    @* 追加 *@

Mengemas kini model yang diterima dalam proses POST tidak menjejaskan input pandangan, dsb.

Jalankan kod yang anda buat di atas, masukkan dari InputValue contoh skrin, dan cuba kemas kini.

Di sisi tindakan, ResultValue1 kerana nilai ditetapkan dan ResultValue2 dikembalikan, diandaikan bahawa kedua-duanya pada asalnya dipaparkan, tetapi sebenarnya div hanya 2 yang ditetapkan dalam tag dipaparkan.

Nilai yang ditetapkan ke ModelState diutamakan

Apabila pelanggan MEMPUNYAI nilai input, nilai ditetapkan kepada pemboleh ubah ControllerBase.ModelState model hujah, tetapi nilai juga ditetapkan. Nilai yang ModelState dimasukkan kemudian disahkan dengan nilai yang ditetapkan kepada . ModelState.IsValid Itulah sebabnya ia dihakimi. Apabila penyahpepijatan, anda boleh menyemak kandungan dengan menghentikan pemprosesan pada titik putus.

Jika anda pada asalnya ingin mengembalikan nilai kepada pandangan, ia adalah return View(model); OK untuk disertakan , tetapi jika nilai ModelState disetkan kepada ,ModelState nilai mengambil keutamaan dan dikembalikan kepada pandangan.

ModelState Oleh kerana nilai yang ditetapkan adalah nilai yang dihantar dengan memasukkan pandangan, dan lain-lain, dari segi InputValuemodel, , ResultValue1 ditetapkan. Oleh itu,ResultValue1 nilai mengambil ModelState keutamaan,ModelState dan nilai yang ditetapkan dalam model yang tidak ResultValue2 ditetapkan dipaparkan dalam paparan.

Untuk mengembalikan nilai kepada pandangan yang memihak kepada nilai model

ModelState Nilai yang ditetapkan untuk diutamakan kepada pandangan, jadi jika ModelState anda memadamkan nilai yang ditetapkan kepada , nilai model akan dikembalikan kepada paparan.

ModelState.Clear() Anda boleh memadamkan semua nilai yang ada dengan ModelState memanggil seperti 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 pengesahan,ModelState.Clear jadi pastikan anda ModelState.IsValid membacanya selepas apabila anda memanggil .

Apabila anda menjalankannya, hasilnya akan dipaparkan dengan betul seperti berikut.

ModelState.Clear Oleh kerana semua nilai hilang apabila anda memanggil kaedah, ia juga mungkin untuk menentukan nama sifat model dan memadamkan nilai secara individu seperti 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);
}