如何在这个特定的上下文中调用我的 javascript 函数

Question

谁能告诉我如何在以下上下文中调用函数 GetDuration：

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

GetDuration() 函数在我的上下文中提到的父 DIV 内动态创建另一个 DIV。

我有两个问题：

• 我不知道如何从代码中显示的位置调用我的函数GetDuration()
• startdatum.Month.ToString("MMMM"); 返回 "MMMM" 而不是月份的名称

提前致谢！

这是我的代码：

<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

我想看看能不能给你解释一下。 Razor Syntax 允许我们做一些很棒的事情，比如你在你的视图上做的事情。遍历视图上的集合的能力非常棒，并且可以为创建动态页面提供一些很好的灵活性。 他们的服务器实际上是使用您提供的语法创建 Razor 视图，然后将构建 HTML 页面发送到客户端。这包括脚本标签。因此，您尝试做的事情实际上行不通。您不能像那样在 @foreach 中迭代调用 JavaScript 函数，因为该页面尚未呈现。 只有在 Razor 视图完全形成后，您才应该考虑使用 Javascript。然后你可以使用 JavaScript 来编辑 DOM。

所以我的建议是 EDIT 所说的。让服务器计算该属性并将其与模型一起发送。

编辑：

在查看更新的代码后稍等，我认为您的做法是错误的。我不明白你为什么使用 javascript 来计算你的持续时间。您应该编辑您正在传递的模型以包含持续时间，特别是如果它是这样的计算字段。那么您可以像显示任何其他属性一样显示 Duration。

编辑 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;
}
}