How do we set the value of an HTML element using Jquery and ASP.NET MVC 4 complex model data

Question

In one of my ASP.NET MVC 4 view, I am using a Model's data to set the values of different HTML elements. I can use this model in the view to display the values such as:

<div>@Model.Category.Name</div> etc...

But one of the div tag <div id="DivTotalCost"></div> needs to display the total cost of all the products in all the categories. So at the end of the view I have the following script code to set the value of this DivTotalCost tag. But the following code does not set this value. I have put an alert statement to test the value and the alert displays:

function(){
  return total;
}

View:

@model MyMVC_app.Models.ProductDetails

<div>@Model.Category.Name</div> etc...
<div id="DivTotalCost"></div>

@section scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    <script type="text/javascript">
        $(document).ready(function () {
            var TotalCost = function () {
                @if(Model.ProductCategoryList != null)
                {
                    var total = "";

                    foreach(var item in Model.ProductCategoryList)
                    {
                        foreach(var product in @item.products)
                        {
                            total += product.price;
                        }
                    }
                }
                return total;
            }
            alert(TotalCost);
            $('#DivTotalCost').text(TotalCost);
        });
    </script>
}

Please help.

Thanks..Nam

You are intermingling javascript and razor you can have a viewmodel that gives you total — KrishnaDhungana
– KrishnaDhungana, Commented Nov 30, 2013 at 7:03

pollirrata · Accepted Answer · 2013-11-30 07:15:27Z

1

First: The alert displays

function(){
  return total;
}

because you're passing the function itself, no its result. Your alert (and the div text assignment)should use the function result, like this

alert(TotalCost());

now, inside the function you're mixing razor and javascript, and both are different things and run in a different time each, so you should adjust your code like this (not tested, but you might get the idea)

$(document).ready(function () {
var TotalCost = function () {
               @{
                var total = 0;
                if(Model.ProductCategoryList != null)
                {   
                    foreach(var item in Model.ProductCategoryList)
                    {
                        foreach(var product in @item.products)
                        {
                            total += product.price;
                        }
                    }
                }
              }//end of razor block
                return @total;
            }
        });

You can also create a ViewModel and add that logic on it, just in case you're open to try a different approach

answered Nov 30, 2013 at 7:15

pollirrata

5,2942 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nam Over a year ago

My thanks to pollirrata for helping me learn by pointing out my mistakes and presenting a corrected solution. I'm transitioning from WebForms to MVC.

Collectives™ on Stack Overflow

How do we set the value of an HTML element using Jquery and ASP.NET MVC 4 complex model data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related