PartialView is for one second inside the jquery dialog

Question

The view is visible for a quick second in the dialog, then the dialog is gone and the view is visible again in the mainsite as if there would be javascript disabled.

What do I wrong? I just want to show the Create view in the dialog which is calling the Create action in the controller.

Index view:

@{
    Layout = null;   
 }

 <script type="text/javascript">

    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 300,
            resizable: false,
            title: 'Create Template',
            modal: true,
            open: function(event, ui) {               
                $(this).load("@Url.Action("Create")");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#CreateTemplate').click(function ()
        {
            $('#dialog').dialog('open');
        });
    });

<div id="dialog" title="Create Template" style="overflow: hidden;"></div>
<div id="MenuBarDiv">   
    <a id="CreateTemplate" href="..\Template\Create">Create Template</a>
</div>
<div id="LeftDiv">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    teimata sanctus est Lorem
    ipsum dolor sit amet.
</div>
<div id="RightDiv">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

</div>
<div class="clear">
</div>

Controller:

  [HttpGet]
    public ActionResult Create()
    {
      return View("Create");
    }

Answer 1

In the click handler of the anchor you are not canceling the default action and so the browser simply redirects to the anchor's href without leaving any time for the dialog to show. If you want to stay on the same page you need to cancel this default action by returning false:

$('#CreateTemplate').click(function () {
    $('#dialog').dialog('open');
    return false;
});        

Also make sure that in your Create.cshtml partial you have canceled the layout (Layout = null) or have your Create action return a PartialView instead of View to avoid getting the full layout inside the dialog.

Another improvement for your code would be to replace the following hardcoded anchor:

<a id="CreateTemplate" href="..\Template\Create">Create Template</a>

with a html helper to ensure that it generates proper url respecting your routes configuration:

@Html.ActionLink(
    "Create Template",             // linkText
    "Create",                      // actionName
    "Template",                    // controllerName
    null,                          // routeValues
    new { id = "CreateTemplate" }  // htmlAttributes
)