2017-11-20 7 views
0

私はWeb開発が初めてで、リクエスト間でデータを永続化する方法についてはわかりません。GetとPostのエラー検証の間にASP.NETコアの永続的な値があります

enter image description here

象のタイトルはtitleIdクエリパラメータに応じて、GETリクエストのAPIからフェッチされている:

これは、これまでのところ、私のサイトです。ログインを押すと、電子メールとパスワードが入力されているなど、モデルの検証が実行されています。ただし、エラーページが返された場合、その値は保持されていないため、象のテキストは空です。 POSTエラーが返されたときにその値が保持されるようにするにはどうすればよいでしょうか?それはPOSTデータに含まれなければなりませんか?私はAPIを再度要求したくありません。背後

コード:

public class IndexModel : PageModel 
{ 
    private string apiTitle; 
    public string ApiTitle { get { return apiTitle; } set { apiTitle = value; } } 

    // Bind form values 
    [BindProperty] 
    public User user { get; set; } 

    public Task<IActionResult> OnGetAsync(string titleId) 
    { 
     if (!string.IsNullOrEmpty(titleId)) 
     { 
      ApiTitle = await GetTitleFromApiAsync(titleId); 
     } 
     return Page(); 
    } 

    public async Task<IActionResult> OnPostLoginAsync() 
    { 
     if (!IsLoginFormValid()) 
     { 
      // When this is returned, for example if no password was entered, 
      // elephant title goes missing since apiTitle is null? 
      return Page(); 
     } 

     var user = await LoginEmailAsync(); 
     return RedirectToPage("/Profile"); 
    } 
} 

HTML:

@page 
@model IndexModel 
@{ 
    ViewData["Title"] = "Home page"; 
} 

<link rel="stylesheet" href="css/index.css"> 

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

<div class="login-page"> 

    <span id="label_api_title">@Model.ApiTitle</span> 

    <div class="form"> 
     <form class="login-form" method="post" asp-page-handler="Login"> 
      <input type="text" placeholder="Email" asp-for="User.Email"/> 
      <span asp-validation-for="User.Email" class="text-danger"></span> 
      <input type="password" placeholder="Password" asp-for="User.Password1" /> 
      <span asp-validation-for="User.Password1" class="text-danger"></span> 
      <button>login</button> 
      <p class="message">Not registered? <a href="#">Create an account</a></p> 
     </form> 
    </div> 
</div> 

<script src="js/index.js"></script> 

答えて

1

はい。あなたが見ているのは期待される行動です。覚えておいてください、HTTPはステートレスです。 GET用とPOST用の2つの別々のhttp呼び出しを行います。

ポストコールでApiTitleのプロパティ値を読み取り、それをビューに戻す方法を知りたい場合は、最初のコールが何をしたのか(または最初のコールがあったとしても) httpコール間で利用できるように、どこかでそれを永続化する必要があります。しかし、あなたのケースでは、それをフォームのポストに含めるだけで、フレームワークがそれをバインドする必要があります。

あなたのケースでは、このためにパブリックプロパティ(設定可能でgettable)を使用することができます。プライベート変数を保持する必要はありません。 BindProperty属性を使用してプロパティをデコレートし、モデルバインダーがこのプロパティのデータをバインドするようにします。

public class CreateModel : PageModel 
{ 
    [BindProperty] 
    public string ApiTitle { get; set; } 

    //Your existing code goes here 
} 

フォームタグ内に、ApiTitleの入力隠し要素があります。このようにして、フォームが送信されると、ApiTitleプロパティの値が要求データで送信されます。あなたのOnPostLoginAsync方法で今

<form class="login-form" method="post" asp-page-handler="Login"> 
    <input type="hidden" asp-for="ApiTitle"/> 
    <input type="text" placeholder="Email" asp-for="User.Username"/> 
    <!--Your other existing form elements --> 
    <button>login</button> 
</form> 

必要であれば、あなたはApiTitle値を読み取ることができます。 Pageを返すと(検証に失敗したとき)、UIはApiTitleプロパティ値をスパン要素に表示します。

public async Task<IActionResult> OnPostLoginAsync() 
{ 
    var title = this.ApiTitle; // If you want to read this value 

    if (!ModelState.IsValid) 
    { 
     return Page(); 
    } 
    return RedirectToPage("/Profile"); 
} 
+1

ありがとう、これは私がそれについて私の頭をまっすぐにしたときに終わったものです。 –

0

それはあなたがかみそりで自分のフォーム内にそれを送信し、その唯一のGET要求ではなく、ポスト要求していないことが考えられます:

public Task<IActionResult> OnGetAsync(string titleId)//<----its here 
    { 
     if (!string.IsNullOrEmpty(titleId)) 
     { 
      ApiTitle = await GetTitleFromApiAsync(titleId); 
     } 
     return Page(); 
    } 

// - >ポスト

でタイトルIDを渡す必要があります
public async Task<IActionResult> OnPostLoginAsync(string titleId) 
{ 



if (!string.IsNullOrEmpty(titleId)) 
     { 
      ApiTitle = await GetTitleFromApiAsync(titleId); 
     } 

    if (!IsLoginFormValid()) 
    { 
     // When this is returned, for example if no password was entered, 
     // elephant title goes missing since apiTitle is null? 
     return Page(); 
    } 

    var user = await LoginEmailAsync(); 
    return RedirectToPage("/Profile"); 
} 

とあなたのかみそりのフォームでスパンを追加します。

<span id="label_api_title">@Model.ApiTitle</span> 
<div class="form"> 
     <form class="login-form" method="post" asp-page-handler="Login"> 
     <span id="label_api_title">@Model.ApiTitle</span>/*<--------here*/ 
     <input type="text" placeholder="Email" asp-for="User.Email"/> 
     <span asp-validation-for="User.Email" class="text-danger"></span> 
     <input type="password" placeholder="Password" asp-for="User.Password1"/> 
     <span asp-validation-for="User.Password1" class="text-danger"></span> 
     <button>login</button> 
     <p class="message">Not registered? <a href="#">Create an account</a></p> 
    </form> 
+0

APIのリクエストが十分で、POST後に再度リクエストする必要はありません。 –

+0

プライマリget要求でなぜそれを渡すのかわかりません。フォームを投稿すると、titleIDにnullが渡され、OnGetAsync()のnotnullがチェックされます。 –

+0

@fasecity公開非同期タスク OnPostLoginAsyncの前に空白を追加しようとしましたが、コードとして書式設定されていますが、私はそれを許可しません。だから多分 –

関連する問題