0

jQueryUI ダイアログを使用して、一致したデータのリストを表示し、選択したデータを JSON 経由で ajax/jquery を使用して元のビューに戻そうとしています。

フローは、表示 (ユーザーがテキストボックスに入力してハイパーリンクをクリック) > jQuery ダイアログでの部分表示 > JSON データをフォームに戻すことです。

私の最初の質問は:-

Q. これは可能であるべきですか、それとも不可能なことをしようとしていますか?

それが機能する必要がある場合、ここに私のコードがあります

インデックス ビュー

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@Html.TextBox("Postcode") <a href="#" id = "PCSearch">Search</a>

<div id="mDialog"></div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#mDialog").dialog({
            modal: true,
            width: 550,
            height: 250,
            resizable: true,
            position: 'center',
            title: 'Select Correspondent',
            autoOpen: false,
            dataType: 'json',
            //open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            success: function (data) {

            }
        });

        $('#PCSearch').click(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "/Item/Search",
                dataType: 'html',
                data: { Postcode: $("#Postcode").val() },
                success: function (data) {
                    $("#mDialog").html(data).dialog('open');
                    console.log("Hello");
                }
            });
        });
    });
</script>

アイテムコントローラー

[HttpPost]
public ActionResult Search(string postcode)
{
    if (postcode == null || postcode == "")
    {
        return PartialView("SearchByPostCode", null);
    }
    var model = Correspondents.Where(x => x.Postcode.ToLower().Contains(postcode.ToLower()));
    return PartialView("SearchByPostCode", model);
}
[HttpPost]
public ActionResult ChooseCorrespondent(int CorrespondentID)
{
    return Json(CorrespondentID, "text/html");
}

フローは正常に機能しています。ユーザーがテキストを入力すると、Item/Search PartialView がモーダル ダイアログに表示されます。ユーザーがボタンを選択すると、ChooseCorrespondent がヒットしますが、ページは CorrespondentID を含む空白の画面にリダイレクトされます。呼び出しページ。

JSON をキャッチして Index ビューを更新するために多くの例とメソッドを試しましたが、失敗 (エラー) するか、Json を空白のページに返します。

Q. このような状況で Json の戻り値をキャッチする最適な方法は何ですか?

ここまで読んでくれてありがとう！

アップデート

私はjavascriptを次のように組み合わせました:

    $(document).ready(function () {
    $('#PCSearch').click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/Item/Search",
            dataType: 'html',
            data: { Postcode: $("#Postcode").val() },
            success: function (data) {
                $("#mDialog").html(data).dialog({
                    modal: true,
                    width: 550,
                    height: 250,
                    resizable: true,
                    position: 'center',
                    title: 'Select Correspondent',
                    autoOpen: false
                }).dialog('open');
                //How can I trap the Json returned from this dialog open?
                //Using a bindForm function ?
            }
        });
    });
});

返された Json をトラップして元のページを更新しようとしています。

4

1 に答える 1

0

これは少し複雑になりましたが、現在は機能しています

ジャバスクリプトは

<script type="text/javascript">
        $(document).ready(function () {
            $("#searchClick").live("click", function (e) {
                e.preventDefault();
                var title = 'Select Correspondent';
                var url = '@Url.Action("Select", "Correspondent", new { Postcode = "xx" })'.replace('xx', $("#Postcode").val().replace(" ", ""));
                $('#dialog').load(url, function () {
                    $(this).dialog({
                        open: function (event, ui) { $('#submit').blur(); },
                        title: title,
                        modal: true,
                        width: 700,
                        height: 350,
                        resizable: false
                    })
                    bindForm(this);
                });
                return false;
            });
            $("#searchClear").live("click", function (e) {
                resetCorrespondent();
            });
        });
        function bindForm(dialog) {
            $('form', dialog).submit(function (data) {
                data.preventDefault();
                $('#dialog').dialog('close');
                var chosenID = $("input[type=submit][clicked=true]").prev().val();
                var url = '@Url.Action("Picked", "Correspondent", new { CorrespondentId = "xx" })'.replace('xx', chosenID);
                $.post(url, function (response) {
                    if (response.success) {
                        if (typeof response.Correspondent == 'object') {
                            var $inputs = $('#IC input');
                            $.each(response.Correspondent, function (key, value) {
                                $inputs.filter(function () {
                                   return "Item.Correspondent." + key == this.name;
                                }).val(value).attr("disabled", true);
                           });
                           var text1 = 'Two';
                           $("select option").filter(function () {
                               return $(this).text() == response.Salutation;
                           }).attr('selected', true).attr("disabled", true);
                           $("#Item_CorrespondentID").val(response.Correspondent.CorrespondentID);
                           $("#searchClick").hide();
                           $("#searchClear").show();
                           $("#EnterName").hide();
                           $("#ShowName").show();
                        }
                    }
                    else {
                        resetCorrespondent();
                    }
                });
            });
        }
        function resetCorrespondent() {
            $('#IC input').each(function (i) {
                $(this).val("");
                $(this).removeAttr("disabled");
            });
            $("#searchClick").show();
            $("#searchClear").hide();
            $("#EnterName").show();
            $("#ShowName").hide();

        }
</script>

コントローラーは

    public ActionResult Select(string postcode)
    {
        if (postcode == null || postcode == "")
        {
            return PartialView();
        }
        var model = db.GetCorrespondentByPartialPostcode(postcode); 
        return PartialView("_Select",model);
    }
    [HttpPost]
    public ActionResult Picked(int CorrespondentID)
    {
        Correspondent model = db.GetCorrespondentByID(CorrespondentID);
        return Json(new { success = true, Correspondent = model, Salutation=model.Salutation.Detail }, JsonRequestBehavior.AllowGet);
    }

そして、部分的なビューは

@if (Model == null || Model.Count() == 0)
{
    <div>No matches</div>
}
else
{
foreach (var item in Model)
{
    using (Html.BeginForm("Select", "Three", FormMethod.Post))
    {
        <div>@item.DisplayName <span>@item.SingleLineAddress</span>
        <input type="hidden" id="CorrespondentID" value="@item.CorrespondentID" />
        <input type="submit" value="Select" id="submit" /></div>
    }
}

<script type="text/javascript">
    $(document).ready(function () {
        $("form input[type=submit]").click(function () {
            $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
            $(this).attr("clicked", "true");
        });
    });
</script>
}
于 2013-06-24T10:41:35.230 に答える