Display or Return any File from MVC Action and display in Bootstrap Modal

Hi Guys,

Here is simplest way to return file from MVC action and display in View or Boot Strap Modal .

View :-
<button id="testbutton" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#dummyModal">Open Modal</button>

<div class="modal fade" id="dummyModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h2 class="modal-title">Patient consent File</h2>
                </div>
                <div class="modal-body">
                    <div ></div>
                    <iframe id="dummyContent" style="width:100%; height: 700px; border:0px;"></iframe>
                    <div id="dummyMessage" style="display:none;" class='alert alert-info'>File not found!<br></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

Jquery :-

 $(document).on("click", "#testbutton", function () {
            var url = '/Patient/GetPatientConsentFile?id=49'
            $('#dummyContent').attr('src', url);
    });

Controller:-

 public ActionResult GetPatientConsentFile(string id)
        {
            int ID = 0;
            int.TryParse(id, out ID);
//if you data in string , then convert it to byte[]
            var contents = System.IO.File.ReadAllBytes("file path");
//if you dont have file path then pass global content type ie "System.Net.Mime.MediaTypeNames.Application.Octet" or pass specific MIME type, (please go through mime type in google)
            string contentType = MimeMapping.GetMimeMapping("filepath");
            return File(contents, contentType);
        }

this works like a charm, please do let me know if you have any concerns.

Convert XML to relavent HTML and apply XSLT style sheet as well & display contents in Bootstrap Modal in MVC Using AJAX

Hi Guys ,

Here is the way to convert XML data to corresponsing HTML by apply XSLT style sheet & display contents in Bootstrap Modal.

Bootstrap Modal:

<div class="modal fade" id="ccdaModel" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button"  return false;" class="close" data-dismiss="modal">&times;</button>
                    <h2 class="modal-title">Hi Test Modal </h2>
                </div>
                <div class="modal-body">
                        <div id="ccdaContent"></div>
                        <div id="ccdaMessage" style="display:none;" class='alert alert-info'>File not found!<br></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" return false;" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>

JS Code:-
$(document).on("click", ".cutomCCDA", function () {
            $.ajax({
                type: "GET",
                url: url,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function (result) {
                    $('#ccdaContent').html(result);
                },
                error: function (xhr, status) {
                    console.log(status);
                }
            });
    });

Action Method:-

public ActionResult ConvertXMLtoHTMLwithXSLT()
        {
            string xmldocument= "xml string";
            string XSLTfile= @"give path here";
            if (!string.IsNullOrEmpty(xmldocument))
            {
                    //load XSLT
apply xslt setting according to your needs
                    XsltSettings xslsettings = new XsltSettings();
                    xslsettings.EnableScript = true;
                    xslsettings.EnableDocumentFunction = true;
//apply xslt
                    XslCompiledTransform proc = new XslCompiledTransform();
                    proc.Load(Server.MapPath(XSLTfile), xslsettings, null);
                    using (StringReader sr = new StringReader(xmldocument))
                    {
                        using (XmlReader xr = XmlReader.Create(sr))
                        {
                            using (StringWriter sw = new StringWriter())
                            {
//apply xsl to out XML
                                proc.Transform(xr, null, sw);
                                return Content(sw.ToString());
                            }
                        }
                    }
            }
            return Content("<div class='alert alert-info'>File not found!<br></div>");
        }

Hope it helps you..please do let meknow if you have any concerns..

Trigger Bootstrap Model on PageLoad automatically

Hi Guys ,

Here is way if you wanna load Bootstrap Model by default on page load,
here is a way.

//Boot strap model HTML
<div class="modal fade bs-example-modal-lg" id="PatientConsent" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Patient Consent</h4>
            </div>
            <div class="modal-body">
                <p>Hi am dummy model</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

// JS code to trigger model on PageLoad
$(document).ready(function(){
//trigger model on page load
    $('#myModal').modal('show');
});

Hope this helps you

Uploading Files using Ajax in MVC4 using Form object.

Hi Guys ,

If you are looking for a way to upload files in AJAX for in  MVC .
here is simple way, which works like charm :)

please comment if you like it..

//HTML for file upload control
<input type="file" name="myfile" id="pcfile" />


//JS code to access files uploaded and making AJAX call

$(document).on("click", "#btnSubmit", function () {
//here am reading file data from my file upload control
            var file = $('#pcfile').data('ace_input_files');
            if (file.length > 0) {
//check if formdata exists
                if (window.FormData != undefined) {
//create a form object to add files in to form object
                    var fileData = new FormData();
                    for (var i = 0; i < file.length; i++) {
                        fileData.append("file" + i, file[i]);
                        $.ajax({
                            type: "POST",
                            url: '/ControllerName/ActionName' + "?patientID=" + patientID,
                            contentType: false,
                            processData: false,
                            data: fileData,
                            success: function (result) {
                               //success logic
                            },
                            error: function (xhr, status) {
                                console.log(status);
                            }
                        });
                    }
                }
            }
        }
    });

// Action method to read file from HTTP request context object, posting in form object
 [HttpPost]
        public void Uploadfiles(string patientID)
        {
            if (!string.IsNullOrEmpty(patientID))
            {

                //save the uploaded file in path specified in app settings entry
                string fileName = string.Empty;
                String path = string.Empty;
                int pID = 0;
                foreach (string file in Request.Files)
                {
                    var fileContent = Request.Files[file];
                    if (fileContent != null && fileContent.ContentLength > 0)
                    {
                        Stream stream = fileContent.InputStream;
                        fileName = User.FirstName + User.LastName + Regex.Replace(DateTime.Now.ToString(), "[^a-zA-Z0-9_]+", "_") + Path.GetExtension(fileContent.FileName);
                        string PatientConsentDirectory = System.Configuration.ConfigurationManager.AppSettings["PatientConsentFilePath"];
                        if (!string.IsNullOrEmpty(PatientConsentDirectory))
                        {
                            bool folderExists = Directory.Exists(Server.MapPath(PatientConsentDirectory));
                            if (!folderExists)
                            {
                                Directory.CreateDirectory(Server.MapPath(PatientConsentDirectory));
                            }
                            path = Path.Combine(Server.MapPath(PatientConsentDirectory), fileName);
                            fileContent.SaveAs(path);
                            stream.Close();
                        }
                    }
                }
            }
        }

Hope this help you, please comment if it helped or if you have any concerns