How to share information between partial views in JS

StackOverflow https://stackoverflow.com/questions/22182485

  •  05-06-2023
  •  | 
  •  

Question

Two partials loaded on the same page

For example, if I hit a button in one partial then I want some value to appear in the other partial.

I want all the work to be done on the client side. I am sure I would call a method in js but I am not sure how to connect it to another js var on another partial within the same page. In other words how do I get both the partials to talk to eachother on the client side.

Was it helpful?

Solution

Once your razor view is rendered to the browser, It is just HTML markup. That means, you can use javascript to access the elements in the DOM and update the values as needed.

Keep your script in the main view which holds the 2 partial views.

$(function(){
  $("#ButtonInFirstParial").click(function(e){
   e.preventDefault();
   $("#DivInSecondPartial").html("Updated");
  });
});

Also if you declare your javascript variable in a global scope, you can access it in other places also. So if you have a variable like this in your layout page,

<body>
@RenderBody()
<script type="text/javascript">
  var global_SiteUrl="Some value i want to access in all pages";
</script>    
</body>

You can access it in other views (which uses the above one as the Layout), or js files which are a part of other views who has the layout value set as the above layout.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top