passing model from view to controller using jquery

Question

I have a view

@using staffInfoDetails.Models
@model staffInfo

<link href="../../Content/myOwn.css" rel="stylesheet" type="text/css" />
@{staffInfo stf = Model; 
  }

<div id="education1">
@using (Html.BeginForm("addNewEdu","Home",FormMethod.Post))
{
    @Html.HiddenFor(x=>x.StaffId)
    <table>    
    <tr>
        <th>Country</th>
        <th>Board</th>
        <th>Level</th>
        <th>PassedYear</th>
        <th>Division</th>
    </tr>     
    <tr> 
       @Html.EditorFor(x => x.eduList)
    </tr>
    <tr>
    @*<td><input type="submit" value="create Another" id="addedu"/> </td>*@
    @*<td>@Html.ActionLink("Add New", "addNewEdu", new {  Model })</td>*@    
    </tr>
    </table>  
}
<button id="addedu">Add Another</button>
</div>

I want to pass the model staffInfo to controller using jquery as below

<script type="text/javascript">
    $(document).ready(function () {
        $("#addedu").live('click', function (e) {
//            e.preventDefault();           
            $.ajax({
                url: "Home/addNewEdu",
                type: "Post",
                data: { model: stf },//pass model
                success: function (fk) {
                    //                    alert("value passed");
                    $("#education").html(fk);
                }

            });
        });
    });
</script>

the jquery seems to pass only elements not whole model so how can I pass model from the view to the controller so that I don't have to write the whole parameters list in jquery

Answer 1

u can give ID to the form by using this

@using (Html.BeginForm("addNewEdu", "Home", FormMethod.Post, new { id = "addNewEduForm" }))
{

}

Then in the script

<script type="text/javascript">
    $('#addedu').click(function(e) {
      e.preventDefault();
      if (form.valid()) { //if you use validation
        $.ajax({
          url: form.attr('action'),
          type: form.attr('method'),
          data: $("#addNewEduForm").serialize(),
       success: function(data) {
                }
        });
    }
});
</script>

Answer 2

As I can see you trying to submit form with AJAX? Look at serialize function.

$('#addedu').click(function(e) {
    e.preventDefault();
    var form = $('form');

    if (form.valid()) { //if you use validation
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function(r) {

            }
        });
    }
});

Answer 3

You can get your values with getElementById then send your action:

$(document).ready(function () {
    var select = document.getElementById('...');
    $.ajax({
        type: "get", 
        url: "get_street_name", 
        data: { a: select },
        success: function (data) {
            $('#result').html(data);
        }
    });
}