1

jqueryUI タブのあるページがあります。私は3つのタブを持っています。最初の 2 つのタブには 2 つの別個のフォームがあります。どちらか一方を送信できますが、両方を送信することはできません。1 つのフォームを送信すると、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 を含む部分ビューがあります。このページのスクリプトでは、従来の送信機能を無効にし、代わりに 3 番目のタブ (retTable) を表示する必要があると推測しています。どのイベントを探す必要があるかわかりませんか? これをどのように開始できるかについてのアイデアはありますか? 似たような例はありますか？

更新: こんにちは。このタブ コントロールは完全に機能しますが、少し拡張しようとしています... JSON データを retTable に送り返し、最後のタブにテーブルを追加したいです... コントローラー メソッドを変更して 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 をロードするにはどうすればよいでしょうか... ローディング フィールドがあるに違いありません。再確認させてください...

4

3 に答える 3

2

2 つのフォームを 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");
}

2 番目の検索フォームに対して上記をもう一度実行します。

MVC は結果タブのコンテンツを検索結果に置き換えます。その後、成功時にタブを切り替えるには JavaScript 関数が必要です。

function switchToResultTab() {
    $('a[href="#retTable"]').click();
}
于 2012-06-01T09:50:43.223 に答える
0

2 番目の回答

2 つのフォームを 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");
}

2 番目の検索フォームに対して上記をもう一度実行します。

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 を使用した以前の回答を好みます。より快適に思えます。

于 2012-06-01T12:19:42.433 に答える
0

私の記憶が正しければ、URL から jQuery UI タブを選択できます。同じページを参照するが、ページ URL にハッシュ #retTable が追加されている場合、[テーブルを返す] タブが選択されます。したがって、ページ URL が localhost/Patient/Search の場合、localhost/Patient/Search#retTable を使用して 3 番目のタブを開くことができます。

ポストバックでそれを行う必要があるため、フォームのアクションにはハッシュが含まれている必要があります。これを行う方法の例を次に示します。ASP.NET MVC - フォームを html ブックマークに投稿しますか?

于 2012-05-31T23:14:19.257 に答える