AJAX Call에서 테이블 데이터 업데이트

Question

EDIT : OK, 그래서 return 문을 return PartialView("_GridView", model);으로 변경하여 부분 뷰 _GridView를 호출 할 수 있지만 데이터가있는 테이블은 업데이트되지 않습니다. 나는 그것을 추적하고 올바른 모델을 보내고 올바른 데이터를 가진 테이블을 반복하고 AJAX 호출이 성공했지만 데이터는 여전히 동일한 데이터입니다. 누구 아이디어?

뷰에는 두 개의 부분 뷰가 있습니다.

내보기 :

@model IEnumerable<PPL.Models.GridPart> 

@{ 
    ViewBag.Title = "Index"; 


} 



<h2>Index</h2> 




<div id="dropDownsDiv"> 
    @Html.Partial("_DropDownsView", Model) 
</div> 


<div id="theGrid"> 
    @Html.Partial("_GridView", Model) 
</div> 

부분보기 _GridView : 부분

@model IEnumerable<PPL.Models.GridPart> 

@{ 
    ViewBag.Title = "_GridView"; 
} 
<div id="theGrid"> 
<table> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.Category) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Type) 
     </th> 
     <th> 
      @*@Html.DisplayNameFor(model => model.PartNum)*@ 
      Part # 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Status) 
     </th>   
     <th> 
      @Html.DisplayNameFor(model => model.REL) 
     </th> 


    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.Category) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Type) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.PartNum) 
      </td> 
      <td bgcolor="#@Html.DisplayFor(modelItem => item.StatusColor)"> 
       @Html.DisplayFor(modelItem => item.Status) 
      </td> 
      <td bgcolor="#@Html.DisplayFor(modelItem => item.RELColor)"> 
       @Html.DisplayFor(modelItem => item.REL) 
      </td> 


     </tr> 

    } 


</table> 

내가 필터로 사용하고 다른있어 몇 dropdownlists을 가지고 하나는 데이터베이스 정보를 표시하는 테이블 _DropDownsView보기 :

@{ 
    ViewBag.Title = "_DropDownsView"; 


} 

<script src="~/Scripts/jquery-1.8.2.min.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 


<script type="text/javascript"> 
    // assuming you're using jQuery 

    $(document).ready(function() { 
     $("#Categories").change(function() { 

      //alert("I'm here!"); 

      //Update typeDropDown 
      $.ajax({ 
       url: '/Part/Myajaxcall', 
       type: 'POST', 
       datatype: 'json', 
       data: { id: $("#Categories").val() }, 
       success: function (data) { 
        $('#typeDropDown option[value!="0"]').remove()      
        $.each(data, function (i, item) { 
         $('#typeDropDown').append('<option value="' + item.DescriptorID + '">' + item.pplType + '</option>');             
        });     
       }, 
       error: function(jqXHR, textStatus, errorThrown){ 
        alert(errorThrown); 
       } 
      }); 



      //Update Data Grid 
      $.ajax({ 
       url: '/Part/updateGrid', 
       type: 'POST', 
       datatype: 'json', 
       data: { id: $("#Categories").val() }, 
       success: function (data) { 
        alert("Got it!"); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        alert(errorThrown); 
       } 
      }); 




     }); 
    }); 



</script> 


Category: @Html.DropDownList("Categories", "   ") 

Type: <select id="typeDropDown"><option value="0"></option></select> 

Manufacturer: @Html.DropDownList("Manufacturers", "   ") 

내가 수행하려고하는 것은 항목이 선택되었을 때입니다. 카테고리 드롭 다운 목록에서 AJAX (작업 중)를 통해 두 번째 드롭 다운 목록을 먼저 업데이트하고 다음으로 내 데이터로 테이블을 업데이트하려고합니다. 어떤 도움을 크게 감상 할 수

public class PartController : Controller 
    { 
     private PartContext db = new PartContext(); 


     // 
     // GET: /Part/ 

     public ActionResult Index() 
     { 


      //Use LINQ to query DB & Get all of the parts 
      //Join PPLPart & PPLDescriptor Tables 
      var myParts = from p in db.Parts 
          join d in db.Descriptors on p.DescriptorID equals d.DescriptorID 
          select new 
          { 
           Category = d.DescriptorDesc, 
           TypeCol = p.PPLType, 
           PartNumber = p.PartNum, 
           Status = p.PPLStatus, 
           StatusColor = p.PPLStatusBGColor, 
           REL = p.RELStatus, 
           RELColor = p.RELStatusBGColor 
          }; 

      //Drop the parts into a List    
      List<GridPart> pl = new List<GridPart>(); 

      foreach (var m in myParts) 
      { 
       GridPart gp = new GridPart(); 
       gp.Category = m.Category; 
       gp.Type = m.TypeCol; 
       gp.PartNum = m.PartNumber; 
       gp.Status = m.Status; 
       gp.StatusColor = m.StatusColor; 
       gp.REL = m.REL; 
       gp.RELColor = m.RELColor; 

       pl.Add(gp); 
      } 

      var model = pl; 


      //Pass info for Categories drop-down 
      ViewBag.Categories = new SelectList(db.Descriptors, "DescriptorID", "DescriptorDesc"); 

      //Pass info for Manufacturer drop-down 
      ViewBag.Manufacturers = new SelectList(db.Manufacturers, "ManufacturerID", "ManufacturerName"); 




      //Pass off to View 
      return View(model); 
     } 


     [HttpPost] 
     public ActionResult updateGrid(string id) 
     { 
      int intID = Convert.ToInt32(id); 

      //Use LINQ to query DB & Get all of the parts 
      //Join PPLPart & PPLDescriptor Tables 
      var myParts = from p in db.Parts 
          join d in db.Descriptors on p.DescriptorID equals d.DescriptorID 
          where d.DescriptorID == intID 
          select new 
          { 
           Category = d.DescriptorDesc, 
           TypeCol = p.PPLType, 
           PartNumber = p.PartNum, 
           Status = p.PPLStatus, 
           StatusColor = p.PPLStatusBGColor, 
           REL = p.RELStatus, 
           RELColor = p.RELStatusBGColor 
          }; 

      //Drop the parts into a List    
      List<GridPart> pl = new List<GridPart>(); 

      foreach (var m in myParts) 
      { 
       GridPart gp = new GridPart(); 
       gp.Category = m.Category; 
       gp.Type = m.TypeCol; 
       gp.PartNum = m.PartNumber; 
       gp.Status = m.Status; 
       gp.StatusColor = m.StatusColor; 
       gp.REL = m.REL; 
       gp.RELColor = m.RELColor; 

       pl.Add(gp); 
      } 

      var model = pl; 



      return PartialView(model); 
     } 


     [HttpPost] 
     public JsonResult Myajaxcall(string id) 
     { 

      int intID = Convert.ToInt32(id); 

      var types = from c in db.Types 
          where c.DescriptorID == intID 
          select new { did = c.DescriptorID, pType = c.pplType }; 

      List<PPLType> typesList = new List<PPLType>(); 

      foreach (var t in types) 
      { 
       PPLType p = new PPLType(); 
       p.DescriptorID = t.did; 
       p.pplType = t.pType; 

       typesList.Add(p); 
      } 



      //string command = "EXEC dbo.pr_PPLDescriptor_list"; 
      //List<int> results = db.Database.SqlQuery(int, command, null); 


      return Json(typesList, JsonRequestBehavior.AllowGet); 
     } 

    } 

:

여기 내 컨트롤러입니다.

Answer 1

좋아, 알겠습니다. 부분 뷰를 반환하고있는 부분보기의 이름으로 전달하는

return PartialView("_GridView", model); 

필요 : 위에서 언급 그래서, 나는 내 행동의 결과의 반환을 업데이트 부분보기에 AJAX를 통해 새로운 모델을 전달하는 첫 번째 매개 변수로 전달하고 두 번째 매개 변수로 전달할 모델을 전달합니다.

다음, 부분보기의 데이터 테이블의 데이터를 새로 고치려면, 내 AJAX이 추가 :

$ ('# theGrid') HTML (데이터).

기본적으로 테이블을 포함하는 div를 업데이트합니다.

모든 의견을 보내 주셔서 감사합니다. 희망이 다른 사람에게 도움이됩니다.

Answer 2

해결 방법이 맞습니다.

해결 방법을 개선 할 수있는 곳이 몇 가지 있습니다. 테이블에 대한 데이터 만 가져오고 드롭 다운에 대해 데이터베이스의 내용을 변경하지 않으므로 get 요청을 할 수 있습니다.

그리고 인덱스 작업과 UpdateGrid가 동일한 코드를 사용하므로 단일 작업을 사용하여 다른 결과를 반환 할 수 있습니다.

색인 작업 중에 Request.IsAjaxRequest()을 사용하여 요청이 ajax을 통해 이루어 졌는지 확인할 수 있습니다.이 도움이

//Update Data Grid 
     $.ajax({ 
      url: '/Part/Index', 
      type: 'GET', 
      datatype: 'json', 
      data: { id: $("#Categories").val() }, 
      success: function (data) { 
       $('#theGrid').html(data); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       alert(errorThrown); 
      } 
     }); 

희망을 다음과 같이

[HttpGet] 
    public ActionResult Index(string id) 
    { 
     //create a predicate and default it to true 
     Expression<Func<Descriptor, bool>> predicate = d => true; 

     if(Request.IsAjaxRequest()) 
     { 
      //when an ajax request is made, convert the id to int 
      int intID = Convert.ToInt32(id); 
      //overwrite the predicate with your condition and use it in the where clause 
      predicate = d => d.DescriptorID == intID 
     } 

     //Use LINQ to query DB & Get all of the parts 
     //Join PPLPart & PPLDescriptor Tables 
     var myParts = from p in db.Parts 
         join d in db.Descriptors on p.DescriptorID equals d.DescriptorID 
         where predicate 
         select new 
         { 
          Category = d.DescriptorDesc, 
          TypeCol = p.PPLType, 
          PartNumber = p.PartNum, 
          Status = p.PPLStatus, 
          StatusColor = p.PPLStatusBGColor, 
          REL = p.RELStatus, 
          RELColor = p.RELStatusBGColor 
         }; 

     //Drop the parts into a List    
     List<GridPart> pl = new List<GridPart>(); 

     foreach (var m in myParts) 
     { 
      GridPart gp = new GridPart(); 
      gp.Category = m.Category; 
      gp.Type = m.TypeCol; 
      gp.PartNum = m.PartNumber; 
      gp.Status = m.Status; 
      gp.StatusColor = m.StatusColor; 
      gp.REL = m.REL; 
      gp.RELColor = m.RELColor; 

      pl.Add(gp); 
     } 

     var model = pl; 

     if(Request.IsAjaxRequest()) 
     { 
      return PartialView(model); 
     } 
     else 
     { 
      //Pass info for Categories drop-down 
      ViewBag.Categories = new SelectList(db.Descriptors, "DescriptorID", "DescriptorDesc"); 

      //Pass info for Manufacturer drop-down 
      ViewBag.Manufacturers = new SelectList(db.Manufacturers, "ManufacturerID", "ManufacturerName"); 

      //Pass off to View 
      return View(model); 
     } 
    } 

이제 Ajax 호출을 변경해야합니다.