Passing the Model back to Server when doing Ajax

Question

here's the code in my .cshtml:

@model WebComposite.Models.MyModel
@using (Html.BeginForm())
{
      @Html.TextBoxFor(m => m.id)
      @Html.TextBoxFor(m => m.name)
}
@Scripts.Render("~/Scripts/MyScript.js")

here's the code in MyScript.js:

$('form').submit(function (e)
{
    e.preventDefault();
    //normal Ajax (my own custom version as i'm sure every one has one of these:)
    SimpleAjax("MyAction", function () { alert("Done"); });
});

And the Controller code:

[HttpPost]
public ActionResult MyAction(MyModel model)
{
     //Problem here is model.id and model.name are empty
}

any ideas? thanks in advance

yeah, tried that too... seems like most colleagues and posters here are in favor of doing the AJAX bit on their own. Anyways, I found a work around; so I'm just gonna post it down below. Thanks though ;-) — DotNet98, Jan 17 '14 at 23:09
show whats in your SimpleAjax method. Maybe you are not setting the data there? — CoffeeCode, Jan 17 '14 at 23:10

score 0 · Accepted Answer · answered Jan 17 '14 at 23:21

After a quick look around I guess the solution is pretty darn simple (thank you jquery!!): Simply serialize everything you have in the form and post it back to the controller from your ajax call:

$("form").serializeArray();

Here's my own full implementation of Ajax calls There are 3 functions (you'll to call SimplAjaxPost(url, funcDelegate) and it will do the rest for you

function Ajax(url, dataObj, getOrPost, theContext, theContentType, theDataType, successFuncName, failedFuncName, alwaysFuncName)
{
    //GET or POST:
    if (getOrPost == null) { getOrPost = 'POST'; }
    //Header (what we're sending to the server): http://stackoverflow.com/questions/2722750/ajax-datatype
    if (theContentType == null) { theContentType = 'application/x-www-form-urlencoded; charset=UTF-8'; }
    //response (what we're expeting in return):http://stackoverflow.com/questions/2722750/ajax-datatype
    if (theDataType == null) { theDataType = ""; }
    //exposing "this" to whatever:  http://stackoverflow.com/questions/5097191/ajax-context-option
    if (theContext == null) { theContext = document.body; }

    var theURL = NoCache(url);
    $.ajax(
    {
        url:            theURL,
        data:           dataObj,
        type:           getOrPost,
        contentType:    theContentType,
        dataType:       theDataType,
        context:        theContext,
        async:          false,
        success:        successFuncName,
        fail:           failedFuncName,
        always:         alwaysFuncName,
        complete:       AjaxScripts
    });
}

function SimpleAjax(url, successFunctionName)
{
    var dataObj = null;
    Ajax(url, dataObj, null, null, null, null, successFunctionName, null, null)
}

function SimpleAjaxPost(url, successFunctionName)
{
    var dataObj = null;
    if ($("form").length == 1)
    {
        dataObj = $("form").serializeArray();
    }
    Ajax(url, dataObj, null, null, null, null, successFunctionName, null, null)
}

function NoCache(url)
{
    var t = new Date();
    var qps = "?";
    if (url.indexOf("?") > 0)
    {
        qps = "&";
    }
    return url + qps + t.getYear() + t.getMonth() + t.getDay() + t.getHours() + t.getMinutes() + t.getSeconds() + t.getMilliseconds();
}

Passing the Model back to Server when doing Ajax

1 Answers1