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>