Requesting information from a model using a JavaScript variable in a cshtml file in an ASP.NET application

Question

Requesting information from a model using a JavaScript variable in a cshtml file in an ASP.NET application

Is there a way to use a JavaScript variable to retrieve a specific item from an array stored in a model?

Below is a code snippet:

function CreateCategoryList() 
    {
        var limit = @(Model.CategoriesCount.ToString());

        for (i=0; i<limit; i++)
        {
            var category = '<div class="CategoryItem">' + '@(Model.CategoryList[i].Name.ToString())' + '</div>';                
            $("#CategoriesPopup").append(category);
        }
        alert($(".CategoryItem:first").text());
    }

I'm trying to access the i-th item in Model.CategoryList using the i variable in the for loop. Can anyone help with this?

c#javascript asp.net

Answer 1

Answer №1

Razor does not run on the client side, so the code snippet you provided is not valid.

An easy solution is to save the entire array as a JavaScript variable on the client side by using serialization. In the example below, I have used Json.NET.

I recommend investigating what is executed on the server versus the client side. Understanding this distinction will aid you in writing Views.

function CreateCategoryList() 
{
    var limit = @(Model.CategoriesCount.ToString());
    var clientSideArray = JSON.parse('@(JsonConvert.SerializeObject(Model.CategoryList))');

    for (i=0; i<limit; i++)
    {
        var category = '<div class="CategoryItem">' + clientSideArray[i] + '</div>';                
        $("#CategoriesPopup").append(category);
    }
    alert($(".CategoryItem:first").text());
}

Answer 2

Razor does not run on the client side, so the code snippet you provided is not valid.

An easy solution is to save the entire array as a JavaScript variable on the client side by using serialization. In the example below, I have used Json.NET.

I recommend investigating what is executed on the server versus the client side. Understanding this distinction will aid you in writing Views.

function CreateCategoryList() 
{
    var limit = @(Model.CategoriesCount.ToString());
    var clientSideArray = JSON.parse('@(JsonConvert.SerializeObject(Model.CategoryList))');

    for (i=0; i<limit; i++)
    {
        var category = '<div class="CategoryItem">' + clientSideArray[i] + '</div>';                
        $("#CategoriesPopup").append(category);
    }
    alert($(".CategoryItem:first").text());
}

Requesting information from a model using a JavaScript variable in a cshtml file in an ASP.NET application

Answer №1

Similar questions

Error has occurred: Unable to assign a value to an undefined property using axios

Guide on building a Vue Js input name field with string-variable schema

Prevent the <a> tag href attribute from functioning with jQuery

The term 'MapEditServiceConfig' is being incorrectly utilized as a value in this context, even though it is meant to refer to a type

Transferring information through AJAX and fetching through PHP

The notification bar only makes an appearance when necessary

An unexpected identifier error occurred following an Ajax request

Is there a way to extract just the first line or n characters from a JSON file without having to download the entire dataset?

react component not displaying image

Fill up a data repository with the names and corresponding Project IDs

Tips for creating a user-friendly message using the iCalendar format

Implementing a persistent header on a WordPress site with Beaver Builder

Ways to access an element within a function triggered by an event listener

Trouble with retrieving dates in ISO format

Can you use Stryker.NET to specifically exclude internal methods and constructors from mutation testing?

What is the maximum number of requests that Node-Express can send simultaneously?

Elements that possess identical class attributes yet exhibit dynamic behavior

Personalized DataAnnotation and Models for Viewing

The significance of Token Details in Tokbox

Issue with event listener not functioning properly with dynamically created content using AJAX (only using vanilla JavaScript