title: How to clear TempData on click?
body: <p>I have a set of tabs in my page, each of which holds a different form:</p>
  
  <pre><code>&lt;ul id="tabs" class="nav nav-pills" data-tabs="tabs"&gt;
  &lt;li class="active"&gt;&lt;a href="#overview" data-toggle="tab"&gt;Overview&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#reports" data-toggle="tab"&gt;Reports&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#photos" data-toggle="tab"&gt;Photos&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The tabs are Bootstrap V3.</p>
  
  <p>When a user saves a form I show a success confirmation message using TempData:</p>
  
  <pre><code>TempData["success"] = "Your insrecord has been successfully created.";
  </code></pre>
  
  <p>And I display it under the correct tab:</p>
  
  <pre><code>@if (TempData["success"] != null)
  {
      &lt;div class="alert alert-success"&gt;
          @Html.Raw(@TempData["success"])
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>The problem is that if a user clicks on one of the tabs, and then clicks back, the TempData is still displayed.  Is there a way to manually clear TempData if the user clicks on any of the tabs?</p>