Unable to post data to controller's action method using Ajax call

Question

I am trying to Post a Partial View's data to the server to save the input fields result to database and then return back to the same (partial view which is open as a modal dialog) or return to the parent view which called the modal dialog.

But for some reason, I am not getting the Action method's parameter (i.e. weldMaster) in the Controller which is being sent from the ajax method call.

Here is my controller method.

    // GET: WeldMasters/Details/5
    public ActionResult Details(int? ids, bool isPartials = false)
    {
        if (ids == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        WeldMaster weldMaster = db.WeldMasters.Find(ids);
        ViewBag.Readonly = false;
        if (weldMaster == null)
        {
            return HttpNotFound();
        }
        if(isPartials)
            return PartialView(weldMaster);
        else
            return View(weldMaster);
    }

    // POST: WeldMasters/Details/5
    [HttpPost]
    [ValidateAntiForgeryToken]
    public JsonResult Details**(WeldMaster weldMaster)** 
    //{"The parameter conversion from type 'System.String' to type 'IMCC_PAS.Entities.WeldMaster' failed because no type converter can convert between these types."}
    {
        var success = 0;
        if (ModelState.IsValid)
        {
            success = 1;
            db.Entry(weldMaster).State = EntityState.Modified;
            db.SaveChanges();
            return Json(new { success });
        }
        return Json(new { success });
    }

Here is the ajax code

    <script type="text/javascript">
    $(document).ready(function () {
        $(".saveBtn").click(function (e) {
            debugger;
            var token = $('input[name="__RequestVerificationToken"]').val();
            // If I dont pass the token in the `data` parameter of ajax, then action method of controller is not called at all.            
e.preventDefault();
            $.ajax({

                type: "POST",
                url: '@Url.Action("Details", "WeldMasters")',
                data: { __RequestVerificationToken: token, weldMaster: $('#__AjaxAntiForgeryForm').serialize() },
                success: function (result) {
                    alert(result);
                },
                failure: function (response) {
                    alert(result.responseText);
                },
                error: function (response) {
                    alert(result.responseText);
                }
            });
        });
    });
</script>

Here is the modal for the partial view

@model IMCC_PAS.Entities.WeldMaster

and here is the form

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "__AjaxAntiForgeryForm" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.id)

        <div class="row">
            <div class="col-md-3 col-sm-12">
                @Html.LabelFor(model => model.weld_no, htmlAttributes: new { @class = "control-label" })
            </div>
            <div class="col-md-3 col-sm-12">
                @Html.LabelFor(model => model.rep_no, htmlAttributes: new { @class = "control-label" })
            </div>
            <div class="col-md-3 col-sm-12">
                @Html.LabelFor(model => model.length, htmlAttributes: new { @class = "control-label" })
            </div>
            <div class="col-md-3 col-sm-12">
                @Html.LabelFor(model => model.normal_size, htmlAttributes: new { @class = "control-label" })
            </div>
        </div>
        <div class="row">
            <div class="col-md-3  col-sm-12">
                @Html.EditorFor(model => model.weld_no, ViewBag.Readonly ? (object)new { htmlAttributes = new { @readonly = "readonly", @class = "form-control" } } : new { htmlAttributes = new { @class = "form-control" } })
            </div>
            <div class="col-md-3  col-sm-12">
                @Html.EditorFor(model => model.rep_no, ViewBag.Readonly ? (object)new { htmlAttributes = new { @readonly = "readonly", @class = "form-control" } } : new { htmlAttributes = new { @class = "form-control" } })
            </div>
            <div class="col-md-3  col-sm-12">
                @Html.EditorFor(model => model.length, ViewBag.Readonly ? (object)new { htmlAttributes = new { @readonly = "readonly", @class = "form-control" } } : new { htmlAttributes = new { @class = "form-control" } })
            </div>
            <div class="col-md-3  col-sm-12">
                @Html.EditorFor(model => model.normal_size, ViewBag.Readonly ? (object)new { htmlAttributes = new { @readonly = "readonly", @class = "form-control" } } : new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div> 

        <div class="form-group modal-footer">
            <div class="col-md-12">
                <a class="saveBtn" href="javascript:void(0);">Edit</a>
            </div>
        </div>

    </div>
}

EDIT: Here is the parent view which has the selection parameters for showing the weld details. And then Weld details are shown in a div (for readonly purpose) and can be edited in a popup modal dialog on a button click.

    <script>
    $(document).ready(function () {

        ... more code for other dropdowns here

        //When Wled No is changed, reload Weld Details in its respective Partial view
        $("#weldddl").change(function () {

            var parameter = { ids: $("#weldddl").val(), isPartials: true };
            $.ajax({
                url: '/WeldMasters/Details/',
                type: 'GET',
                data: parameter,
                success: function (result) {
                    var div = $('#weldDetails');
                    div.html('');
                    div.html(result);
                }
            });
        });

        $(".editWeldBtn").click(function () {
            //debugger;
            $('#MyModal').empty();
            $('#MyModal').append(GetModalDialog());
            var link = '@Url.Action("Details", "WeldMasters")';
            data = { ids: $("#weldddl").val(), isPartials: true };
            LaunchModalDlg(link, data, "View Weld Master Information", "75%");
        });

    });
</script>

<h4>Index</h4>
<script src="~/Scripts/MyScripts.js"></script>
<p>
    @Html.ActionLink("Create New", "Create") | 
    <a class="editWeldBtn" href="javascript:void(0);">Edit</a>
</p>
<div class="row">
    <div class="col-sm-3">
        @Html.LabelFor(model => model.Discipline, htmlAttributes: new { @class = "control-label col-md-12" })
        <div class="col-md-12">
            @Html.DropDownListFor(model => model.Discipline, (SelectList)ViewBag.disciplines, htmlAttributes: new { @class = "form-control", @id = "disciplineddl" })
            @Html.ValidationMessageFor(model => model.Discipline, "", new { @class = "text-danger" })
        </div>

        @Html.LabelFor(model => model.DrawingNo, htmlAttributes: new { @class = "control-label col-md-12" })
        <div class="col-md-12">
            @Html.DropDownListFor(model => model.DrawingNo, (SelectList)ViewBag.drawings, htmlAttributes: new { @class = "form-control", @id = "drawingddl" })
            @Html.ValidationMessageFor(model => model.DrawingNo, "", new { @class = "text-danger" })
        </div>

        @Html.LabelFor(model => model.ComponentNo, htmlAttributes: new { @class = "control-label col-md-12" })
        <div class="col-md-12">
            @Html.DropDownListFor(model => model.ComponentNo, (SelectList)ViewBag.components, htmlAttributes: new { @class = "form-control", @id = "componentddl" })
            @Html.ValidationMessageFor(model => model.ComponentNo, "", new { @class = "text-danger" })
        </div>

        @Html.LabelFor(model => model.WeldNo, htmlAttributes: new { @class = "control-label col-md-12" })
        <div class="col-md-12">
            @Html.DropDownListFor(model => model.WeldNo, (SelectList)ViewBag.components, htmlAttributes: new { @class = "form-control", @id = "weldddl" })
            @Html.ValidationMessageFor(model => model.WeldNo, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="col-sm-9" id="weldDetails"> <!--This is for showing the partial view for showing weld details-->
    </div>
    <div id="MyModal"></div> <!--This is for pop up modal dialog-->
</div>

Answer 1

If you are serializing the full form then you don't need to send explicitly anti forgery token.

use this:

 data: $('#__AjaxAntiForgeryForm').serialize(),