MVC6は、私は次のプロパティでのviewmodelを持っているjavascriptの変数

Question

へのviewmodelリストプロパティを割り当てます。

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

私は郊外とポストコードのプロパティを持つ変数をliとして作成しようとしています私はオートコンプリート機能のために使用することができますが、私は変数にModel.SuburbsAndPostCodesListを割り当てることはできません。

私はこのフォーラムの他の質問から示されたさまざまなjavascriptオプションをhereのように試しました。

私はリストを表すjavascript変数を持っていると思いますし、私は設定だけで試してみました：

var suburbs = @Model.SuburbAndPostcodesList 

私が試したJSONを使用して、私は、モデルをループしようとしたが、というエラーを取得します変数 "test"は文脈から外れています。

 var test =[]; 

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

私はまた、 "push"と ".Encode"を使って試しました。

この文字列リストと状態オブジェクトをjavascript変数に割り当てる方法を知りたいですか？最後に

Answer 1

使用のAjaxコールオートコンプリート機能を達成するために

$(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) { 
          } 
         }); 
        } 
       }); 
      } 
      }); 
     }); 

Answer 2

私は単にのviewmodelリストの各部材を同一視し、オートコンプリート機能のための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(""); 
       } 
      } 
     });