Ajax Post object is always null

Question

I have a form that has several controls in it. When a user selects a state, I am doing a post to the server to get a list of school. After the post, I was losing the values that were typed in the form. I've decided to grab the values and saved them in a session variables. The issue that I am having now is that my function has 6+ parameters. I'd like to cut it down to 3 max. I am Serialize the form, but it's not passing the object to my function on the server site. The object is always null. What am I missing here?

JavaScript Functions:

@model StudentBookTrade.Models.Book

@{
    ViewBag.Title = "AddBook";
    Layout = "~/Views/Shared/_RegularLayout.cshtml";
}

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
      //  document.getElementById('BookDescription-value').style.display = 'block';
        $('#BookDescription-value').css('display', '');
        $('#BookDescription').css('display', '');
        $('.t-input').css('display', '');
        $('.t-editor-button').css('display', '');
        $('.t-widget t-editor t-header').css('display', '');
        var SelectedState = $('#StateID').val();
        var SelectedSchool = $('#Name').val();
        var SelectedDepartment = $('#DepartmentName').val();
    });

    function changeState() {
        var SelectedState = $('#StateID').val();
        TestAddBook();
    }

function TestAddBook() {
  /*
  Passing all the variables as shown below will work, but I will like to receive the object instead.
   var bookName = $('#BookName').val();
   var authorName = $('#Author').val();
   var ISBNNumber = $('#ISNBNumer').val();
   var description = $('#BookDescription-value').val();
    var SelectedState = state;
    var SelectedSchool = school;
    var SelectedDepartment = department;

  */
        var myData = $('#form1').serialize();
        alert(myData);
            $.ajax({
                url: '@Url.Action("TestAddBook", "StudentBookTrade")',
                type: 'POST',
                datatype: 'JSON',
                data: { myData: myData }, 
                cache: false,
                // contentType: 'application;text;charset=UTF-8',
                success: function (e) {
                    window.location.href = window.location.href;
                },
                error: function (e) {
                    alert('error');
                }
            });
    }

</script>

The form:

@using (Html.BeginForm("AddBook", "StudentBookTrade", FormMethod.Post, new {id = "form1" }))
{
     @Html.ValidationSummary(true)
    <table style="width:100%;padding:30px 0 0 10px;">
        <tr>
                <td  style="text-align:center"> 
                    <table style="width:75%;padding: 0 0 10px 0;">
                        <tr>
                            <td style="text-align:center">
                               <div class="title"> Add Books </div>
                            </td>
                        </tr>
                    </table>
                </td>
         </tr>
        <tr>
            <td id="leftAlign" style="padding: 10px 0 0 0;">
                @Html.LabelFor(model => model.BookName, "Book Name:")
                <br/>
               @Html.EditorFor(model => model.BookName)
               @Html.ValidationMessageFor(model => model.BookName)
            </td>
        </tr>
         <tr>
            <td id="leftAlign" style="padding: 10px 0 0 0;">
                @Html.LabelFor(model => model.Author, "Author's Name:")
                <br/>
               @Html.EditorFor(model => model.Author)
               @Html.ValidationMessageFor(model => model.Author)
            </td>
        </tr>
         <tr>
            <td id="leftAlign" style="padding: 10px 0 0 0;">
                @Html.LabelFor(model => model.ISNBNumer, "ISBN Number:")
                <br/>
               @Html.EditorFor(model => model.ISNBNumer)
               @Html.ValidationMessageFor(model => model.ISNBNumer)
            </td>
        </tr>
        <tr>
            <td>
               @* @Html.EditorFor(model => model.BookDescription)*@
                <strong> @Html.LabelFor(model => model.BookDescription, "Description:") </strong>
                <br />
               @(Html.Telerik().EditorFor(model => model.BookDescription)
                    .Encode(true)
                    .HtmlAttributes(new { style = "height:310px;", id = "BookDescription" })
                    .Tools(tools => tools
                        .Clear()
                        .Bold().Italic().Underline().Strikethrough().Subscript().Superscript().Separator()
                        .FontName().FontSize()
                        .FontColor().BackColor().Separator()
                        .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull().Separator()
                        .InsertUnorderedList().InsertOrderedList().Separator()
                        .Indent().Outdent().Separator()
                        )
                )

                @Html.ValidationMessageFor(model => model.BookDescription)
            </td>
        </tr>
        <tr>
            <td id="leftAlign" style="padding: 10px 0 0 0;">
                @Html.Label("Select a State: ") 
                <br />
                @Html.DropDownList("StateID", null, "Choose State", new { onchange = "changeState()" })
            </td>
        </tr>
        <tr>
            <td id="leftAlign" style="padding: 10px 0 0 0;">
                @Html.LabelFor(model => model.SchoolID, "Select School:")
                <br/>
               @*@Html.EditorFor(model => model.SchoolName)*@
               @Html.DropDownList("Name", null, "Choose School", new { onchange = "changeSchool()" })
               @Html.ValidationMessageFor(model => model.SchoolID)
            </td>
        </tr>
        <tr>
            <td id="leftAlign">
                @Html.LabelFor(model => model.DepartmentID, "Select Department:")
                <br />
                 @Html.DropDownList("DepartmentName", null, "Choose Department", new { onchange = "changeDepartment()" })
                @Html.ValidationMessageFor(model => model.DepartmentID)

            </td>
        </tr>
        <tr>
            <td id="rightAlign" style="padding:0 0 5px 0;">
                <table style="width:75%;">
                    <tr>
                        <td style="text-align:center; padding:5px;">
                            <input type="submit" value="Add" class="t-button t-state-default" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
}

My Method Signature:

    [HttpPost]
    public JsonResult TestAddBook(Book mydata) 
    {
        return Json(new { ok=true });
    }

Answer 1

Try to change:

           var myData = $('#form1').serializeArray();   
            $.ajax({
                url: '@Url.Action("TestAddBook", "StudentBookTrade")',
                type: 'POST',
                datatype: 'JSON',
                data:  { myData:  JSON.stringify(myData)}, 
                cache: false,
                // contentType: 'application;text;charset=UTF-8',
                success: function (e) {
                    window.location.href = window.location.href;
                },
                error: function (e) {
                    alert('error');
                }
            });
    }