Pass Data to a modal window with jquery

Question

Pass Data to a modal window with jquery

Navigation

#1 by (0 votes)

0

I have a JS function, which receives a parameter. This function, raise a dialogomodal box with jqueri.UI and I need to know how to pass the parameter, since this dialog box allows the user to select a file, and when it is selected I must pass to the controller (action Result) the original parameter (idProcess) plus the selected file ...

This is the code that I have until now

Here the div that contains the modal

<div id="ModalCargaInfoAistencia" class="display">
@using (Html.BeginForm("UploadFile", "Proceso", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <div class="row">
        <div class="col-md-4">
            <p>
                <h2>Seccion Archivo de carga</h2>
            </p>
        </div>
        <div class="col-md-4">
            <p>
                <input type="File" name="file" id="file" value="Selecciona el archivo" />
            </p>
        </div>
        <div class="col-md-4">
            <p>
                <input type="submit" value="Subir archivo" />
            </p>
        </div>
    </div>
}

    <script>
    function CargarExcel(ProcesoId) {
        $("#ModalCargaInfoAistencia").dialog({
            modal: true,
            title: "Cargar Informacion Asistencia",
            width: 800,
            height: 500,
            resizable: false,
            show: {
                effect: "blind",
                duration: 400
            },
            hide: {
                effect: "explode",
                duration: 400
            },
            buttons: {
                "Cancelar": function () { $("#ModalCargaInfoAistencia").dialog("close"); }
            }
        });
    };
</script>  @*Modal Selecciona Excel Asistencia*@

in the next ActionResult I receive the file without problems ... but I need to get the ProcessId that receives the JS function

        [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult UploadFile(HttpPostedFileBase file, string ??? como le paso el parametro aca??)
    {
        if (file != null)
        {
            ... hace cosas con el archivo..

        }

        // Tu podras decidir que hacer aqui
        // si el archivo es nulo
        return RedirectToAction("Inicio");

    }

javascript jquery-ui asp.net-mvc

asked by Luis Gabriel Fabres 13.12.2018 в 22:39

source

1 answer

Prevent ExpandableListView from losing data when scrolling Use $ diacriticSensitive with match in Mongo

score 0 · Accepted Answer

Within your form in the modal set a input type hidden so that you can receive the parameter there and send it to the controller

    @using (Html.BeginForm("UploadFile", "Proceso", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="hidden"  name="ProcesoId" id="ProcesoId">
        @Html.AntiForgeryToken()
        <div class="row">
            <div class="col-md-4">
                <p>
                    <h2>Seccion Archivo de carga</h2>
                </p>
            </div>
            <div class="col-md-4">
                <p>
                    <input type="File" name="file" id="file" value="Selecciona el archivo" />
                </p>
            </div>
            <div class="col-md-4">
                <p>
                    <input type="submit" value="Subir archivo" />
                </p>
            </div>
        </div>
    }

I do not know what action triggers your function but in there you can assign the value to input to send it to the controller something like this:

   <script>
    function CargarExcel(ProcesoId) {
        $("#ProcesoId").val(ProcesoId);
        $("#ModalCargaInfoAistencia").dialog({
            modal: true,
            title: "Cargar Informacion Asistencia",
            width: 800,
            height: 500,
            resizable: false,
            show: {
                effect: "blind",
                duration: 400
            },
            hide: {
                effect: "explode",
                duration: 400
            },
            buttons: {
                "Cancelar": function () { $("#ModalCargaInfoAistencia").dialog("close"); }
            }
        });
    };
</script>

Finally to receive the parameter in your method within the controller would be something like this:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UploadFile(HttpPostedFileBase file, string ProcesoId)
{
}

Note: the type of parameter depends on the type that is the value you send (string ProcessId, intProcesoId)