MVC 4 Jilet bir foreach döngüsünü güncellemek için Ajax formlarını kullanarak

Question

Nereden başlamalı ... İnternette nasıl benzer şeyler bulabilirim, ama hiçbir zaman bir şeyler yapmak için özel bir yolla çalışmazlar. Çok az başarı ile kısmi görüşler olmadan ve denedim.

Hızlı yıkık: Ajax formuna sahip, güçlü yazımlı bir Görünümüm var. formun altında bir kod bloğunu tekrarlayan bir foreach döngüsüne sahibim. Kod bloğunu form seçeneklerinden (filtreler) güncelleyebilmem gerekir.

Burada, benim Görünüm var 'FindATeacher.cshtml' şu anda (birçok farklı fikirleri denedikten sonra) haliyle:

@model Teachers.Models.OmniModel 
@{ 
    ViewBag.Title = "FindATeacher"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 

} 
<h2>Find a Teacher</h2> 
@using (Ajax.BeginForm("FilterTeachers", "Home", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onSuccess" })) 
{ 
    <div id="ContentFilter"> 
     <div class="filterLabels"> 
      <p>Search by Name</p> 
      <p>Filter By Instrument</p> 
      <p>Filter By City</p> 
     </div> 
     <div class="filterObjects"> 
      <p> 
       <input type="text" id="nameTXT" /> 
       <button type="submit" id="findButton">find</button> 
      </p> 
      <p>@Html.DropDownList("InstrumentID", (SelectList)Model.Instruments, "-- Select an Instrument --", new { id = "instrumentDD" })</p> 
      <p>@Html.DropDownList("CityID", (SelectList)Model.Cities, "-- Select a City --", new { id = "cityDD" })</p> 
     </div> 
    </div> 
} 
<hr /> 
@foreach (var r in Model.Teachers) 
{ 
    <div id="ContentResults"> 
     <div id="avatar"> 
      <img src="i" /> 
     </div> 

     <div id="demographics"> 
      <h6>@r.Teacher</h6> 
      <strong>@r.StudioName</strong> 
      <p><a href="#">@r.URL</a></p> 
      <p>@r.StreetAddress</p> 
      <p>@r.City, @r.AddressStateID @r.Zip</p> 
      <p>@r.Phone</p> 
      <p>@r.EmailAddress</p> 
     </div> 
     <div id="studioDetails"> 
      <p><strong>Instrument(s) Taught</strong></p> 
      <p> 
       @{ 
    var instrumentString = r.Instruments.Aggregate("", (a, b) => a + b.Instrument + ", "); 
    if (instrumentString.Length != 0) 
    { 
     instrumentString = instrumentString.Remove(instrumentString.LastIndexOf(",")); 
    } 
       } 
       @instrumentString 
      </p> 
      <br /> 

      @if (r.Information != "" && r.Information != null) 
      { 
       <p><strong>Information</strong></p> 
       <p>@r.Information</p> 
      } 
     </div> 
    </div> 
} 

Şimdi burada benim Kontrolör bu. Kontrolördeki sonuçları doğru bir şekilde aldım, sadece kod bloğunu güncellemiyorum:

public ActionResult FindATeacher() 
     { 
      Model.Instruments = new SelectList(TeacherService.GetInstrumentList(0),"InstrumentID","Instrument"); 
      Model.Cities = new SelectList(TeacherService.GetCityList(),"CityID","City"); 
      Model.Teachers = TeacherService.GetTeacherList("", 0); 
      return View(Model); 
     } 

     [HttpPost] 
     public JsonResult FilterTeachers(String teacherName, String instrumentID, String cityID) 
     { 
      Model.Teachers = TeacherService.GetTeacherList("John", 0, 0); 
      return Json(Model.Teachers); 
     } 

Teşekkürler.

Answer 1

@VishalVaishya doğru fikri sunar, ancak özel javascript kodu içermeyen daha basit bir yol olmasa: AjaxOptions bir UpdateTargetId özelliği olduğunu AJAX araç seti, verilen hedefin kontrol cihazından geri gönderilen sonuçlarla güncellenmesini istediğiniz anlamına gelecektir.

FindATeacher.cshtml:

@using (Ajax.BeginForm("FilterTeachers", "Home", new AjaxOptions { 
    HttpMethod = "Post", UpdateTargetId = "TeacherList" })) 
{ 
    ... 
} 
<hr /> 
<div id="TeacherList"> 
    @Partial("TeacherList", Model.Teachers) 
</div> 

TeacherList.cshtml

@model IEnumerable<Teacher> 
@foreach(var teacher in Model) 
{ 
    ... 
} 

Kontrolör eylemi:

[HttpPost] 
    public ActionResult FilterTeachers(String teacherName, String instrumentID, String cityID) 
    { 
     Model.Teachers = TeacherService.GetTeacherList(teacherName, instrumentID, cityID); 
     return PartialView("TeacherList", Model.Teachers); 
    } 

Answer 2

Sen yöntemle aşağıdaki deneyebilirsiniz: Başka bir kısmi görünüm içine

Ayrı

sizin foreach döngüsü. Ve kısmi görünümünüzü filtre/tıklama olayına yükleyin ve filtrelenmiş parametreleri denetleyici eyleminize geçirin. Böyle

JS değişiklik olayı kodu olacak bir şey:

var teacherName = ''; //get your selected teachername 
var instrumentID = ''; //get your selected instrumentid 
var cityID = ''; //get your selected city id 

var url = '@Url.Action("FilterTeachers", "ControllerName", new { teacherName = "teacher-Name", instrumentID="instrument-ID", cityID="city-ID" })'; 

url = url.replace("teacher-Name", teacherName).replace("instrument-ID", instrumentID).replace("city-ID", cityID); 

$('#result').load(url);