Javascript Uncaught ReferenceError - ASP.NET MVC

本文关键字：NET MVC ASP Uncaught ReferenceError Javascript 更新时间：2023-09-26

我目前在我的MVC视图中有一个foreach循环，它为每个人创建一个表行，每个人都有一个下拉列表，需要在onchange事件期间执行JavaScript。此onchange事件将根据所选值在同一表行内填充另一个下拉列表。

var count = 0;
@foreach(var item in Model.Items)
{
    <tr>
        <td>
            @Html.DropDownListFor(
                model => item.SelectedId,
                new SelectList(item.MyList, "ID", "Name"),
                new 
                { 
                    @class = "form-control", 
                    @id = string.Concat("MyControl", count),
                    @name = string.Concat("MyControl", count),
                    @onchange = string.Format("javascript:MyJsFunction(this.value, {0});", count);"
                }
            )
            @Html.DropDownListFor(
                model => item.ChildSelectedId, 
                new SelectList(item.MyChildList, "ID", "Name"),
                new 
                {
                    @class = "form-control",
                    @id = string.Concat("MyChildControl", count),
                    @name = string.Concat("MyChildControl", count)
                }
             )
        </td>
    </tr>
    count++;
}

在视图的底部，我有以下<script>块:

<script>
    $(document).ready(function () {
        //do some other stuff here
    });
    function MyJsFunction(value, id) {
        var loadingMsg = "<option value='0'>Loading...</option>";
        var url = "/MyApp/Controller/Action/";
        var targetControl = "#MyChildControl" + id
        $(targetControl).html(loadingMsg).show();
        $.ajax({
            url: url,
            data: { Id: value },
            cache: false,
            type: "POST",
            success: function (data) {
                var markup = "<option value='0'>- My Child Control - </option>";
                for(var i = 0; i < data.length, i++) {
                    markup += "<option value=" + data[i].Value + ">" + data[i].Text + "</option>";
                }
                $(targetControl).html(markup).show();
            },
            error: function (response) {
                alert("error: " + response);
            }
        });
    }
</script>

当我运行代码并更改下拉列表中的值时，我得到以下错误:

Uncaught ReferenceError: MyJsFunction is not defined

如何解决此错误?

与Stephen Muecke合作，他帮助我开发了以下代码片段来解决我的问题:

HTML:

@foreach(var item in Model.Items)
{
    <tr>
        <td>
            @Html.DropDownListFor(
                model => item.SelectedId,
                new SelectList(item.MyList, "ID", "Name"),
                new 
                { 
                    @class = "form-control parent", 
                    @id = ""
                }
            )
            @Html.DropDownListFor(
                model => item.ChildSelectedId, 
                new SelectList(item.MyChildList, "ID", "Name"),
                new 
                {
                    @class = "form-control child",
                    @id = ""
                }
            )
        </td>
    </tr>
}

JavaScript:

<script>
    $('.parent').change(function() {
        var url = "/MyApp/Controller/Action/";
        var id = $(this).val();
        var target = $(this).closest('tr').find('.child');
        target.empty();
        $.ajax({
                url: url,
                data: { Id: id },
                cache: false,
                type: "POST",
                success: function (data) {
                    target.append($('<option></option>').val('').text('- Child Control -'));
                    $.each(data, function (index, item) {
                        target.append($('<option></option>').val(item.Value).text(item.Text));
                    });
                },
                error: function (response) {
                    alert("error: " + response);
                }
            });
    });
</script>