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

问题描述

我试图让Ajax.BeginForm调用一个函数，然后将其传递回序列中的最后一个选项卡，并从那里追加一个表。

I am trying to get Ajax.BeginForm to call a function and then pass it back to a final tab in a sequence and append a table from there.

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

This would be the basic partial view...

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

这就是我异步调用函数的方式...一切正常。 。

This would be how I am asynchronously calling my function... Everything works fine up this point...

@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方法调用的脚本中。唯一的问题是，我从来没有进入过该功能？我从没打过调试器，所以这告诉我发生了什么事，我也从未调用过该函数...
我在做什么错了？

After this goes through, I expect to call the switchToResultTab function listed in onSuccess... Which is in a script on the partial that has the .tabs() jquery method call already on it. The only problem is that I never get into that function? I never hit the debugger, so that is telling me that something is going on and I never call that function...What am I doing wrong?

更新：我正在调试此东西，并且试图找出正在发生的事情。
好​​，所以我一直在调试此东西，似乎以为我的jquery函数永远不会激活。看来我的表单正在执行实际的提交而不是ajax提交。到目前为止，这是我可以推测的。我完全不知道为什么会这样。 继续
* 更新：尝试了一系列不同的事情 *
进行了小更新...在与Ajax.BeginForm斗争之后，我回到了我的古老而又真实的Html.BeginForm方法，我编写了自己的jquery函数...

UPDATE: I am debugging this thing and I am attempting to figure out what is happeningOk, so I have been debugging this thing, and it seems as thought my jquery function never activates. It seems my form is doing an actual submit instead of an ajax submit. That is what I can surmise so far. I am completely unaware why this is happening. continuing*UPDATE: TRIED A COUPLE OF DIFFERENT THINGS*minor update... After struggling with Ajax.BeginForm, I went back to my old tried and true Html.BeginForm method and I wrote my own jquery function...

$('#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会导致某种冲突？

In both cases, it would seem that somehow or the other my Jquery library is no longer loaded by the time I get this far... It has to a confict somehow with one of the jquery libraries that I have loaded... Maybe the fact that I have jqgrid loaded on the final tab is causing some kind of conflict?

推荐答案

在您的 AjaxOptions 中，尝试替换：

OnSuccess = "switchToResultTab(data)"

with：

OnSuccess = "switchToResultTab"

还请确保在页面中包含 jquery.unobtrusive-ajax.js 脚本，否则为 Ajax.BeginForm 将类似于普通形式：

Also make sure you have included the jquery.unobtrusive-ajax.js script to your page otherwise, Ajax.BeginForm will be like a normal form:

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

这篇关于Ajax.BeginForm将Json数据传递回Jq UI选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！