Ajax.BeginForm将Json数据传递回Jq UI选项卡

时间:2012-07-17 21:28:28

标签: jquery-ui-tabs ajax.beginform

我试图让Ajax.BeginForm调用一个函数,然后将它传递回序列中的最后一个标签,并从那里附加一个表。

这将是基本的局部视图......

<script type="text/javascript">
    $(function () {
        $("#searchPatient").tabs();
    });
    function switchToResultTab(data) {
        $('a[href="#retTable"]').click();
        debugger;
        $("#list").setGridParam({
            datatype: 'jsonstring',
            datastr: data,
            caption: 'Patient Search Result'
        }).trigger("reloadGrid");
    };

    function failToTab(data) {
        alert("");
        $("list").setGridParam({
        datatype:'jsonstring',
        caption: 'Patient Search Result',
        datastr:data
        }).trigger("reloadGrid");
    };
</script>
<div id="searchPatient" style="display:inline; float:inherit; width:100%">
    <ul>
        <li><a href="#searchByMRN">Search By MRN</a></li>
        <li><a href="#searchByDemographics">Search By Demo</a></li>
        <li><a href="#retTable">Return Table</a></li>
    </ul>
    @Html.Partial("_SearchByMRN")
    @Html.Partial("_SearchByDemographic")
    @Html.Partial("_RetTable")


</div>

这就是我异步调用我的函数的方式......这一切都很好......

@using(Ajax.BeginForm("SearchByDemographic",
                            "SearchPatients",
                            null,
                            new AjaxOptions{
                                HttpMethod = "POST",
                                InsertionMode = InsertionMode.Replace,
                                LoadingElementId = Url.Content("~/Images/ajax-loader.gif"),
                                UpdateTargetId = "retTable",
                                OnSuccess = "switchToResultTab(data)",
                                OnFailure = "FailToTab"
                            }, 
                                new{
                                    id = "formSearchByMRN"
                                }
                            )
              )

在此过程之后,我希望调用onSuccess中列出的switchToResultTab函数...这是在部分上的脚本中,该脚本上已经有.tabs()jquery方法调用。唯一的问题是我从未进入过这个功能?我从来没有打过调试器,所以这告诉我发生了什么事,我从来没有打过那个函数...... 我做错了什么?

更新:我正在调试此事,我正在试图弄清楚发生了什么 好吧,所以我一直在调试这个东西,似乎我认为我的jquery函数永远不会激活。似乎我的表单正在进行实际提交而不是ajax提交。这是我到目前为止所能推测的。我完全不知道为什么会这样。的继续 * 更新:尝试了不同的一切 * 小更新...在与Ajax.BeginForm挣扎之后,我回到了我原来尝试过的真正的Html.BeginForm方法,并编写了自己的jquery函数......

$('#searchByDemographics').submit(function () {//#formSearchByMRN, 
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#retTable').html(result);
                switchToResultTab(result);
            }
        });
    }
    return false;
});

在这两种情况下,到目前为止我的Jquery库似乎不知不觉地被加载了......它必须以某种方式与我加载的一个jquery库进行混淆。也许我在最后一个标签上加载jqgrid的事实引起了某种冲突?

1 个答案:

答案 0 :(得分:1)

AjaxOptions中,尝试替换:

OnSuccess = "switchToResultTab(data)"

使用:

OnSuccess = "switchToResultTab"

另外,请确保您已将jquery.unobtrusive-ajax.js脚本包含在您的网页中,否则Ajax.BeginForm将像普通表单一样:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>