jQuery를 사용하여 MVC PartialView에서 데이터를 필터링하려면 어떻게합니까?

Question

index.aspx 페이지에서 드롭 다운을 변경할 때 ajax, jQuery를 사용하여 데이터를 업데이트하려면 어떻게해야합니까? ProjectList 드롭 다운이있는 페이지가있어 해당 프로젝트와 관련된 모든 문제를 보여 주어야합니다.

컨트롤러 조치에서 반환 값을 변경하면 주석 코드를 확인하고 마스터 페이지를 제거하고 부분 뷰를로드하거나로드하지 않습니다. 나는 또한 다음과 같은 일을하려고 노력했다 : return partialview ( "myissues", paginatedissues);

아래 코드를 사용하면 AJAX를 사용하여 페이지를 변경할 수 있지만 PartialView를 새로 고치기 위해 올바른 데이터 또는 HTML을 반환하지는 않습니다.

그렇다면 내가 무엇을 잘못하고 있는가, 어떻게 데이터 새로 고침을 달성 할 수 있습니까?

index.aspx

<label for="ProjectList">Project:</label>
<%= Html.DropDownList("ProjectList", "--All--") %>
<div id="divMyIssues"><% Html.RenderPartial("MyIssues", Model); %></div>
<script type="text/javascript">
$(document).ready(function() {
     $("#ProjectList").change(function() {
         CanIRefresh();
     });
  });
  function CanIRefresh() {
     $.ajax({
         type: "POST",
         url: "/Issue/" + "Index",
         dataType: "html",
         data: {
             page: 5// just changing the page to see if it updates the 
                   //partialView, if it does change I can then pass ProjectId 
                   //to filter.
         },
         success: function(v) {
             RefreshData(v);
         },
         error: function(v, x, w) {
             //Error
         }
     });
 }
function RefreshData(v) {
     $("div#divMyIssues").html(v);
     return;         
 }
</script>

issuecontroller.cs

public ActionResult Index(int? page)
{
   // Load the Project List
   var projectList = new SelectList(_db.Project.ToList(), "ProjectId", "Name");
   ViewData["ProjectList"] = projectList;
   const int pageSize = 10;
   var myIssues = issueRepository.MyIssues2();
   var paginatedIssues = new PaginatedList<IssueSummary>(myIssues, page ?? 0, pageSize);
   ViewData.Model = paginatedIssues;
   // Adding for returning partial view
   //if (Request.IsAjaxRequest())
   //    return PartialView("MyIssues", paginatedIssues);
   //else
   //    return View(paginatedIssues);
   return View(paginatedIssues);
}

myissues.ascx

<ul>
 <% foreach (var m in ViewData.Model)
 { %>
    <li> <a href="<%= Url.RouteUrl("Default",  
       new { id = m.Id, controller = "Issue", action = "Details" })%>">
       <%= m.Title %></a>
  </li>
    <% } %>
</ul>
    <div class="pagination">
    <% if (Model.IsPreviousPage) { %>        
        <%= Html.RouteLink("<<<", "MyIssues", 
            new { page=(Model.PageIndex-1) }) %>        
    <% } %>        
    <% if (Model.IsNextPage) { %>        
        <%= Html.RouteLink(">>>", "MyIssues", 
            new { page = (Model.PageIndex + 1) })%>        
    <% } %>
</div>

Answer 1

멋진 jQuery 양식 플러그인을 사용할 수 있습니다. http://malsup.com/jquery/form/ DDL 변경 이벤트가 양식을 제출하도록하십시오.

$(document).ready(function() { 
    var options = { 
        target:'#divMyIssues',
    }; 

    $('form').ajaxForm(options); 
    $("#ProjectList").change(function() {
        $('form').submit();
    });

}); 

API 문서에서 대상 옵션의 작동 방식을 읽을 수 있습니다. 그래도 간단합니다.

그런 다음이 튜토리얼을 읽습니다 (그러나 요청에 대해 이미 알고있는 것 같습니다. isajaxRequest ()).
http://www.asp.net/learn/mvc/tutorial-32-cs.aspx

Answer 2

이것이 확실하지 않지만 지난 주 정도 비슷한 일을 해왔습니다.

나는 $ .ajax $ .post를 사용하지 않았다. 그러나보기 끝에서 중요한 것은 , "json") 성명서의 끝에. JSON 데이터를 반환했을 때 ITTERATE를 사용했습니다. 뒤에있는 코드에서 나는해야했다 return Json(mydata 실제로 반환 된 컬렉션을 통해 Itterate를 할 수 있도록.

나도했다 return PartialView("commentList" 다른 곳과 클라이언트 끝 i

$.post("/jQueryTests/jQueryAddMessageComment", { commentText: commentText }, function(newComment) {
            $("#divComments" + id.toString()).html(newComment);
        });

나는 이것 중 하나가 도움이되는지 확실하지 않지만 저를 도와 준 것은 작지만 작지 않고 거기에서 쌓이는 것이 었습니다.

당신이 더 원한다면 저에게 알려 주시면 제공하려고 노력할 것입니다. 그러나 나는 jQuery 전문가가 아닙니다.