MVC6 aşağıdaki özelliğe sahip bir ViewModel sahip bir javascript değişken

Question

bir ViewModel liste özelliği atama :

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

Banliyö ve posta kodu özellikleriyle birlikte bir değişken oluşturmaya çalışıyorum Ben bir otomatik tamamlama işlevi için kullanabiliyorum, ancak ben bir modele Model.SuburbsAndPostCodesList atama görünmüyor.

Bu forumdaki diğer soruların yanı sıra here gibi çeşitli javascript seçeneklerini denedim.

O listeyi temsil eden bir JavaScript değişkeni istiyorum ve ben ayarı sadece denedim:

var suburbs = @Model.SuburbAndPostcodesList 

denedim json kullanarak ve Model döngü denedi ama söyleyerek bir hata alıyorum değişken "test" bağlam dışı: Ben de "itmek" ve ".Encode" seçeneğini kullanarak denedi

 var test =[]; 

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

.

Bu dizi ve durum nesnesinin bir javascript değişkenine nasıl atanacağını bilmek ister misiniz?

Answer 1

Kullanım Ajax Çağrı ben sadece ViewModel listesinin çeşitli üyelerine eşdeğer Otomatik tam işlevsellikle Sonunda

$(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

elde etmek ve otomatik tamamlama fonksiyonu için bir javascript çok boyutlu bir dizi oluşturmak için. İşte burada:

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