Click here to Skip to main content
14,236,142 members
Rate this:
Please Sign up or sign in to vote.
See more:
I have 2 views (X,Y)

X has the modal

Y has the button to show the modal.

How do I then call the modal on X using onClick of the button on Y

What I have tried:



var tbl_AttributesViewModel = new Object();
tbl_AttributesViewModel.Attr_Id;

$('document').ready(function () {
$('.alert-link').click(function () {
alert("hi")
tbl_AttributesViewModel.Attr_Id = $(this).attr("id");

$.ajax({
url: config.serverPath + "Attribute/AddOrEditAttribute/" + tbl_AttributesViewModel.Attr_Id,
type: "GET",
data: { id: tbl_AttributesViewModel.Attr_Id },//tbl_WBSViewModel,
success: function (d) {
$('#getAttrModal').modal('show');
}
});
});
});

$('document').ready(function () {
$('#btnChildAttr').click(function () {
$('#addAttrModal').modal('show');
});
});
Posted
Updated 4 days ago
Comments
F-ES Sitecore 4 days ago
   
Views etc are a server-side concept, but your js code is running on the client, so what mark-up is in what view is irrelevant, js has no concept of "views". What matters is what the resulting mark-up in the browser is. If both views are included in the output (ie at least one is a partial view) then the browser treats that as a single document so just make sure the js works within that document. If one of the views is not included in the output then you can't access anything on it from js as js runs on what is sent to the browser.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

That call is a bootstrap call.
$('#getAttrModal').modal('show').


You are noticing that the code is not shared between Views and so you don't get re-use.

It is a distinct challenge in this situation. The first (and easiest) way to get it working is to copy the modal dialog layout to both views. Obviously, that's not great though.

The real answer is to add the modal dialog to a PartialView and then load that PartialView into each View. That way you have the code in one place but you can invoke the Modal from either one.

To add the Shared PartialView
In Visual Studio...
right-click the Views\Shared folder and select "Add View..."
NOTE: Very important you put in in Shared folder so it can be found by all Views.
A Create View dialog will appear...
In that Create View dialog you will name the View (something like DialogView)
Here's a snapshot: https://i.stack.imgur.com/GQTtj.png[^]

Notice that you have to select the checkbox that says, "Create as partial view".

It will create the view. You put your Bootstrap Modal dialog HTML in there.
Now, you can reference this PartialView in each of your pages to load it in the location where you want it to show up.

In each of the pages (CSHTML) where you want the modal dialog, use a line of Razor code (HTML Helper) like the following:
@Html.Partial("DialogView")


That simply makes sure the modal dialog will be in each page (View).
Now you use your normal Bootstrap call to make the modal pop-up.
   
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100