title: How to get viewbag data in jquery?
body: <p>Hi I am developing web application in mvc5. I have login form with username and password fields as below.</p>
  
  <pre><code>@using (Html.BeginForm("ClickAction", "Login", FormMethod.Post))
  {
             @Html.TextBox("txtUid", null, new { @maxlength = "15", id = "txtUid",  
             @class = "form-control validate[requiredInLogin] text-input "})
             @Html.Password("txtPassword", null, new { @maxlength = "15", id = 
             "txtPassword", @class = "form-control validate[requiredOutLogin] text-input" })
             &lt;input type="submit" class="btn btn-primary btnLogin red" 
             value="SIGN IN" name="submit" /&gt;
  }
  </code></pre>
  
  <p>I have below action method,</p>
  
  <pre><code>  [HttpPost]
          public ActionResult ClickAction()
          { 
           //Some logic
           //When 3 unsuccessful attempts made to login then i set
           //ViewBag.captcha = true; 
           return View();
          }
  </code></pre>
  
  <p>I will make 3 unsuccessful attempts to login then i will set ViewBag.captcha to true. Once i set ViewBag.captcha to true i want to access the ViewBag.captcha value in View and i want to display captcha. May i know how can i access Viewbag value in view? any help would be appreciated. Thanks,</p>
  
  <p>Meanwhile i tried below options,</p>
  
  <pre><code>@{
      var message = ViewBag.captcha;
  }
  </code></pre>
  
  <p>Then in JS</p>
  
  <pre><code>var message = '@message';
  if (message)
  {
  alert(message);
  }
  </code></pre>
  
  <p>Below is my login view.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div id="formID"&gt;
          @*&lt;form id="formID"&gt;*@
          &lt;div class="loginContainer"&gt;
              &lt;div class="loginContentArea"&gt;
                  &lt;div class="loginLogo"&gt;&lt;img src="~/images/c3card.png" alt="C3 Card"  align="middle" /&gt;&lt;/div&gt;
                  @using (Html.BeginForm("ClickAction", "Login", FormMethod.Post))
                  {
                      &lt;div class="loginUsernamePassword"&gt;
                          &lt;i class="fa fa-user"&gt;&lt;/i&gt;
                          @Html.TextBox("txtUid", null, new { @maxlength = "15", id = "txtUid",  @class = "form-control validate[requiredInLogin] text-input ", placeholder = "Username", autocomplete = "off" })
                      &lt;/div&gt;
                      &lt;div class="loginUsernamePassword"&gt;
                          &lt;i class="fa fa-lock"&gt;&lt;/i&gt;
                          @Html.Password("txtPassword", null, new { @maxlength = "15", id = "txtPassword", @class = "form-control validate[requiredOutLogin] text-input", placeholder = "Password", autocomplete = "off", Style = "background:#FFFFFF;" })
                     &lt;/div&gt;
                      &lt;div class="errormessage"&gt;@TempData["Message"]&lt;/div&gt;
                      &lt;div class="captcha" id="captcha"&gt;
                          &lt;div class="g-recaptcha" data-badge="inline" data-sitekey=@System.Configuration.ConfigurationManager.AppSettings["recaptchaPublicKey"]&gt;&lt;/div&gt;
                          &lt;br /&gt;
                      &lt;/div&gt;
                          &lt;div class="loginButton"&gt;
                              &lt;input type="submit" class="btn btn-primary btnLogin red" value="SIGN IN" name="submit" /&gt;
                          &lt;/div&gt;
                          &lt;div class="loginLink"&gt;@Html.ActionLink("Forgot Your Password?", "Index", "ForgotPassword")@*&lt;a href="#" data-featherlight="#recoverpwd"&gt;&lt;/a&gt;*@&lt;/div&gt;
                          }
  
                      &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          $(function () {
              $('input[type=password]').each(function () {
                 $(this).attr('data-background-color', $(this).css('background-color'));
                 $(this).css('background-color', $(this).css('color'));
                  $(this).attr('type', 'text');
                  $(this).focus(function () {
                      $(this).attr('type', 'password');
                      $(this).css('background-color', $(this).attr('data-background-color'));
                  });
  
                  $(this).blur(function () {
                      $(this).css('background-color', $(this).css('color'));
                      $(this).attr('type', 'text');
                  });
              });
          });
          jQuery(document).ready(function () {
              @{ var message = ViewBag.captcha; }
              alert(message);
              if (message) { alert(message); }
  
              $("[id=captcha]").hide();
              // binds form submission and fields to the validation engine
              jQuery("#formID").validationEngine();
              $("formID").attr('autocomplete', 'off');
              $('#txtUid').attr('autocomplete', 'off');
  
              $('#txtPassword').attr('autocomplete', 'off');
          });
          $("#myinput").rules("add", {
              minlength: 2
          });
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This does not work for me. </p>
  
  <p>May i know proper way to access viewbag value in the above scenario? Any help greatly appreciated. Thank you so much. </p>