title: building relative URLs for an MVC app with JavaScript
body: <p>I'm having trouble getting C# and JavaScript/jQuery to play nice here.</p>
  
  <p>I have a knockout view model, plain old javascript object... one of its property/methods fires off an <code>.ajax()</code> call, and the url parameter is built using some of its other property values (javascript variables).</p>
  
  <p>This works fine when completely contained in JavaScript, but when deployed as an app to IIS, the relative pathing is hosed.</p>
  
  <p>In MVC3 normally I would use something like <code>@Url.Action</code> and let the server side build the address... but again, the trick is C# is unaware of the changing javascript values.</p>
  
  <h3>Code:</h3>
  
  <pre><code>var viewModel = {
      vendors: ko.observableArray([]),
      count: ko.observable(10),
      page: ko.observable(1),
      filterText: ko.observable(""),
      submit: function () {
          $.ajax({
              // works fine, until deploy when it is no longer a site relative URL
              url: 'vendors/' + viewModel.count() + '/' + viewModel.filterText(),
  
              // does not work, because C# is unaware of the javascript variables.
              //url: @Url.Action("Vendors", "Home", new { count = viewModel.count(), filter = viewModel.filterText() })
  
              dataType: 'json',
              success: function (data) {
                  viewModel.vendors(data);
              }
          });    
      }
      // next: // load sequence starting with (page+1 * count) 
      // previous: // load sequence starting with (page-1 * count)
  };
  ko.applyBindings(viewModel);
  </code></pre>
  
  <hr>
  
  <h3>Question:</h3>
  
  <p>My question then is, how can I build the url for the ajax call using the javascript variable values (ex. count, filterText) and still map from the relative root of the application?</p>