Saate kajastada toimingus pärast vormi postitamist vaates muudetud väärtust

keskkond

Visual Studio

• Visual Studio 2022

ASP.NET Tuum

• 6.0 MVC

See töötab muudes keskkondades kui ülaltoodud, kuid avaldatud kood on kirjutatud ülaltoodud raamistikus.

Mida teha

Proovige luua lihtne programm, mis ütleb: "Postitage ekraanile tipitud tekst ja tagastage töödeldud tekst uuele tulemusele samale ekraanile."

kood

Aluseks on uue MVC projekti loomine, millest lisate koodi. Kood avaldatakse üldise konfiguratsiooni jaoks, nii et palun vaadake seda.

Mudel (viewmodel)

Looge vaatamiseks ja tegevusele suhtlemiseks järgmine mudel. ResultValue Neid on kaks, kuid ma tahtsin anda vaates kaks tulemust, nii et ma valmistasin ette kaks.

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

Tegevus

See on lihtne protsess: saate kuvada vaate, võtta POST-i sisestatud teksti, töödelda seda ja tagastada tulemus.

HomeController

// 省略

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

vaade

Looge vaateid tegevuste ja mudelite põhjal.

Kui klõpsate ResultValue1 värskendusnuppu ja ResultValue2 kuvatakse, kuvatakse need vastavalt "sisendtekstis" ja "div-sildis".

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 Lisage link, et saaksite rakendusest Sample üle minna .

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-protsessi käigus saadud mudeli uuendamine ei mõjuta vaate sisendit jne.

Käivitage ülalkirjeldatud kood, sisestage InputValue näidiskuvalt ja proovige värskendada.

Tegevuse poolel, ResultValue1 kuna väärtused on seatud ja ResultValue2 tagastatud, eeldatakse, et mõlemad kuvatakse algselt, kuid tegelikult div kuvatakse ainult sildil olev 2.

ModelState'ile seatud väärtus on ülimuslik

Kui klient sisestab sisestusväärtuse, seatakse väärtus argumendi mudelimuutujale ControllerBase.ModelState , kuid ka väärtus on seatud. Sisestatud väärtus kinnitatakse seejärel väärtusega , mis on ModelState seatud väärtusele . ModelState.IsValid Sellepärast selle üle kohut mõistetaksegi. Silumisel saate sisu kontrollida, peatades töötlemise murdepunktis.

Kui soovite algselt väärtuse vaatesse tagastada, on return View(model); ok lisada , kuid kui väärtuseks on ModelState seatud väärtus ,ModelState on väärtus ülimuslik ja tagastatakse vaatesse.

ModelState Kuna väärtuseks on seatud väärtus, mis saadetakse vaate sisestamise teel jne, on mudeli osas InputValueseatud , ResultValue1 on see seatud. SeetõttuResultValue1 on ModelState väärtus ülimuslik ja vaates kuvatakse mudelis seatud väärtus,ModelState mis pole ResultValue2 seatud.

Väärtuse tagastamine vaatesse mudeliväärtuse kasuks

ModelState Väärtused, mis on seatud vaatele eelistama, nii et kui ModelState kustutate väärtuseks seatud väärtused , tagastatakse mudeli väärtus vaatele.

ModelState.Clear() Saate kustutada kõik väärtused, mis teil on, helistades ModelState järgmiselt.

[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 teeb ka valideerimisprotsessi,ModelState.Clear nii et lugege seda kindlasti ModelState.IsValid pärast helistamist .

Kui käivitate selle, kuvatakse tulemus õigesti järgmiselt.

ModelState.Clear Kuna kõik väärtused kaovad meetodil helistamisel, on võimalik määrata ka mudeli atribuudi nimi ja kustutada väärtused individuaalselt järgmiselt.

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