0

我正在尝试使用 jQueryUI 对话框显示匹配数据列表并通过 JSon 将所选数据返回到使用 ajax/jquery 的原始视图。

流程是查看（用户完成文本框并单击超链接）> jQuery 对话框中的部分视图> JSon 数据返回表单。

我最初的问题是：-

问：这应该是可能的还是我试图做一些不可能的事情？

如果它应该工作，这是我的代码

索引视图

@{
    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 并更新索引视图，但它要么失败（错误），要么将 Json 返回到空白页面。

问：在这些情况下捕获 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

This got a bit convoluted, but is now working

The javascript is

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

The Controller is 

    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);
    }

And the partial view is 

@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 回答