I have a view Details which consists of a partial view _Tabs and a second partial view _Contents.

In one of the partial views (_Tabs), I have a image link, and in the onclick function, I'm passing a variable CatID. This variable contains the value of a property of the ViewModel of the partial view (called TabsForItemViewModel).

When debugging, when the image is clicked, VS displays:

Microsoft JScript runtime error: 'CatID' is undefined

Partial View "_Tabs":

View Model for the partial view _Tabs is TabsForItemViewModel

@model TabsForItemViewModel
@{
   int CatID = Model.CategoryInfo.CatID; 
 }

<ul>
<li>
   <a href="#GoToCatLevel">
     <img border="0" src="view_cat.png" alt ="Up" title="Go To This Category" 
          width="10" height="10" onclick="LoadCategoryData(CatID, this.href)" />
   </a>
</li>
...

View "Details":

@model ItemDetailsViewModel
@{    
    ViewBag.Title = "Item Details";
}

<div id="Main">
...
   CategoryInfoViewModel categoryData = new CategoryInfoViewModel(itemD.Ca_ID);                                                   

    TabsForItemViewModel tabsForItem = new TabsForItemViewModel(categoryData);
    <div id="Tabs" class="div-tab">                      
        @{Html.RenderPartial("~/Views/Item/_Tabs.cshtml", tabsForItem );}
    </div>
    ...
</div>

I have a view Details which consists of a partial view _Tabs and a second partial view _Contents.

In one of the partial views (_Tabs), I have a image link, and in the onclick function, I'm passing a variable CatID. This variable contains the value of a property of the ViewModel of the partial view (called TabsForItemViewModel).

When debugging, when the image is clicked, VS displays:

Microsoft JScript runtime error: 'CatID' is undefined

Partial View "_Tabs":

View Model for the partial view _Tabs is TabsForItemViewModel

@model TabsForItemViewModel
@{
   int CatID = Model.CategoryInfo.CatID; 
 }

<ul>
<li>
   <a href="#GoToCatLevel">
     <img border="0" src="view_cat.png" alt ="Up" title="Go To This Category" 
          width="10" height="10" onclick="LoadCategoryData(CatID, this.href)" />
   </a>
</li>
...

View "Details":

@model ItemDetailsViewModel
@{    
    ViewBag.Title = "Item Details";
}

<div id="Main">
...
   CategoryInfoViewModel categoryData = new CategoryInfoViewModel(itemD.Ca_ID);                                                   

    TabsForItemViewModel tabsForItem = new TabsForItemViewModel(categoryData);
    <div id="Tabs" class="div-tab">                      
        @{Html.RenderPartial("~/Views/Item/_Tabs.cshtml", tabsForItem );}
    </div>
    ...
</div>

• c#
• javascript
• asp-mvc
• exception

3 Answers 3

CatID isn't a Javascript variable... it's a c# variable that needs to be rendered into the page. Using Razor syntax, this would be:

onclick="LoadCategoryData(@CatID, this.href)"

You have forgotten to put an @ sign in front of CatID when you send it in the onclick function.

It should be:

   onclick="LoadCategoryData(@CatID, this.href)"

First <img> don't have a property href. Are you trying to add the click handler to <a>?

I personally don't suggest you mix javascript in html element like you did. You should use unobtrusive javascript.

You could try something like this,

<img id=".img" border="0" src="view_cat.png" alt ="Up" title="Go To This Category" 
          width="10" height="10" data-catid="@CatID" />

<script type="text/javascript">
  $(".img").click(function(){
     LoadCategoryData($(this).data("catid"), $(this).attr("src"));
  });
</script>

Now you can put this script in a separate file.