How to show an asp.net mvc view from an hyperlink in an asp.net webforms

Question

I have an hyperlink in asp.net web forms. When I click this link I want to show an asp.net mvc view as a popup modal. Currently I am doing Response.Redirect in the server side of the aspx page to the controller and then using Keno UI's kendowWindow on the top most div of the view. The problem is that because of response.redirect it goes to a different URL. I want the popup to show the modal page on the page containing the hyper link itself and close when the close button is clicked. I believe this has to be done by using client side javascript to load the modal instead of 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

I believe I have done something similar to this, if I am understanding your question.

ASPX Page

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

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

Is that helpful at all?

UPDATE

Yea you can pass parameters. Just include them as querystring values on your <a> and add them to the controller action.

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

then ...

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

That should work just make sure your parameter names match

UPDATE 2

Ya if you wanted to add your parameters dynamically using the javascript you linked in the comments you could probably do this:

ASPX Page

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

The getParameterByName is defined in the link you posted in the comments and you controller action shouldn't need to change from the first UPDATE I posted.