MVC - Jquery UI - Dialog - Question

I'm trying to throw up a dialog window in MVC without using an AjaxActionLink. I'm using jquery ui 1.8.13 in this example.

Please consider the following snippets:

public class ModalViewModel
{
    public string Title { get; set; }
    public string Description { get; set; }
}

And the controller:

private ActionResult GetVisitors(VisitorSearchViewModel model)
    {
        VisitorSearchResponse response =
            .... Omitted for brevity

        if (response.Success)
        {
            return View("VisitorList", response.Visitors.ToList());
        }
        else
        {
            return RedirectToAction("Error");
        }
    }

    public PartialViewResult Error()
    {
        return PartialView("Modal", 
                            new ModalViewModel() 
                            { 
                                Title = "Test Title", 
                                Description = "Test Description" 
                            });
    }

And finally, the Modal shared view:

@model CraftTraxNG.Model.ViewModels.ModalViewModel

<script type="text/javascript">
$(document).ready(function () {
    $("#er开发者_StackOverflowrorMessage").dialog(
        { autoOpen: true,
          title: '@Model.Title',
          width: 500,
          height: 100,
          modal: true,
          buttons:{ "OK": function () {
                        $(this).dialog("close"); }
          }
       });
    });

<div id="errorMessage" style="display:none;">
    @Model.Description
</div>

When an error is encountered, it'll write out the partial view contents; ie., it successfully creates the dialog window with the appropriate styles. My problem is I want render the partial view on something on the view I'm currently on. I've never used it in this fashion before. As of now, when it renders that partial view, I lose the contents of the view I'm currently on.

Typically, I can use an AjaxActionLink and just set a div tag I want the dialog to render to and either replace it or insert it after, before, etc.

In this case, I'm heading out to the service and grabbing a response server-side and if it's unsuccessful, I need a way to replace some div tag on the regular view with this partial view.

Any help is appreciated.

Thank you.

I have run into this issue and I have not yet come up with an ideal solution. Here is what I normally do.

<a href="#" id="loadsContentOrError">Click Me</a>

$(function() {
    $("#loadsContentOrError").click(e){
        e.preventDefault();
        $.ajax({
            url: '<%: Url.Action("Error") %>',
            success: function(html) {
                html = $(html);
                if(html.find('.errorMessage').length > 0) {
                    $('#divToLoadContentTo").append(html);
                } else {
                    $('#divToLoadContentTo").html(html);
                }
            }
        });
    });
});

This is pretty rough but it gives you a good starting point.