JQuery using Json to call Controller/Action

Question

I have a search page where the top of the page is search criteria with a search button. The bottom of the screen is the results from when the search button is pressed. In this case I have 6 different search criteria the user can input. I would like to bundle all the criteria into one class so my Controller action can read the Json object as a class. Using FireBug I am able to see my Json is built correctly. Using the debugger I know that my Controller/Action is getting fired. However when I look at the class object with the debugger in the Controller/Action, all the properties are null or zero.

Here is my Controller…. [AcceptVerbs(HttpVerbs.Post)] public ActionResult GetStudentByCritera(StudentSearchCriteraCV critera) { // Get the Data ViewData["MainData"] = studentBLLHdl.StudentFind(critera); return View(); }

Here is the JavaScript/JQuery that calls the controller… function LoadResultTable() { // build Json object to send var dataToSend = BuildJson()

        $.ajax({
            url: "GetStudentByCritera",
            type: 'POST',
            data: dataToSend,
            dataType: 'json',
            contentType: "application/json; charset=utf-8", 
            beforeSend: ClientSideValidate,
            success: function(result) 
            {
                alert(result.Result);
                $('#SearchResult').html(result.Result).show();
                // UnBlock UI
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) 
            {
                // UnBlock UI

                // not sure how to handel error
                alert("error happen when posting to 'GetStudentByCritera'")

                // typically only one of textStatus or errorThrown 
                // will have info
                this; // the options for this ajax request
            }


        });
    }

    function BuildJson()
    {
        // building Json            

        var dataForClass = { "StudentSearchCriteraCV" : [{
            "StudLname": $("input[name='StudentSearchCriteraCV.StudLname']").val(),
            "StudFname": $("input[name='StudentSearchCriteraCV.StudFname']").val(),
            "Ssn": $("input[name='StudentSearchCriteraCV.Ssn']").val(),
            "StudId": $("input[name='StudentSearchCriteraCV.StudId']").val(),
            "Sex": $("input[name='StudentSearchCriteraCV.Sex']").val(),
            "Race": $("input[name='StudentSearchCriteraCV.Race']").val()
            }]};

        return $.toJSON(dataForClass );
     }

    function ClientSideValidate() 
    { 
        // Block the UI
        alert( "In the ClientSideValidate" );

        // if error UNBlock UI
        // return true if client side data is good.

        return true; 
    } 


</script>

Answer 1

Hi,

You need to create an action filter inheriting from ActionFilterAttribute. Take a look here http://forums.asp.net/t/1237429.aspx or here http://www.c-sharpcorner.com/Blogs/BlogDetail.aspx?BlogId=863 for more details on how to build this.

Answer 2

I believe that your JSON value needs to be in quotes, unless it is a number.

"StudFname": '"' + $("input[name='StudentSearchCriteraCV.StudFname']").val() + '"',

I haven't used .toJSON(), but I believe that it turns your JSON object into a String. Since you're creating your object just to turn it into a string right away, why not create it as a string to begin with? That's what I did when I ran into this problem (debugger showing zeros for values.)

var dataForClass = '{ "StudentSearchCriteraCV" : [{ ' +
        '"StudLname": "' + $("input[name='StudentSearchCriteraCV.StudLname']").val() + '", ' +
        '"StudFname": "' + $("input[name='StudentSearchCriteraCV.StudFname']").val() + '", ' +
        '"Ssn": "' + $("input[name='StudentSearchCriteraCV.Ssn']").val() + '", ' +
        '"StudId": ' + $("input[name='StudentSearchCriteraCV.StudId']").val() + ', ' + //assuming StudID is a number
        '"Sex": "' + $("input[name='StudentSearchCriteraCV.Sex']").val() + '", ' +
        '"Race": "' + $("input[name='StudentSearchCriteraCV.Race']").val() +'" ' +
        '}]}';

Answer 3

Your ajax call is just an asynchronous HTTP post, therefore the data paramter can only be key value pairs, not a JSON object. If you flatten dataForClass it will work.