Javascript语法错误不知道我做错了什么

Question

我对 JavaScript 还很陌生，但我正在学习.. 但现在我陷入困境，我做了这个 JavaScript，除了语法错误

$(function () {
    $(function () {
        $('#date').datepicker({
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy-mm-dd",
            firstDay: 1,
            onSelect: function (dateText) {
                $('#EndDate').datepicker('option', 'minDate', new Date(dateText));
            }
        });
    });
});

if (!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))) {

    $(function () {
        $("#startTime").timePicker({
            step: 15,
            endTime: "23:45"
        });
    });
    $(function () {
        $("#endTime").timePicker({
            step: 15,
            endTime: "23:45"
        });
    });
    $(function () {
        $("#breakTime").timePicker({
            step: 5,
            endTime: "03:00"
        });
    });
}
function SetDate(dt) {
    $('#date').val(dt);
}

var n = @(Model.Projects.Count);

function AddProject() {
    n++;
    $.ajax({
        type: "GET",
        url: "@(Url.Action("Project"))/" + n + "/?showDescription=false",
        dataType: "html",
        success: function(data) {
            $('#projects').append(data);
        }
    });
}

在我的 AddProject 函数上，我收到了错误，但我怎么看不出可能出了什么问题？

这就是我想要使用脚本的 View 。

                            @if (ViewData["posted"] != null)
                            {
                                <div class="alert alert-success">
                                    <strong>Inställningar sparade</strong>
                                </div>
                            }

                            @using (Html.BeginForm("Settings", "Reports", FormMethod.Post, new { enctype = "multipart/form-data" }))
                            {
                                <div class="portlet light">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-green-sharp bold uppercase">Inställngar</span>
                                        </div>
                                    </div>
                                    <table class="table table-striped table-bordered table-hover">
                                        <tr>
                                            <td>Starttid:</td>
                                            <td>@Html.TextBox("startTime", Model.Times.StartTime)</td>
                                        </tr>
                                        <tr>
                                            <td>Sluttid:</td>
                                            <td>@Html.TextBox("endTime", Model.Times.EndTime)</td>
                                        </tr>
                                        <tr>
                                            <td>Rastlängd:</td>
                                            <td>@Html.TextBox("breakTime", Model.Times.BreakTime)</td>
                                        </tr>
                                    </table>
                                </div>

                                        <div id="projects">
                                            @foreach (var data in Model.Projects)
                                            {
                                                Html.RenderPartial("Project", data, ViewData["vd"] as ViewDataDictionary);
                                                var viewDataDictionary = ViewData["vd"] as ViewDataDictionary;
                                                if (viewDataDictionary != null)
                                                {
                                                    viewDataDictionary["id"] = (int)viewDataDictionary["id"] + 1;
                                                }
                                            }
                                        </div>
                                            <a href="javascript:AddProject()" class="btn btn-primary">Lägg till projekt</a>
                                            <button type="submit" class="btn btn-primary">Spara</button>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Javascript 文件不支持 Razor 编译。只有 View 才能做到这一点。您不能将 Razor 放在单独的 JS 文件中。

相反，将任何必需的信息注入(inject)到 View 中(例如，作为 data- 或其他属性注入(inject)到元素中)，并让 JS 从元素中(或从您设置的一些全局变量中获取这些值) View 中)。

我将为您添加一些示例...

示例 HTML(属性注入(inject)):

<a id="addProject" href="@(Url.Action("Project") + "/{id}/?showDescription=false")" class="btn btn-primary">Lägg till projekt</a>

JQuery

 $('#addProject').click(function(){
      var url = $(this).attr('href');
      url = url.replace("{id}", myNewId);
      $.ajax({ 
         url: url
         ...
      });
 });

我强烈建议不要将内联事件处理程序(如 onclick="")与 jQuery 一起使用，因为将事件代码与注册分开，使维护更加困难，并且不具有与 jQuery 事件相同的功能处理。

示例 HTML(全局变量注入(inject))

将此代码片段放置在 View 中

<script type="text/javascript>
     var projectCount = @(Model.Projects.Count);
     // or
     window.projectCount = @(Model.Projects.Count);
</script>

然后您可以通过以下方式从其他 JS 文件访问 projectCount:

  var count = projectCount + 1;

或

  var count = window.projectCount + 1;