Call JavaScript function in foreach loop inside View in ASP.Net MVC

Last Reply 2 months ago By dharmendr

Posted 2 months ago

i have list,when i bind it and show to view then i m using foreach loop,

i have dob in my list, but i want to show age there, then i want to call javscript function for each binding of dob.

View Code

foreach (var item in Model)
{
    <div class="col-sm-6">
        <table class="table_working_hours">
            <tbody>
                <tr class="opened_1">
                    <td class="day_label1">Age / Height :</td>
                    <td class="day_value">28, @item.HeightName</td>
                </tr>
                <tr class="opened">
                    <td class="day_label1">First Name :</td>
                    <td class="day_value">@item.First_Name  </td>
                </tr>
                <tr class="opened">
                    <td class="day_label1">Religion :</td>
                    <td class="day_value">@item.Religion_Name</td>
                </tr>
                <tr class="opened">
                    <td class="day_label1">Id :</td>
                    <td class="day_value">@item.User_id</td>
                </tr>
                <tr class="closed">
                    <td class="day_label1">DOB :</td>
                    <td class="day_value closed"><span>@item.DOB</span></td>
                </tr>

 Controller

var userlist1 = (from u in db.User_Detail
                join st in db.State_Name on u.State equals st.State_Id
                join h in db.Height_Table on u.Height equals h.Height_Id
                join cntry in db.Country_Name on u.Country equals cntry.Country_Id
                join e in db.Education_Qualification on u.Education_Qualification equals e.Education_Id
                where u.Gender == 2 && u.DOB <= dob21 && u.DOB >= dob22
                select new users_details
                {
                    First_Name = u.First_Name,
                    Last_Name = u.Last_Name,
                    Annual_IncomeName = incm.Annual_Income,
                    Caste1 = cast.Caste1,
                    Religion_Name = rlgn.Religion_Name,
                    Language = leng.Language,
                    EducationName = e.Education,
                    StateName = st.State,
                    User_id = u.User_id,
                    CountryName = cntry.Country,
                    HeightName = h.Height,
                    DOB = u.DOB
                });

i want to to calculate age for each item according to DOB and to write in place of Age .

but my DOb Format is 1990-08-23

Posted 2 months ago

Hi,

Check the below example.

Model

public class EmployeeDetails
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string DOB { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}

Controller

public ActionResult Index()
{
    List<EmployeeDetails> users = new List<EmployeeDetails>();
    users.Add(new EmployeeDetails { FirstName = "Nancy", LastName = "Davolio", DOB = "1948-12-08", City = "Seattle", Country = "USA" });
    users.Add(new EmployeeDetails { FirstName = "Andrew", LastName = "Fuller", DOB = "1952-02-19", City = "Tacoma", Country = "USA" });
    users.Add(new EmployeeDetails { FirstName = "Janet", LastName = "Leverling", DOB = "1963-08-30", City = "Kirkland", Country = "USA" });
    return View(users);
}

View

@model IEnumerable<_Age_Calculation.Models.EmployeeDetails>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.table_working_hours').each(function () {
                var ageRow = $(this).find('tr').eq(0);
                $(ageRow).find('[id*=lblAge]').html(GetAge($(ageRow).find('[id*=hfDOB]').val()));
            });
        });
        function GetAge(dob) {
            var dateString = dob;
            var parts = dateString.split("-");
            var dtDOB = new Date(parts[1] + "/" + parts[2] + "/" + parts[0]);
            var dtCurrent = new Date();
            var age = dtCurrent.getFullYear() - dtDOB.getFullYear();
            return age;
        }
    </script>
</head>
<body>
    @foreach (var item in Model)
    {
        <div class="col-sm-6">
            <table class="table_working_hours">
                <tbody>
                    <tr class="opened_1">
                        <td class="day_label1">Age</td>
                        <td class="day_value">
                            <input type="hidden" id="hfDOB" value="@item.DOB" />
                            <span id="lblAge"></span>
                        </td>
                    </tr>
                    <tr class="opened">
                        <td class="day_label1">First Name</td>
                        <td class="day_value">@item.FirstName</td>
                    </tr>
                    <tr class="opened">
                        <td class="day_label1">Last Name</td>
                        <td class="day_value">@item.LastName</td>
                    </tr>
                    <tr class="opened">
                        <td class="day_label1">City</td>
                        <td class="day_value">@item.City</td>
                    </tr>
                    <tr class="opened">
                        <td class="day_label1">Country</td>
                        <td class="day_value">@item.Country</td>
                    </tr>
                </tbody>
            </table>
        </div>
    }
</body>
</html>