CODEWITHSUNDEEP
jsonasp.net-mvc-3jquery-uijqueryjquery-tabs
dazziep
dazziep

Reputation: 245

JQuery UI Tabs not sending JSON to my controller

I have been messing around with Jquery UI Tabs and loading content via AJAX..

I tried the example off the Jquery web site, works a treat (as expected), I then wanted to try sending data to my MVC controller which looks like this...

    public ActionResult AjaxTab(string stringtest)
    {
        return View();
    }

and my view...

<div class="demo">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="@Url.Action("AjaxTab", "Home")">Tab 1</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
</div>

and my Jquery...

<script type="text/javascript">
$(function () {
    $("#tabs").tabs({
        ajaxOptions: {
            data: {stringtest: "hello"},
            error: function (xhr, status, index, anchor) {
                $(anchor.hash).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo.");
            }
        }
    });

});

again works fine :), I then wanted to create and pass a JSON object through and I've tried everything I can think of, but it won't send it :(

here is the las thing I tried...

View - same

controller...

public ActionResult AjaxTab(JsonTest jsonTest)

with new class created...

    public class JsonTest
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }        
}

and Jquery...

<script type="text/javascript">
var json  =  {"jsonTest": { Id:1 , Name:"Daz", Description:"blah blah blah" }};
$(function () {
    $("#tabs").tabs({
        ajaxOptions: {
            data: JSON.stringify(json),
            error: function (xhr, status, index, anchor) {
                $(anchor.hash).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo.");
            }
        }
    });
});

this time I get nothing for jsonTest :(

any ideas??

Upvotes: 0

Views: 600

Answers (2)

dazziep
dazziep

Reputation: 245

Here was my plan B

what I did was not use the tabs to do an AJAX load of the page but to catch the select event of that tab then do an ajax post (as below)

        $("#tabs").tabs({
        select: function(event, ui) {

            if (ui.index == 1) {
                var json  =  {"jsonTest": { Id:1 , Name:"Daz", Description:"blah blah blah" }};


                $.ajax({
                    url: '@Url.Action("AjaxTab", "Home")',
                    type: 'POST',
                    data: JSON.stringify(json),
                    contentType: 'application/json; charset=utf-8',

and this seemed to work fine..

Upvotes: 0

MisterJames
MisterJames

Reputation: 3326

Have a quick review of model binding and the "traditional" flag for your ajax requests. This is likely causing the deserialization of your JSON object to bomb out.

To verify this, set a breakpoint in the controller and examine your Request object. I'd bet 10 to 1 the data is there as passed in, but it's not getting correctly deserialized because of the array/object formatting.

Upvotes: 1

Related Questions