MVC6 将视图模型列表属性分配给 javascript 变量答案

【问题标题】：MVC6 Assign a viewmodel list property to a javascript variableMVC6 将视图模型列表属性分配给 javascript 变量
【发布时间】：2023-04-02 00:45:02
【问题描述】：

我有一个具有以下属性的视图模型：

public class CompanyDetailsViewModel
{

    [Required(ErrorMessage = "A Company Name is required")]
    [Display(Name = "Company Name:")]
    [StringLength(100)]
    public string CompanyName { get; set; }

   ...

    public IList<SuburbAndPostcode> SuburbAndPostcodesList { get; set; }
}

列表是从这个 POCO 类创建的：

public class SuburbAndPostcode
{
    [Key]
    public int SuburbsAndPostcodesId { get; set; }
    public string Suburb { get; set; }
    public string PostCode { get; set; }
    public State State { get; set; }

}

这是状态对象：

 public class State
{
    [Key]
    public int StateId { get; set; }
    public string ShortName { get; set; }
    public string Name { get; set; }

    public virtual ICollection<CompanyDetail> CompanyDetails { get; set; }
}

我正在尝试创建一个具有郊区和邮政编码属性的变量作为我可以用于自动完成功能的列表，但是我似乎无法将 Model.SuburbsAndPostCodesList 分配给变量。

我已经尝试了从这个论坛上的其他问题（例如here）中指出的各种 javascript 选项。

我想要一个代表列表的 javascript 变量，我尝试过设置：

var suburbs = @Model.SuburbAndPostcodesList

我尝试过使用 json 并尝试循环遍历模型，但收到错误消息，提示变量“test”脱离上下文：

        var test =[];

        @for (int i = 0; i < Model.SuburbAndPostcodesList.Count; i++)
        {
            test[i]=...
        }

我也尝试过使用“push”和“.Encode”。

我想知道如何将此字符串列表和状态对象分配给 javascript 变量？

【问题讨论】：

标签： javascript

【解决方案1】：

使用Ajax Call实现自动补全功能

  $(document).ready(function () {
            $("#txtPostcodes").keyup(function () {

                //AutoComplete the Results
                $("#txtPostcodes").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "../ControllerName/ActionName",
                            data: "{'input':'" + document.getElementById('txtPostcodes').value + "'}",
                            dataType: "json",
                            success: function (data) {
                                if (data != null) {
                                    var suburbs = data;                              
                                }
                            },
                            error: function (result) {
                            }
                        });
                    }
                });
            }
            });
        });

【讨论】：

感谢 Akshay，但我想使用通过视图模型购买到 CSHTML 页面的列表并操作数据，因此我不必做多个 AJAX 帖子。我想转换视图模型列表和使用它作为来源。
我看过这篇文章 [链接] (stackoverflow.com/questions/14433406/…)。我在“var students = @Html.Raw(Json.Encode(Model.Students));”上尝试了几乎完全相同的事情及其错误特别是 Json.Encode ... 编码根本不存在。我怀疑它就像使用这个语法一样简单，但对我来说它不适用于“编码”。
stackoverflow.com/questions/12682128/… 如果您在引用 JSON.Encode 时遇到错误

【解决方案2】：

最后，我简单地将视图模型列表的各个成员等同起来，并为自动完成功能构建了一个 javascript 多维数组。这里是：

 var suburbs = [
   @for (var i = 0; i < Model.SuburbAndPostcodesList.Count; i++) {
           <text>{
       id: "@Model.SuburbAndPostcodesList[i].SuburbsAndPostcodesId",
       suburb: "@Model.SuburbAndPostcodesList[i].Suburb",
       postCode: "@Model.SuburbAndPostcodesList[i].PostCode",
       state: "@Model.SuburbAndPostcodesList[i].State.ShortName"
   }@(i == Model.SuburbAndPostcodesList.Count - 1 ? "" : ",")</text>
       }
        ];

        $("#Suburb").autocomplete({
            source: function (req, responseFn) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp("^" + re, "i");
                var a = $.grep(suburbs, function (item, index) {
                    return matcher.test(item.suburb);
                });
                a = $.map(a, function (x) {
                    return {
                        label: x.suburb + " - " + x.postCode,
                        value: x.suburb,
                        suburbDetails: x
                    };
                });
                responseFn(a);
            },
            select: function (value, data) {
                if (typeof data == "undefined") {
                } else {
                    $("#Postcode").val(data.item.suburbDetails.postCode);
                }
            },
            change: function (event, ui) {
                if (!ui.item) {
                    $("#Suburb").val("");
                    $("#Postcode").val("");
                }
            }
        });

【讨论】：