Question

can anyone please tell me how to call the function GetDuration from within the following context:

@{
...
...
<div>  GetDuration(@item.StartDate, @item.EndDate) </div>
...
...
}

The function GetDuration() dynamically creates another DIV inside the parent DIV mentioned in my context.

I have 2 problems:

• I do not know how to call my function GetDuration() from the spot shown in the code
• startdatum.Month.ToString("MMMM"); returns "MMMM" instead of the name of the month

Thanks in advance!

This is my code:

<script type="text/javascript">

function GetDuration(startdatum, einddatum) {
    var maand1 = startdatum.Month.ToString("MMMM");
    var maand2 = einddatum.Month.ToString("MMMM");
    var duration = "Date: ";
    if (maand1 == maand2) {
        duration += item.Startdate.Day.ToString()
            + " - " + item.Enddate.Day.ToString()
            + " " + maand1
            + " " + item.Startdate.Year.ToString();
    }
    else {
        duration += item.Startdate.Day.ToString()
            + item.Startdate.Month.ToString("MMMM")
            + " - " + item.Enddate.Day.ToString()
            + " " + item.Enddate.Month.ToString("MMMM")
            + " " + item.Startdate.Year.ToString();
    }
    var dynDiv = document.createElement("div");
    dynDiv.class = "HP_DateDiv";
    dynDiv.innerHTML = duration;
    document.body.appendChild(dynDiv);
}

</script>


    @{  string prevYear = "";

    foreach (var item in ViewData.Model) {

        string year = item.StartDate.Year.ToString();
        if (year != prevYear)
        {
            <div class="contentheader"> 
                @year Formula 1 Tickets
            </div>

            prevYear = year;  
        }
        <div class="HP_eventBodyDiv">
            <div class="HP_picDiv" style = "width:100px; height:100px;">
                <a href="http://www.cssdrive.com/" class="highlightit"><img  src="../../Content/Pics/auto.jpg" alt="oto" height="50" width="50"/></a>
            </div>
            <div class="HP_eventDiv">
                <div class="HP_eventNameDiv">@item.Name
            </div>
<!--This is the spot to call my function with something like "GetDuration(@item.StartDate, @item.EndDate)"-->
                <div class="HP_viewBuyBtnsDiv">
                    <input id="btn_View" type="button" value="View Event" class="contentbtn"/>
                    <input id="btn_Buy" type="button" value="Buy Tickets" class="contentbtn"/>
                </div>
            </div>
        </div>            

        };
     }

Answer 1

I’m going to see if I can explain this a bit for you.
Razor Syntax allows us to do some great stuff like your doing on your view. The Ability to iterate through a collection on your view is really great, and can give some good flexibility to create dynamic pages.
They server is actually creating the Razor view with the syntax that your providing and then sends the build HTML page to the Client. That includes the script tags. So what your trying to do doesn’t realty work. You can’t iteratively call JavaScript Function in the @foreach Like that because the page hasn’t been rendered yet.
You should only think of using Javascript once the Razor View has been completely formed. Then you can use JavaScript to edit the DOM.

So my suggestion is what the EDIT says. Let the sever calculate that property and send it with the Model.

EDIT:

Wait after looking at updated Code I think your going about this the wrong way. I Don’t understand why you are using javascript to calculate your Duration. You should edit your model that you are passing through to contain the duration especially if its a calculated field like that. then you can just display the Duration just as any other property.

EDIT 2:

public class MyNewClass
{
public DateTime StartDate {get;set;}
public DateTime EndDate {get;set;}
public int Duration
{
get{
//Do your Logic Here with startdate and enddate
}
set;
}
}