Question

i’m new using jquery, and developing for web, and i have this doubt, i want to create a modal dialog when i push an html button. i use the next code for the button

 <input type="submit" value="Siguiente"/>

In the modal dialog, i want to push some information that i get frm the form, and i want to create 2 buttons, one to redirect to another page and the other keeps in the same page, something like yes or no buttons.

public ActionResult EntradaPedidos()
         {

             List<SelectListItem> divisiones = new List<SelectListItem>();
             List<Pedidos> misPedidos = miConexion.Division(username, password);
             foreach (var pedido in misPedidos)
             {
                 divisiones.Add(new SelectListItem() { Text = pedido.nombreDivision, Value = pedido.division });
             }
             ViewData["divisiones"] = new SelectList(divisiones, "Value", "Text", "Confeccion");

             //Ejemplo para llevar informacion a un label
             Pedidos miPedido = new Pedidos();
             miPedido.clave1 = "Funciona";
             miPedido.numPedido = "234";

             ViewData["FechaInicio"] = "";
             ViewData["codigoCliente"] = "";
             ViewData["ddListaPrecios"] = new SelectList(new[] { "(Selecciona)" });
             ViewData["ddListaVendedores"] = new SelectList(new[] { "(Selecciona)" });
             ViewData["listPrecios"] = "";
             ViewData["ddCiudad"] = new SelectList(new[] { "(Selecciona)" });
             ViewData["ddPuntosEntrega"] = new SelectList(new[] { "(Selecciona)" });

             return View(miPedido);
         }



[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EntradaPedidos(FormCollection formulario) {

        Pedidos miPedido = new Pedidos();
        miPedido.division = Request.Form["division"];
        miPedido.fechaPedido = Request.Form["FechaInicio"];
        miPedido.codigoCliente = Request.Form["codigoCliente"];
        miPedido.codListaPrecios = Request.Form["tbListaPrecios"];
        miPedido.codVendedor = Request.Form["ddListaVendedores"];
        miPedido.codPuntoEntrega = Request.Form["ddPuntosEntrega"];


        return RedirectToAction("EntradaPedidosProducto");
}

Answer 1

You can use jQuery UI modal popup and load the content of it using an ajax request to a partial view which contains your form.

http://jqueryui.com/demos/dialog/

Include jQuery UI plugin reference in your page /View

 $('#yourForm').submit(function (e) {
       var url = "yourcontroller/EntradaPedidos"        
       var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
             dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
           }
           dialog.load(
                    url,
                    {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                    function (responseText, textStatus, XMLHttpRequest) {
                        dialog.dialog({
                            close: function (event, ui) {
                                dialog.remove();
                            },
                            modal: true,                               
                             width: 460
                        });
                    }
                );
                return false;
            });

Another point to mention is that try to avoid using ViewData and start using a ViewModel for that.