如何从 asp.net webforms 中的超链接显示 asp.net mvc 视图

Question

我在 asp.net 网络表单中有一个超链接。当我单击此链接时，我想将 asp.net mvc 视图显示为弹出模式。目前我在aspx页面的服务器端对控制器执行Response.Redirect，然后在视图最顶部的div上使用Keno UI的kendowWindow。问题是由于 response.redirect 它转到了不同的 URL。我希望弹出窗口在包含超链接本身的页面上显示模式页面，并在单击关闭按钮时关闭。我相信这必须通过使用客户端 javascript 加载模式而不是 Response.Redirect 来完成。

$("#MyTopDiv").kendoWindow({
    content: {
        url: "~/MyFolder/MyView"
    },
    activate: function () {
        $(".k-i-close").on("click", function () {
            window.location = document.location.origin + "/Original/user/Original.aspx";
        })
    },
    modal: true,
    width: "950px",
    title: "Select Documents",
    close: onClose,

});

Answer 1

如果我理解您的问题，我相信我已经做了类似的事情。

ASPX 页面

<a class="open-modal" href="/MyFolder/MyView">Open Modal</a>

JavaScript

        $(function () {
            $('body').on('click', '.open-modal', function (e) {
                e.preventDefault();

                $.post(this.href, function (html) {
                    $('<div />').kendoWindow({
                        visible: true,
                        title: 'My Modal',
                        modal: true,
                        width: '600px',
                        deactivate: function () {
                            this.element.closest('.k-widget').remove();
                        }
                    }).data('kendoWindow')
                    .content(html)
                    .center()
                    .open();
                });
            })
        });

MVC 控制器动作

    [HttpPost]
    public PartialViewResult MyView()
    {
        var vm = new MyViewVM();
        return PartialView("_MyView", vm);
    }

这有帮助吗？

更新

是的，您可以传递参数。只需将它们作为查询字符串值包含在您的 <a> 中，然后将它们添加到控制器操作中。

<a class="open-modal" href="/MyFolder/MyView?id=9&name=Test">Open Modal</a>

然后...

[HttpPost]
public PartialViewResult MyView(int id, string name)
{
    var vm = new MyViewVM();
    //get data and fill view modal with id
    return PartialView("_MyView", vm);
}

只要确保你的参数名称匹配就可以了

更新 2

是的，如果您想使用您在 cmets 中链接的 javascript 动态添加参数，您可以这样做：

ASPX 页面

<a class="open-modal" href="/MyFolder/MyView">Open Modal</a>

Javascript

       $(function () {
            $('body').on('click', '.open-modal', function (e) {
                e.preventDefault();

                var id = getParameterByName('id');
                var name = 'Test';

                $.post(this.href, { id: id, name: name }, function (html) {
                    $('<div />').kendoWindow({
                        visible: true,
                        title: 'My Modal',
                        modal: true,
                        width: '600px',
                        deactivate: function () {
                            this.element.closest('.k-widget').remove();
                        }
                    }).data('kendoWindow')
                    .content(html)
                    .center()
                    .open();
                });
            })
        });

getParameterByName 定义在您在 cmets 中发布的链接中，您的控制器操作不需要从我发布的第一个 UPDATE 更改。