JQuery UI Tabs not sending JSON to my controller

Question

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??

MisterJames · Accepted Answer · 2012-09-06 16:23:13Z

1

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.

answered Sep 6, 2012 at 16:23

MisterJames

3,3261 gold badge32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dazziep Over a year ago

Hi MisterJames, thanks for your reply.. I will give this a try when I get the chance but unfortunately though the code I posted was just some noddy code I knocked up for testing purposes the actual application of it was real and very urgent, so I had to go to plan B, which seemed to work.. I will try and post my solution so you can see what I did..

dazziep · Accepted Answer · 2012-09-07 07:47:28Z

0

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..

answered Sep 7, 2012 at 7:47

dazziep

2551 gold badge4 silver badges16 bronze badges

1 Comment

MisterJames Over a year ago

Glad you found something that worked, and thanks for sharing your solution!

Collectives™ on Stack Overflow

JQuery UI Tabs not sending JSON to my controller

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related