CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-2
RJP
RJP

Reputation: 4116

MVC 2 - Display a jquery dialog that contains a partial view

Okay, so I'm trying to display a dialog, and the contents of that dialog is from a partial view, _TestPartial.

Here is the partial view:

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<div id="test" title="Basic dialog">
    <p>This is just a test</p>
</div>

Now, if I put the test div in my .aspx that is displaying the dialog, it will show just fine. Or if I call the partial right from my page it will show 'This is just a test' just fine. I just have no idea how to make a jquery dialog display a partial. I've tried a few things, such as having my dialog call an Action, TestAction, which renders the _TestPartial, but that doesnt even work. I have a feeling I'm missing a key piece of code somewhere tho. Here is my dialog code(its called automatically based on a select list choice):

if ($('#SelectListID option:selected').text() == 'Test') {
                    $('#test').dialog({

                        width: 400,
                        resizable: false,
                        title: 'Test dialog',
                        open: function(event, ui) {
                            $(this).load("@Url.Action('TestAction')");
                        },
                        buttons: {
                            "Close": function (){
                                $(this).dialog("close");
                            }
                        }                        
                    });
                }

Upvotes: 0

Views: 1075

Answers (1)

Lester
Lester

Reputation: 4413

I remember having a similar problem before. We added a dialog container and then loaded the partial view in an inner div.

<div id="dialogcontainer">
    <div id="dialogcontent"></div>
</div>

$("#dialogcontainer").dialog({
    width: 400,
    resizable: false,
    title: 'Test dialog',
    open: function(event, ui) {
        $("#dialogcontent").load("@Url.Action('TestAction')");
    },
    buttons: {
        "Close": function (){
            $(this).dialog("close");
        }
    }                        
});

Upvotes: 3

Related Questions