JQuery UI 选项卡没有将 JSON 发送到我的控制器

Question

我一直在搞乱 Jquery UI 选项卡并通过 AJAX 加载内容..

我尝试了 Jquery 网站上的示例，效果很好（如预期的那样），然后我想尝试将数据发送到我的 MVC 控制器，看起来像这样......

    public ActionResult AjaxTab(string stringtest)
    {
        return 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>

还有我的 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.");
            }
        }
    });

});

再次正常工作:)，然后我想创建并传递一个 JSON 对象，我已经尝试了我能想到的一切，但它不会发送它:(

这是我尝试的最后一件事......

查看 - 相同

控制器...

public ActionResult AjaxTab(JsonTest jsonTest)

创建了新类...

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

和 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.");
            }
        }
    });
});

这一次我没有得到 jsonTest :(

有什么想法吗？？

Answer 1

为您的 ajax 请求提供模型绑定的 quick review 和“传统”标志。这可能会导致 JSON 对象的反序列化失败。

要验证这一点，请在控制器中设置断点并检查您的请求对象。我打赌 10 比 1 的数据是传入的，但由于数组/对象格式，它没有正确反序列化。

Answer 2

这是我的计划 B

我所做的不是使用选项卡来执行页面的 AJAX 加载，而是捕获该选项卡的选择事件，然后执行 ajax 发布（如下所示）

        $("#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',

这似乎工作正常..