Question

I have a partial View, which I am trying to load twice onto a cshtml file.

Now inside my partial View I have a javascript function as well. At this point, when I load my
cshtml onto the page, I will have two Javascript functions with same name.

I want to avoid this kind of scenario and name the Javascript function uniquely depending upon the Model which I am binding the Partial View to.

Please Not I could achieve the uniqueness for each control inside my partial by associating it with a parameter like “@Model.Id”. But I am unable to apply the same kind of thing for uniqueness of Javascript function.

I am sorry for my Bad English. Kindly let me know if you need additional details.

Answer 1

In order to achieve scenario like that you can use data-attribute.

For example we have identical html code surrounded by a div, those div’s had different id.

Each div will have a data-attribute and with jquery you can catch an event (Like Click)

Now Code Example

HTML

<div id="id1" data-attribute="doSomething">Element</div>
<div id="id2" data-attribute="doSomething">Element</div>

In your case those div represent the results coming from the partial view
also you can change the value store in the id attribute to come from your model something like id="id@{Model.Id}"

JQuery

$("div[data-attribute=doSomething]").click(function() {
    alert("Clicked element: " + $(this).prop("id")); 
});

Fiddel Example

I am using attribute selector of Jquery to achieve it

Note That you can achieve it also by defining a class attribute.
But I think you should use this when you actually need a class otherwise use custom attribute like data-value="something"