Jquery UI 选项卡打开提交事件（asp.net MVC 3）将 JSON 返回到最终选项卡

Question

我有一个带有 jqueryUI 选项卡的页面。我有 3 个标签。前两个选项卡有两个单独的表单 您可以提交一个或另一个，但不能同时提交。当您提交一个表单时，第三个选项卡会打开，其中包含来自回发的提交结果。我有点不确定我会怎么做？到目前为止，这是我的选项卡控件...

<script type="text/javascript">
    $(function () {
        $("#searchPatient").tabs();
    });
</script>
<div id="searchPatient" style="display:inline; float:inherit">
    <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>

如您所见，我的设置很简单。这些 Partial 调用中的每一个都有部分视图，其中包含选项卡的 div。我猜在这个页面上的脚本中，我需要禁用传统的提交功能，而只显示第三个选项卡（retTable）。不确定我需要寻找什么活动？关于如何开始这方面的任何想法？有类似的例子吗？

更新： 下午好，先生。此选项卡控件完美运行，但我正在尝试扩展它... 我想将 JSON 数据发送回 retTable，并在最后一个选项卡中附加一个表...我想如果我更改了我的 Controller 方法以将 JSON 返回到页面...

public ActionResult SearchByMRN(SearchByMRNModel searchByMRN)
        {

            //Have to flesh this out more... Will return JSON result set back to SearchPatient View
            //Can pull right out of old project... Shouldn't be a major problem...
            //ImportPopulationManagementDLL's      
            string UID = HttpContext.User.Identity.Name;
            DataRepository dr = new DataRepository();
            List<SelectListItem> retVal = dr.SearchByMRN(searchByMRN, UID);
            return Json(DataRepository.searchPatientJSonStr(retVal), JsonRequestBehavior.AllowGet);// PartialView("_RetTable");
        }

我在渲染的原始视图中有这个脚本（调用 .tabs() 函数的那个​​）

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

我认为这会很简单，但不知何故，ajax 函数只是一直要求我保存 JSON 文件......我觉得这只是一个痛苦。 另外，在调用 Ajax.BeginForm 时，您将如何获得加载 gif... 我敢打赌有一个加载字段。让我仔细检查一下……

Answer 1

将你的两个表单放在 Ajax.BeginForm 中：

@using (Ajax.BeginForm("SearchByMRN",
                       "SearchController",
                       new AjaxOptions
                       {
                           HttpMethod = "POST",
                           InsertionMode = InsertionMode.Replace,
                           UpdateTargetId = "retTable",
                           OnSuccess = "switchToResultTab()"
                       },
                       new
                       {
                           id = "formSearchByMRN"
                       }))
{
    @*Form content goes here*@
    <button id="btnFormSearchByMRN" type="submit">Search<button>
}

编辑

这将呈现以下 HTML 输出：

<form method="post" id="formSearchByMRN" data-ajax-update="#retTable" data-ajax-success="switchToResultTab()"
data-ajax-mode="replace" data-ajax-method="POST" data-ajax="true" action="/SearchController/SearchByMRN" novalidate="novalidate">...</form>

当帖子成功完成时，将调用 OnSuccess-Method。

控制器动作：

[HttpPost]
public ActionResult SearchByMRN(Searchmodel searchmodel)
{
    /* Perform serach */

    return PartialView("_RetTable");
}

为您的第二个搜索表单再次执行上述操作。

MVC 会将结果标签内容替换为搜索结果，然后您需要一个 javaScript 函数来成功切换标签：

function switchToResultTab() {
    $('a[href="#retTable"]').click();
}

Answer 2

如果我没记错的话，您可以从 URL 中选择 jQuery UI 选项卡。如果您浏览到同一页面，但在页面 URL 中添加了哈希 #retTable，则将选择“返回表”选项卡。所以如果页面 URL 是 localhost/Patient/Search，则可以使用 localhost/Patient/Search#retTable 打开第三个标签页。

由于您需要在回发中执行此操作，因此表单的操作应包含哈希。这是一个关于如何做到这一点的示例：ASP.NET MVC - Post form to html bookmark?

Answer 3

第二个答案

将你的两个表单放在 Html.BeginForm 中：

@using (Html.BeginForm("SearchByMRN",
                       "SearchController",
                       FormMethod.Post,
                       new
                       {
                           id = "formSearchByMRN"
                       }))
{
    @*Form content goes here*@
    <button id="btnFormSearchByMRN" type="submit">Search<button>
}

控制器动作：

[HttpPost]
public ActionResult SearchByMRN(Searchmodel searchmodel)
{
    /* Perform serach */

    return PartialView("_RetTable");
}

为您的第二个搜索表单再次执行上述操作。

通过 ajax 提交表单：

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


function switchToResultTab() {
    $('a[href="#retTable"]').click();
}

但我更喜欢我之前使用 Ajax.BeginForm 的答案，这对我来说似乎更舒服。