MVC3,将Json从jquery对话框中的局部视图返回到原始页面

时间:2013-06-18 13:01:24

标签: jquery ajax asp.net-mvc-3

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

流程为View(用户完成文本框并单击超链接)>在jQuery对话框中的部分视图> JSon数据重新形成。

我最初的问题是: -

  

Q值。这应该是可能的,还是我想做一些不可能的事情?

如果它应该有效,这是我的代码

Index.view

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

ItemController

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

流程工作正常,用户输入文本,项目/搜索部分视图显示在模式对话框中,当用户选择按钮时,点击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并更新原始页面。

1 个答案:

答案 0 :(得分:0)

这有点令人费解,但现在正在运作

javascript是

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