asp.net-mvc-3 - update - sintaxis razor mvc 5

Cargando una vista parcial en jquery.dialog

Question

Soy completamente nuevo en mvc y trato de crear una aplicación ficticia para aprender mvc 3. Me he abierto paso en el ejemplo de la tienda de música y ahora estoy tratando de extenderlo ligeramente a una aplicación más real. Con el ejemplo cada vez que desee un nuevo elemento, se le redirige a la vista Crear que está bien; sin embargo, en lugar de hacer una publicación de página completa, deseo utilizar el jquery.dialog para abrir un menú emergente modal que permita al usuario inserta un nuevo elemento

hasta ahora tengo

  <script type="text/javascript">

    $(function () {

        $(''#dialog'').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: "hi there",
            modal: true,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        $(''#my-button'').click(function () {
        $(''#dialog'').dialog(''open'');
        });}); </script>

     <div id="dialog" title="Create Album" style="overflow: hidden;">
    @Html.Partial("_CreateAlbumPartial")</div>

Los problemas con esto es que la vista parcial se carga cada vez, no a través de ajax, y no sé realmente dónde debería colocar la vista parcial. ¿Debería estar en la ubicación compartida o en la carpeta con las otras vistas? ¿Cómo actualizo la clase del controlador para atender la vista parcial?

Lo siento si estos son fáciles de hacer, estoy 3 días en mvc :)

Answer 1

Para mejorar la respuesta de Darin, podemos mover el código de carga de div en el evento de clic de botón. De esta forma, todos los alghorithms de posición del diálogo funcionan en el nuevo texto, por lo que el diálogo se coloca correctamente.

<script type="text/javascript">
   $(function () {
        $(''#dialog'').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: ''hi there'',
            modal: true,           
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $(''#my-button'').click(function () {
            //Load the CreateAlbumPartial action which will return 
            // the partial view _CreateAlbumPartial
            $(''#dialog'').load("@Url.Action("CreateAlbumPartial")", 
                    function (response, status, xhr) {
                        $(''#dialog'').dialog(''open'');
                    });   
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">

Answer 2

Pruebe algo como esto:

<script type="text/javascript">
    $(function () {
        $(''#dialog'').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: ''hi there'',
            modal: true,
            open: function(event, ui) {
                //Load the CreateAlbumPartial action which will return 
                // the partial view _CreateAlbumPartial
                $(this).load("@Url.Action("CreateAlbumPartial")");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $(''#my-button'').click(function () {
            $(''#dialog'').dialog(''open'');
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">

Usamos la función de abrir que se activa cuando se abre el diálogo y dentro enviamos una solicitud AJAX a una acción del controlador que devolvería el parcial:

public ActionResult CreateAlbumPartial()
{
    return View("_CreateAlbumPartial");
}