title: How do I Show/Hide partial view based on result I get from service call using jQuery AJAX in MVC4?
body: <p>I want to have a page where I can enter loan number then I will call a WCF get service to see if a loan number is valid. If loan# is valid, I want to show loan related data (partial view) on the same page.</p>
  
  <p>Here is my main View:</p>
  
  <pre><code>@model LoanStatus.Web.Models.Validate    
  @{
      ViewBag.Title = "Validate";
  }    
  @section Scripts {
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/jqueryval") 
      @Scripts.Render("~/bundles/jqueryui")
  }    
  
  &lt;script type="text/javascript"&gt;
  
      jQuery(function ($) {
          $("#txtssn").mask("9999");
      });
  
      function validateRequest() {
  
          var $form = $('form');
          if ($form.valid()) {
              $.support.cors = true;
  
              var lnkey = $('#txtlnkey').val();                
  
              $.ajax({
                  type: "GET",
                  url: "http://localhost:54662/Service1/ValidateRequest/" + encodeURIComponent(lnkey),                    
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",  //jsonp?
                  success: function (response) {
                      $('#Result').html('Loading....');
  
                      if (response.ValidateRequestResult.toString().toUpperCase() == 'TRUE') {
                          alert('validated');
  
                      } else {
                          alert('cannot validated' + response.ValidateRequestResult.toString().toUpperCase());
                          //$("#Result").hide();
                      }
  
                      $('#Result').html(response.ValidateRequestResult);
                      //alert(response.ValidateRequestResult.toString());
                  },
                  error: function (errormsg) {
                      alert("ERROR! \n" + JSON.stringify(errormsg));                        
                  }
              });
              //
          } else {
              $('#Result').html('Input Validation failed');
          }
      }
  &lt;/script&gt;   
  
  @using (Html.BeginForm()) {
  
          &lt;fieldset&gt;
              &lt;legend&gt;Log in Form&lt;/legend&gt;
              &lt;ol&gt;
                  &lt;li&gt;
                      @Html.LabelFor(m =&gt; m.LoanKey, new{}) 
                      @Html.TextBoxFor(m =&gt; m.LoanKey, new { @id = "txtlnkey" })
                      @Html.ValidationMessageFor(m =&gt; m.LoanKey)
                  &lt;/li&gt;                    
              &lt;/ol&gt;
              &lt;input type="button" value="Get Status" onclick="javascript:validateRequest();" /&gt;
          &lt;/fieldset&gt;
      }
  
  &lt;div id="Result"&gt;    
      @if (ViewBag.Validated)
      {
          @Html.Action("GetLoanInfo");
      }
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is my controller:</p>
  
  <pre><code>namespace LoanStatus.Web.Controllers
  {
      public class ValidateController : Controller
      {
          //
          // GET: /Validate/
          [HttpGet]
          public ActionResult Index()
          {
              var model = new Validate() {LoanKey = "", Last4Ssn = ""};    
              ViewBag.Validated = false;                
              return View(model);
          }
  
          [HttpPost]
          public ActionResult Index(Validate model, bool validated)
          {
              // do login stuff
              ViewBag.Loankey = model.LoanKey;
              ViewBag.Validated = true;    
              return View(model);
          }
  
  
          public ActionResult GetLoanInfo() // SHOWs Search REsult
          {
             return PartialView("_LoanInfoPartial", ViewBag.Loankey);
          }
  
      }
  }
  </code></pre>
  
  <p>I want to have '<code>@Html.Action("GetLoanInfo");</code>' rendered only if jQuery AJAX service call returns TRUE (Where I have <code>alert('validated')</code>. I am not sure how to do that. My issue can be resolved if I can set value to <code>ViewBag.Validated</code> in  <code>success:function()</code>. But based on what I read, it cannot be set in jQuery. </p>
  
  <p>I tried <code>$("#Result").hide();</code> and <code>$("#Result").show();</code> but it did not work. Please help.</p>