title: ASP.NET MVC / JQuery/ Javascript: view will not refresh after searching (and trying to load) new data
body: <p>This is my first post of stackoverflow. I've spent the past month trying to solve this on my own, extensively searching Google and this website. Here's my problem:</p>
  
  <p>I have a website where users can search for cases. When they find a case, their results are loaded on a case details page. Users normally search for cases from the homepage by clicking a search option, where they enter a case number like the following:</p>
  
  <p><code>14-12345</code></p>
  
  <p>Users submit their search to the homepage's index controller. The controller parses the search and redirects to a "case" action. This action polls the database to get case details, and returns a case view.</p>
  
  <p>This search works - users see the results of their search on a case details page. However, a request was received so users can search for cases from the case details page as well.</p>
  
  <p>I can't make the new request work. I've tried using Web API (which really became a waste of time, because I want to return a whole view, not just search data), and I've failed to create the appropriate controller/view combination to work with my data. I usually wind up trying to use the existing controller (which has the code to search) and the case details view.</p>
  
  <p>Breaking down the pieces...</p>
  
  <ul>
  <li><p>The model data is stored in a <code>viewmodel</code> file:</p>
  
  <pre><code>public class PortalCaseView
  {
      public DocketCase CaseInfo { get; set; }
      public List&lt;CaseNote&gt; Notes { get; set; }
      public string Search { get; set; }
  
      ...other various variable declarations, etc
  }
  </code></pre></li>
  <li><p>The <strong>Index.cshtml</strong> file is the homepage/main landing page for the site. Users can search for case details by going to a section to search (code from the view here):</p>
  
  <pre><code>&lt;div class="tile"&gt;
      &lt;span&gt;Search by Case Number&lt;/span&gt;
          @Html.EditorFor(x =&gt; x.Search)
          &lt;a class="m-btn green-stripe" href="javascript:submitForm();" style="color: #444;
          text-decoration: none;"&gt;Submit&lt;i class="icon-hdd"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="m-btn red-stripe"
          href="javascript:toggleSearch();" style="color: #444; text-decoration: none;"&gt;Cancel&lt;i
          class="icon-remove"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>(Submitting the result gives a submit command, which posts the search to the controller.)</em></p></li>
  <li><p>The <strong>PortalController.cs</strong> controller file directs requests for the homepage. Its <code>Index</code> method grabs the <em>Search</em> variable, and redirects to a <strong>Case</strong> action to process:</p></li>
  </ul>
  
  <p><em>Index</em></p>
  
  <pre><code>    if (!string.IsNullOrWhiteSpace(viewmodel.Search))
      {
          ...
          return RedirectToAction("Case", new { Year = docketnumber[0], Sequence = docketnumber[1], J = viewmodel.JudgeCode });
      }
  </code></pre>
  
  <p><em>Case</em></p>
  
  <pre><code>    [HttpGet]
      public ActionResult Case(int Year, int Sequence, string J)
      {
          ...various declarations and requests to get db information...
  
          return View(vm); //vm is a viewmodel with info for the case view
      }
  
      [HttpPost]
      public ActionResult Case(PortalCaseView vm)
      {
          return View(vm);
      }
  </code></pre>
  
  <p>* When the redirect to the <em>Case</em> action is complete, the <strong>Case.cshtml</strong> view loads with the necessary details. Now that searches from the case view are required, I've added a section to the case view to take an "on-demand" search query:</p>
  
  <pre><code>    &lt;textarea id="searchForCase" style="width: 150px;"&gt;&lt;/textarea&gt;
      &lt;a class="m-btn green-stripe" href="javascript:searchCase();" style="color: #444;
              text-decoration: none;"&gt;Search&lt;i class="icon-hdd"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <ul>
  <li>And here is where problems start. During a typical run, Ajax/JSON code builds a call back to a controller action. Then, the action executes (usually on data stored in a file or folder). A view is returned, and then the page refreshes. (This is when a user is using the site.) It doesn't work the same way for my new custom code.</li>
  </ul>
  
  <p>My custom <em>searchCase()</em> function takes the case number entered by a user to search for it (it goes back to the Index action in the original <em>PortalController.cs</em> file):</p>
  
  <pre><code>    var searchCase = function () {
          var textArea = document.getElementById("searchForCase");
          var txt = String(textArea.value);
  
          jQuery.ajax({
              type: "POST",
              url: "@Url.Action("Index","Portal")",
              dataType: "json",
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify({ fromCaseSearch: txt }),
              success: function (data) {
              alert(data);
              },
              failure: function (errMsg) {
              alert(errMsg);
              }
          });
  
          $('form').submit();
      }
  </code></pre>
  
  <p><em>(Note: I've already tried changing the datatype from json to html; I'm assuming I might need to work with the content type)</em></p>
  
  <ul>
  <li><p>I've traced the progress from this point. The website goes back to <strong>PortalController.cs</strong> and to the <em>Index</em> action (following through like a good POST), and then takes the search query provided by the user. Since it falls out of the Index action when I try to redirect to the <em>Case</em> action like before, I added an <code>if</code> statement to deal with search queries directly from the case details view:</p>
  
  <pre><code>    if (!string.IsNullOrEmpty(fromCaseSearch))
      {
          System.Web.HttpContext.Current.Session.Clear(); 
          //forget why I put that clear request there, but I do 
          //use session state variables, so I might need to clear 
          //them when searching from scratch - if they exist
  
          viewmodel = new PortalIndexView();
          viewmodel.Search = fromCaseSearch;
  
          ...initialization and parsing for search...
  
          ...searching for and loading data from database(s)...
  
          ModelState.Clear(); //was hoping this would "refresh" view
                              //...this didn't work either
          return View("Case", vm); //forced website to return
                                   //case view with viewmodel data
                                   //...this actually starts loading
                                   //the case view
      }
  </code></pre></li>
  <li><p>This actually works... to a point. The data gets processed the same way, and the case view is loaded like normal. However, even after tracing the loading process (and seeing that model variables are sent to the view), the page does not update with the new information).</p></li>
  </ul>
  
  <p>So, that's where I'm stuck. I've tried tweaking some settings (and even thought the problem might be in the web.config file), but when I run across problems like this, what usually fixes the problem for me is to find out what I did wrong here (or in the general vicinity of the problem - the answers usually happen when I fix simple stuff first).</p>
  
  <p>Some last-minute things:</p>
  
  <ul>
  <li><p>PortalController.cs (the controller) outputs to Case.cshtml (the case details view). When right-clicking the <em>View controller</em> action, it redirects back to PortalController.cs (the main controller from the landing page).</p></li>
  <li><p>No other controller shares Case.cshtml.</p></li>
  <li><p>There is no <em>CaseController.cs</em> file. It looks like my predecessor simply created the search "redirect", figuring users would only search from the homepage (and they did up until now).</p></li>
  <li><p>Last-second idea? Maybe I'm supposed to account for HTTPGet and HTTPPost actions for my new code as well. Not sure... brain is mush...</p></li>
  </ul>
  
  <p>Naturally, since this is a work project, I can only provide so many details, but I'll be glad to take suggestions at this point.</p>
  
  <p>UPDATE: is it possible that my problem is because I didn't include a <code>@using (Html.BeginForm(...))</code> line in my case details view? I noticed there isn't one. Do you <em>need</em> one to be able to have official POST action in the related controller?</p>
  
  <p>One other clarification: I'm using Ajax/JSON for passing data back to the controller from the case view, since I can't get the page to just "submit" (in Javascript/JQuery code, <code>$('form').submit()</code> does not work at all). I'm wondering if it has anything to do with Web API. (There is a Web API file called <strong>CaseNoteController.cs</strong> that handles notes that get added to cases. When I was trying to work with Web API - and possibly return a view using it - I had a test api call that made the case details view page refresh effortlessly; I just couldn't figure out how to get it to work for my needs.)</p>