title: Send javascript variable along with form data and bind it to model
body: <p>I have a simple html page.
  It contains a form.
  For eg: student information</p>
  
  <p><strong>Model:</strong></p>
  
  <blockquote>
    <p>public Class Student() 
    <br>{
    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public int Roll_no {get;set}<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public string Name  {get;set}<br> 
    }</p>
  </blockquote>
  
  <p>Html also has javascript:</p>
  
  <pre><code>&lt;script&gt;
  
  var foo= "1";
  var bar = "2";
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Controller looks like</p>
  
  <pre><code>public ActionResult AjaxCallCOntroller(int foo, int bar, Student stud)
  {
  .....
  ......
  }
  </code></pre>
  
  <p>Now I need to make ajax call to this controller which will pass this values:</p>
  
  <pre><code>       **ajax call:**
  var studentform = ("#studentform").serialize();
  $.ajax({
      type:"POST"
      , url:"appname/AjaxCallCOntroller"
      , dataType:"json",
      , data:{foo:foo,bar:bar,stud:studentform},
      , success:function(){
        //function body
      }
  );
  </code></pre>
  
  <p>The problem is that <code>foo</code> and <code>bar</code> are received by the controller but student object is null.
  Student object is recived if its sent alone.
  ie: data:studentform
  <br>Need help on this.</p>