How to access bootstrap from any view in MVC - asp.net-mvc

Question

I want to show a popup using bootstrap which is defined in another view(e.g. SaveRecord.chhtml).
Is there any way to access bootstrap dialog box from any View(e.g. Registration.cshtml)
like give below
$(document).ready(function () {
$('/BootStrap/SaveRecord/.mymodal').modal('show');
}
where "mymodal" is bootstrap-id of given below

Answer 1

You really can't access elements like this as jQuery on it's own would require those elements to be present in the DOM in order to access them.
Create A Partial View And Load It As Needed
You could consider creating a Partial View that contained all of the necessary markup for your specific Modal and then when you needed to access it, simply load it into the DOM (if it doesn't already exist) via an AJAX call and then display it :
$(function(){
// Load your Partial View (assumes a Controller Action will route to it)
$.get('#Url.Action("GetYourPartialView","YourController")', function(html){
// Insert this element into the DOM
$('body').append(html);
// At this point it should exist, so load it
$('.myModal').modal('show');
});
});
This would assume that a Controller Action existed that would point to your specific Partial View that contained your modal (and only your modal) :
public ActionResult GetYourPartialView()
{
return View("YourPartialViewName");
}
Consider Using the Layout
Another solution that you could consider using would be to define your various modal "templates" that you might use throughout your solution at the Layout-level so that any pages that would rely on those would be able to access them.

Answer 2

You can use Partial Views.
Create your partial view _MyModal.cshtml under Views/Shared folder
In every view where you want to use it:
#Html.Partial("~/Views/Shared/_MyModal.cshtml")
On your javascript file: $('#mymodal').modal('show');

Answer 3

Here are the steps:
1.Make your bootstrap popup view a partial view
2.In your regular view, add a div which will have the modal content
<div id="divModalContent">
</div>
3. In your regular view, Add html button with onclick function
<input type="button" class="btn btn-default" value="{Your Text}" onclick="LoadSaveRecordModal()" />
4.Your JS:
function LoadSaveRecordModal()
{
$.ajax(
{
type: 'POST',
url: '{your url}',
data: data, //if required
success: function (result) {
$("#divModalContent").html(result); //load your modal content inside the div
$("#mymodal").modal('show'); //show the popup
},
failure: function (ex) {}
}
);
}
4.Your action method
public ActionResult GetSaveRecordModal(//get data if its post request)
{
//code
return PartialView("SaveRecord");
}