0

我一直在搞乱 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 :(

有任何想法吗？？

4

2 回答 2

1

快速查看模型绑定和ajax请求的“传统”标志。这可能会导致 JSON 对象的反序列化被炸毁。

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

于 2012-09-06T16:23:13.523 回答
0

这是我的 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',

这似乎工作正常..

于 2012-09-07T07:47:28.043 回答