Refléter la valeur modifiée dans l’action après la publication du formulaire dans la vue

environnement

Visual Studio

• Visual Studio 2022

ASP.NET noyau

• 6,0 MVC

Il fonctionne dans des environnements autres que ceux ci-dessus, mais le code publié a été écrit dans le framework ci-dessus.

Que faire

Essayez de créer un programme simple qui dit: « Publiez le texte que vous avez tapé à l’écran et retournez le texte traité sur le même écran en tant que nouveau résultat. »

code

La base est la création d’un nouveau projet MVC, à partir duquel vous ajoutez du code. Le code est publié pour la configuration globale, veuillez donc vous y référer.

Modèle (viewmodel)

Créez le modèle suivant pour l’interaction entre l’affichage et l’action : ResultValue Il y en a deux, mais je voulais donner deux résultats dans la vue, alors j’en ai préparé deux.

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

action

C’est un processus simple: affichez la vue, prenez le texte entré dans POST, traitez-le et renvoyez le résultat.

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

Vue

Créez des vues basées sur des actions et des modèles.

Lorsque vous ResultValue1 cliquez sur le bouton de mise à jour, et ResultValue2 sont affichés, mais ils sont affichés dans « texte d’entrée » et « dans la balise div », respectivement.

Exemple.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 Ajoutez un lien pour pouvoir passer de 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>    @* 追加 *@

La mise à jour du modèle reçu dans le processus POST n’affecte pas la saisie de la vue, etc.

Exécutez le code que vous avez créé ci-dessus, entrez à partir de InputValue l’écran Exemple et essayez de mettre à jour.

Du côté de l’action, ResultValue1 puisque les valeurs sont définies et ResultValue2 renvoyées, il est supposé que les deux sont affichées à l’origine, mais en fait div , seuls les 2 définis dans la balise sont affichés.

La valeur définie sur ModelState est prioritaire

Lorsque le client POST la valeur d’entrée, la valeur est définie sur la variable de modèle de l’argument ControllerBase.ModelState , mais la valeur est également définie. La valeur saisie est ModelState ensuite validée avec la valeur définie sur . ModelState.IsValid C’est pourquoi il est jugé. Lors du débogage, vous pouvez vérifier le contenu en arrêtant le traitement au point d’arrêt.

Si vous souhaitez à l’origine renvoyer une valeur à la vue, vous pouvez return View(model); inclure , mais si une valeur est ModelState définie sur ,ModelState la valeur de est prioritaire et est renvoyée à la vue.

ModelState Puisque la valeur définie sur est une valeur envoyée en entrant la vue, etc., en termes de InputValuemodèle, , ResultValue1 est définie. Par conséquent,ResultValue1 la valeur de est ModelState prioritaireModelState et la valeur définie dans le modèle qui n’est pas ResultValue2 définie sur est affichée dans la vue.

Pour renvoyer une valeur à une vue en faveur d’une valeur de modèle

ModelState Valeurs définies pour avoir priorité sur la vue, donc si ModelState vous effacez les valeurs définies sur , la valeur du modèle sera renvoyée à la vue.

ModelState.Clear() Vous pouvez effacer toutes les valeurs qui ont ModelState en appelant comme suit :

[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 effectue également le processus de validation,ModelState.Clear alors assurez-vous ModelState.IsValid de le lire après lorsque vous appelez .

Lorsque vous l’exécutez, le résultat s’affiche correctement comme suit.

ModelState.Clear Étant donné que toutes les valeurs disparaissent lorsque vous appelez une méthode, il est également possible de spécifier le nom de propriété du modèle et d’effacer les valeurs individuellement comme suit.

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