Millenial2020
Millenial2020

Reputation: 2913

.NET MVC how to retrieve a Model in Javascript?

I have a List of product and a customer object coming from my server. I want to retrieve that information on javascript.

  <!-- Customer object -->
  <input type="hidden" id="customer" value="@ViewBag.Customer">

  <!-- List of products -->
  <input type="hidden" id="products" value="@Model">

Now in my javascript I have this.

console.log(document.getElementById("customer").value);

Thats not working I don't get the object value. I want to know how I reach the desire result?

The source code...

<!-- Customer object -->
  <input type="hidden" id="customer" value="Namespace.Models.Customer">

  <!-- List of products -->
  <input type="hidden" id="products" value="System.Collections.Generic.List`1[Namespace.Models.Product]">

This is my server side code.

public async Task<IActionResult> Order(int customerId)
    {
        ViewBag.Customer = await customerRepository.Details(customerId);
        var product = await productRepository.GetAll();

        return View(products);
    }

Upvotes: 0

Views: 4761

Answers (2)

Rupa Mistry
Rupa Mistry

Reputation: 383

There are few tweaks you need to do in order to achieve your desired results:

  1. Strongly bind your MVC View by specifying the model at the top of your .cshtml file

    @model List<StackOverflow.Models.Product>

  2. Modify your javascript code to parse customer details and products list into a valid JSON data type

     var customerDetails = @Html.Raw(@Json.Encode(ViewBag.Customer));
    
     // Read products list by directly referencing Model as view is strongly-typed
     var productsList = @Html.Raw(Json.Encode(Model));
    
    console.log("First Product Name:  " + productsList[0].Name);
    

Also, I believe there is no need to have hidden HTML elements for storing any information coming from the server or any other source. This will increase the size of your page resulting in poor performance.

In addition, rather than sending data into ViewBag's, you can simply create a ViewModel and have CustomerDetails and ProductsList as properties and then parse the model directly as shown above.

Upvotes: 0

Shyju
Shyju

Reputation: 218722

As per the comments, it looks like you want to read the entire model object in javascript, you may create a json string from your model using your javascript serializor.

Here is an example using

<script>
    var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
    console.log(model);       
</script>

The variable model will contain a js object(dictionary style) representing your razor view's model object.

Since we are executing C# exression/methods, (Html.Raw, SerializeObject), The above code has to be inside a razor view, not in an external javascript file(via a global variable). You can still access the object inside the external js file as long as that file is included after setting the js object to a global variable

Upvotes: 3

Related Questions