My approach for loading Forms/HTML Content from the server involves creating a div with an ID - PartialViewDialog at the bottom of the page. This is where I load Partial Views inside a dialog.
The HTML structure follows Bootstrap 3.* principles, based on the Frontend framework.
Here's how the HTML looks:
<body>
<!-- Other page content -->
<div class="modal fade" id="PartialViewDialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" data-modal="title"></h4>
</div>
<div class="modal-body" data-modal="content">
</div>
<div class="modal-footer" data-modal="footer">
</div>
</div>
</div>
</div>
</body>
Next, in JavaScript, a dialog Manager is created:
var MyApp = MyApp || {};
MyApp.UIHelper = MyApp.UIHelper || {};
// The Dialog Manager module
MyApp.UIHelper.DialogManager = (function () {
"use strict";
// Initialization and configuration
var self = {};
self.divId = null;
self.dialog = null;
self.dialogBody = null;
self.dialogTitle = null;
self.dialogFooter = null;
self.actionUrl = "";
self.modalObject = null;
self.options = {};
function Initilize(divId, options) {
self.options = $.extend({ buttons: [] }, options);
self.divId = divId;
self.dialog = $(self.divId);
self.dialogBody = self.dialog.find('*[data-modal="content"]');
self.dialogTitle = self.dialog.find('*[data-modal="title"]');
self.dialogFooter = self.dialog.find('*[data-modal="footer"]');
self.BootgridObject = null;
};
// Method to open the Partial View Dialog
function OpenPartialViewDialog(url, title, preprocessingFunction, postProcessingFunction) {
var options = self.GetPartialViewButtons(url, preprocessingFunction, postProcessingFunction);
Initilize('#PartialViewDialog', options);
self.actionUrl = url;
self.dialogTitle.html(title);
self.OpenModel();
};
// Method to create buttons for the Form dialog
self.GetPartialViewButtons = function (url, preprocessingFunction, postProcessingFunction) {
var buttons = {
buttons: {
Save: {
Text: "Save",
css: "btn btn-success",
click: function () {
if (preprocessingFunction) { preprocessingFunction(); }
$.ajax({
type: "POST",
url: url,
data: self.dialogBody.find("form").serialize(),
success: function (response) {
if (response.hasOwnProperty("IsSuccess")) {
if (response.IsSuccess) {
self.dialogBody.html("");
self.dialog.modal("hide");
if (postProcessingFunction) {
postProcessingFunction();
}
} else {
// Handle failure
}
}
},
error: function (response) {
// Handle failure
}
});
}
},
Cancel: {
Text: "Cancel",
css: "btn btn-danger",
click: function () {
self.dialogBody.html("");
self.dialogFooter.html("");
self.dialogTitle.html("");
self.dialog.modal("hide");
}
}
}
};
return buttons;
};
// Method to dynamically create button objects
self.CreateButtonsHtml = function () {
var htmlButtons = [];
$.each(self.options.buttons, function (name, props) {
var tempBtn = $("<button/>", {
text: props.Text,
id: "btn_" + props.Text,
"class": props.css + "",
click: props.click
}).attr({ "style": "margin-right: 5px;" });
htmlButtons.push(tempBtn);
});
return htmlButtons;
};
// Method to load content/form from the server and setup the dialog
self.OpenModel = function () {
$.ajax({
url: self.actionUrl,
type: "GET",
success: function (response) {
if (response.hasOwnProperty("HasErrors")) {
// Handle errors
} else {
self.dialogBody.html(response);
self.modalObject = self.dialog.modal();
self.modalObject.show();
}
}
});
var buttons = self.CreateButtonsHtml();
self.dialogFooter.html('');
for (var i = 0; i < buttons.length; i++) {
self.dialogFooter.append(buttons[i]);
}
};
return {
OpenPartialViewDialog: OpenPartialViewDialog,
};
})();
To open a dialog from the server, you can utilize the following code snippet:
MyApp.UIHelper.DialogManager
.OpenPartialViewDialog('/Content/Load', "My Title",
function(){alert('pre-process')},
function(){alert('post-process')}
);
Please note that PreProcess and PostProcess functions are invoked when the Save button is clicked.
A live demo showcasing the functionality described above can be found here: https://jsfiddle.net/1L0eLazf/
For an example focusing on the buttons specifically, visit: https://jsfiddle.net/1L0eLazf/1/