title: Using AJAX in a Shared MVC Component
body: <p>I have AJAX working for a single page, but I want it to work across all pages. How can I accomplish it?</p>
  
  <p>Here is the JavaScript in scripts.cshtml:</p>
  
  <pre><code>function changeTab(tabId) {
      var url = "Home/changeTab/" + tabId;
      $.ajax({
          url: "Home/changeTab/" + tabId,
          success: function (tab) {
              var t = tab;
              $("#menu1").html(t);
          }
      });
  }
  </code></pre>
  
  <p>I have a component Home.cs:</p>
  
  <pre><code>namespace Web.Controllers
  {
    public class HomeController : Controller
    {
      [Authorize]
      public ActionResult Index()
      {
          return View();
      }
  
      [AcceptVerbs("GET")]
      public JsonResult changeTab(int id)
      {
          var saveTab = id;
          string username = User.Identity.Name;
          [...]
          return Json(username, JsonRequestBehavior.AllowGet);
      }
    }
  }
  </code></pre>
  
  <p>The code works well on the Home page, but not on any other. Where do I place the changeTab function so that every page can call it?</p>