Assign values to ViewData from client using MVC

I inherited an MVC app and am a true novice at it coming from an ASP.NET environment. My problem is I can't manage to move variable data between my partial views and controllers. In ASP.NET this was pretty straight forward, not the case in MVC. So the following code fires when a Tab is selected from the client but I need to capture the selectedTabIndex value from the client and pass it to the controller.

    function onTabSelect(e) {
    var selectedTabIndex = 0;
    selectedTabIndex = $(e.item).index();
    alert(selectedTabIndex);
    }

I considered using the ViewData object but there doesn't appear to be a way to make perform this task of assignment from within the function. So the following code would seem to be a ridiculous task and it fails anyway. (Remember, I am开发者_StackOverflow社区 an extreme novice at this)

    function onTabSelect(e) {
    var selectedTabIndex = 0;
    <% =ViewData["selectedTabIndex"]%> = selectedTabIndex;      
    }

I also considered using cookies but that doesn't seem to be a practical method either. In ASP.NET I could access the client controls using the .find method but this is a steep learning curve for me.

What are my alternatives?

If different tabs can be selected by the user between Save operations, you might need to consider binding some kind of click function (using jQuery) to set the selectedTabIndex javascript variable. Alternatively, you could set a hidden input's value to the selected tab index.

In either case, if you need the value in your controller (to set ViewData, ViewBag, some model data, etc) when a Save operation is submitted, you could submit the data via $.ajax and return some JSON from your controller

$('#SaveButton').click(function() {
  $.ajax({
    url: '/Controller/Save',
    type: 'POST',
    // you might need to serialize additional data you want to save here
    // but you could create any JSON object before calling $.ajax
    data: {"selectedTabIndex": selectedTabIndex}, // data to POST
    dataType: 'json', // this indicates the type of data returned from controller
    success: function(data) {
      // you didn't really describe how to programatically set a tab,
      // so "setToTab" is a guess
      $('#tabID').setToTab(data.selectedTabIndex);
    }
  });
}

And your controller might look something like

public ActionResult Save(int selectedTabIndex)
{
  // again, you might need different parameters to complete your Save
  return JsonResult(new { selectedTabIndex: selectedTabIndex });
}

Data is sent to a controller via a HTTP POST. Create a hidden input <input type="hidden" name="selectedTabIndex"/> and set the value with javascript prior to POST. The controller can extract this value from the Form parameters, or it can be autopopulated in the Action method if the method contains a parameter matching the input name.

This is a non-ajax alternative to the answer provided by David.