2017-02-16 17 views
15

Aynı konuyu içeren birçok gönderi okudum, ancak hiçbiri yardım, bu nedenle yinelenen soru için özür dilerim :(IQ, JQueryUI sitesindeki basit örneği, sıkı kodlama değerleri ve otomatik tamamlama çalışmaları ile izledi ama benim veritabanından gelmeye lüzumJQuery UI Otomatik tamamlama ulaşılamıyor ActionResult C# MVC

Görünüm:.

@Html.TextBoxFor(model => model.Position, new { @type = "text", @id = "jobtitle", @name = "jobtitle", @placeholder = "Job Title" }) 

JS:

DÜZENLEME: Ben başarının bir uyarı eklendi ve uyarı çağrıldığını, ancak orada dat değil bir (yani. Hiçbir veri DB'den çekiliyor)

<script> 
$(function() { 
      $("#jobtitle").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: '@Url.Action("JobsAutoFill", "Account")', 
         data: { 
          Prefix: request.term 
         }, 
         success: function (data) { 
          alert(data); 
          response(data); 
         } 
        }); 
       }, 
       minLength: 1 
      }); 

      //$("#jobtitle").autocomplete({ 
      // source: "/Account/JobsAutoFill/" 
      //}); 
     }); 
</script> 

Ve Bağlantılar gerekli ekledik:

: Aşağıda
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

İşler listesini tutunmak için ActionResult (Aslında bir JsonResult) & Fonksiyon olduğu
public List<Jobs> GetAllJobs() 
    { 
     List<Jobs> JobsList = new List<Jobs>(); 

     using (RBotEntities EF = new RBotEntities()) 
     { 
      var JobsListQuery = (from ED in EF.EmploymentDetails 
            select new 
            { 
             ED.pkiEmploymentDetailID, 
             ED.Position 
            }); 

      foreach (var item in JobsListQuery) 
      { 
       JobsList.Add(new Jobs 
       { 
        Id = item.pkiEmploymentDetailID, 
        Name = item.Position 
       }); 
      } 
     } 

     return JobsList; 
    } 

public JsonResult JobsAutoFill(string Prefix) 
     { 
      //Note : you can bind same list from database 


      List<Jobs> ObjList = new List<Jobs>(); 

      ObjList = GetAllJobs(); 

      //Searching records from list using LINQ query 


      var JobNames = (from N in ObjList 
          where N.Name.StartsWith(Prefix) 
          select new { N.Name }); 
      return Json(JobNames, JsonRequestBehavior.AllowGet); 
     } 

Bir şey mi eksik veya yanlış bir şey yapıyorum?

Yardımlarınız için minnettarım, teşekkürler!

+0

Herhangi biri yardım edebilir mi? – AxleWack

+1

Şimdi jquery'yi yoksayın. Bu bir GET yöntemidir. Bir web tarayıcısından erişmek için deneyin. Çalışıyor mu? İşler serileştirilebilir mi? Sunucuda bir kesme noktasına ulaşabilir misiniz? Ayrıca, "veri" nesnesinin içinde ne var? Ayrıca data.Data'yı deneyin. –

+0

Şimdi Denetleyiciye ulaşabildiğim ve İşlerin döndüğünü görebildiğim, ancak şimdi gösterilmiyor (Sadece küçük bir kutuda küçük metinler görüyorum). Data.Data denedim ve undefined dedi. – AxleWack

cevap

13

Çalışıyorum!

Bir soruna neden olan ilk şey, ActionResult hesabımın üzerine [AllowAnonymous] eklemem gerektiğiydi.

İkincisi, ben bu benim Ajax arama değiştirdi:

$(function() { 
    $("#jobtitle").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: '@Url.Action("JobsAutoFill", "Account")', 
       data: { 
        Prefix: request.term 
       }, 
       success: function (data) { 
        response($.map(data, function (obj) { 
         return { 
          label: obj.Name, 
          value: obj.Name 
         }; 
        })); 
       } 
      }); 
     }, 
     minLength: 1 
    }); 
}); 

Aşağıda benim ActionResult olduğunu. kamu erişimine sahip olmak zorunda değil eğer

[AllowAnonymous] 
public JsonResult JobsAutoFill(string Prefix) 
{ 
    //Note : you can bind same list from database 


    List<Jobs> ObjList = new List<Jobs>(); 

    ObjList = GetAllJobs(); 

    //Searching records from list using LINQ query 


    var JobNames = (from N in ObjList 
        where N.Name.ToLower().StartsWith(Prefix.ToLower()) 
        select new { N.Name }); 
    return Json(JobNames, JsonRequestBehavior.AllowGet); 
} 
3

Sen AllowAnonymous bunu yapmamalı: Ben küçük harf duyarlılığı sıralamak bir değişiklik ekledi. Ve ikinci iyi performans için sorgu değiştirin:

var JobNames = (from N in ObjList 
       where N.Name.ToLower().StartsWith(Prefix.ToLower()) 
       select N.Name); 

Açıkçası bir dize dizisi dönmek gerekir. Ancak kodunuz, tek bir string özelliğine sahip bir nesne dizisi döndürüyor.

Ve komut kodu güncellemelerine acccording değiştirin:

success: function (data) { 
        response($.map(data, function (obj) { 
         return { 
          label: obj, 
          value: obj 
         }; 
        })); 
       } 
3

Dont Değişim bu sırt uç fonksiyonunu vuracak sorgu dizesinde parametrenizi geçmesi o şekilde ajax arama değiştirmek anonim izin verir. umarım bu size yardımcı olur umarım

});

İlgili konular