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

Question

我正试图让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这一事实导致了某种冲突？

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