ビュー上にラベルタグを動的にレンダリングできません

Question

.cshtmlというファイルに以下のコードがあります。

<div class="row"> 

      <input type="text" placeholder="Enter POR ID" id="porID" class="col-md-2 input-sm" name="porTextBox"> 
      <button class="btn btn-primary col-md-2 btn-sm" style="margin-left:15px;width:150px;" type="submit" id="btnCreateTFSItems"><strong>Create TFS Items</strong></button> 
      @if (TempData["formState"] != null) 
      { 
       //@Html.Label("lblsuccess", "Successfully created TFS Work Items!") 
       <label id="lblsuccess" style="color:green; visibility:visible"> Successfully created TFS Work Items!</label> 
      } 
     </div> 

とボタンは、スクリプトタグ内の以下の機能を呼び出している：

<script type="text/javascript"> 
$(document).ready(function (e) { 

    $('#btnCreateTFSItems').click(function() { 
     var txt = $('#porID'); 
     var errorLabel = $('#lblError'); 
     if (txt.val() != null && txt.val() != '') { 
      //alert('clicked'); 

      $.ajax({ 
       url: '@Url.Action("CreateWorkItems", "Tables")', 
       type: 'POST', 
       data: { 'porTextBox': $('#porID').val() } 
      }); 
      // alert('Successfully added'); 
     } 
     else { 
      errorLabel.text("Please enter valid PORID"); 
      return false; 
     } 
    }); 

    $("#porID").keypress(function (e) { 
     var errorLabel = $('#lblError'); 
     errorLabel.text(""); 
     //if the letter is not digit then display error and don't type anything 
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { 
      return false; 
     } 
    }); 
}); 

問題が.cshtmlファイルであり、それは条件をチェックしているが、そのラベルを追加することではありません。理由は、ページがラベルを表示するためにリフレッシュされていないためです。私はUI開発に新しいので、私はネット上で見つけた特定のオプションを試しましたが、動作させることはできませんでした。私はこれを達成する方法はありますか？

Answer 1

理由は、ラベルをレンダリングするためにページがリフレッシュされていないことが原因である可能性があります。

正確に。 JQuery（クライアントスクリプト）を使用してサーバーにAjaxリクエストを行い、ラベルを表示するためにRazorコード（サーバーコード）が実行されたと想定します。サーバーコードがクライアントコードについて何も知らないため、これは機能しません。

解決策は、JQuery経由でラベルを表示することです。デフォルトでレンダリングしますが、CSSで非表示にします（display：none）。要求が成功した後、JQueryを使用してCSS表示プロパティを "ブロック"または "インライン"に設定することで、ラベルを表示できます。