Open Modal

Syntax

$.openModal = function (url, vname)

Arguments

url	String	URI of the action that should be loaded
vname	String	Name of the view of the modal that should be opened

Description

Opens a modal deriving its layout from the view file that is specified in the parameter “vname” by sending an HTTPGET request to the action of the URI specified in “url” and loading the data from the Server into the Modal Container.

Example

Example 1: Modal that opens upon click event

The following program illustrates the function call:

...

<a id="btn-open" class="btn btn-primary">Open</a>

...

@Html.Modal("ExampleModal", "Modal Title", "420px")

...
    
$(document).ready(function () {
    $("#btn-open").on("click", function () { 
        $.openModal("main/modal", "ExampleModal"); 
    });
});

    
    

When Button is clicked, Function will open a modal of 420px width and with “Modal Title” displayed in the Header Section deriving its layout from the View file “ExampleModal.cshtml”.

Example 2: Modal that automatically opens when page is loaded ("Filter")

The following program illustrates a case where a modal is opened in an alternative way (not using $.openModal):

@Html.ModalFilter(Model.Filter, "ExampleFilter", "Modal Title", "420px")

...

$(document).ready(function () {
    $("#ExampleFilter").modal('show');
});

When page loads, Function will open a modal of 420px width and with “Modal Title” displayed in the Header Section deriving its layout from the View file “ExampleFilter.cshtml”. (In this case, Modal is usually a Filter to limit what gets loaded into the page).

This function call does not require a HTTPGET Action in the Controller.