Az űrlap nézetben való feladása után végrehajtott műveletben módosított érték tükrözése

Oldal létrehozásának dátuma :

környezet

Visual Studio
  • Visual Studio 2022
ASP.NET mag
  • 6,0 MVC

A fentiektől eltérő környezetben működik, de a közzétett kód a fenti keretben íródott.

Mit kell tenni

Próbáljon meg létrehozni egy egyszerű programot, amely azt mondja: "Tegye közzé a beírt szöveget a képernyőn, és adja vissza a feldolgozott szöveget ugyanarra a képernyőre, mint egy új eredmény."

kód

Az alap egy új MVC projekt létrehozása, amelyből kódot ad hozzá. A kódot a teljes konfigurációhoz közzétesszük, ezért kérjük, olvassa el.

Modell (viewmodel)

Hozza létre a következő modellt a nézet- és műveleti interakcióhoz: ResultValue Kettő van, de két eredményt akartam adni a nézetben, ezért kettőt készítettem.

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

akció

Ez egy egyszerű folyamat: megjelenítheti a nézetet, vegye be a POST-ba beírt szöveget, dolgozza fel és adja vissza az eredményt.

FőoldalVezérlő

// 省略

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

nézet

Nézetek létrehozása műveletek és modellek alapján.

ResultValue1 Amikor rákattint a frissítés gombra, és ResultValue2 megjelenik, de azok a "bemeneti szövegben" és a "div címkében" jelennek meg.

Minta.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 Adjon hozzá egy hivatkozást, hogy a rendszerről Sample áttérhessen a következőre: .

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

A POST folyamat során kapott modell frissítése nem befolyásolja a nézet bemenetét stb.

Futtassa a fent létrehozott kódot, írja be a Minta képernyőről InputValue , és próbálja meg frissíteni.

A műveleti oldalon, ResultValue1 mivel az értékek be vannak állítva és ResultValue2 visszaadják, feltételezzük, hogy mindkettő eredetileg megjelenik, de valójában div csak a címkén lévő 2-es készlet jelenik meg.

A ModelState érték elsőbbséget élvez

Amikor az ügyfél POZT-ja a bemeneti értéket, az érték az argumentum modellváltozójára ControllerBase.ModelState lesz állítva, de az érték is be van állítva. A beírt értéket ezután a ModelState program a következő értékre állítja: . ModelState.IsValid Ezért ítélik meg. Hibakereséskor ellenőrizheti a tartalmat, ha leállítja a feldolgozást a törésponton.

Ha eredetileg vissza szeretne adni egy értéket a nézetnek, akkor rendben vanreturn View(model);, ha felveszi a , de ha egy érték ModelState értéke van beállítva ,ModelState akkor az érték elsőbbséget élvez, és visszakerül a nézetbe.

ModelState Mivel a beállított érték a nézet beírásával küldött érték stb., a modell szempontjából InputValue, a , ResultValue1 van beállítva. ResultValue1 Ezért a lista értéke ModelState elsőbbséget élvez, és a modellben beállított érték,ModelState amely nincs ResultValue2 beállítva, megjelenik a nézetben.

Érték visszaadása egy nézetnek modellérték javára

ModelState A nézetet előnyben részesítő értékek, így ha ModelState törli a beállított értékeket, a modell értéke visszakerül a nézetbe.

ModelState.Clear() Az összes értéket törölheti, ha ModelState az alábbi módon hívja:

[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 az ellenőrzési folyamatot is elvégzi,ModelState.Clear ezért a hívás után feltétlenül ModelState.IsValid olvassa el.

Futtatáskor az eredmény az alábbiak szerint jelenik meg helyesen.

ModelState.Clear Mivel metódus hívásakor minden érték eltűnik, lehetőség van a modell tulajdonságnevének megadására és az értékek egyenkénti törlésére is az alábbiak szerint.

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