Как я фильтрую данные в частичном представлении MVC, используя jQuery - PullRequest
Новая
       20

Как я фильтрую данные в частичном представлении MVC, используя jQuery

2 голосов
/ 30 июля 2009

Как мне обновить данные, используя Ajax, jQuery, когда я меняю выпадающий список на моей странице Index.aspx? У меня есть страница с раскрывающимся списком ProjectList, на которой должны отображаться все проблемы, связанные с этим проектом.

Если я изменяю возвращаемое значение в своем действии Контроллера, см. Закомментированный код, он либо удаляет главную страницу и просто загружает PartialView, либо ничего не загружает. Я также пытался сделать что-то вроде: return PartialView ("MyIssues", paginatedIssues);

С помощью приведенного ниже кода я могу изменить страницу с помощью Ajax, но не возвращаю правильные данные или HTML для обновления PartialView.

Так что же я делаю не так или как я могу обновить данные?

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>

Ответы [ 2 ]

1 голос
/ 01 августа 2009

Вы можете использовать удивительный плагин jQuery Form: http://malsup.com/jquery/form/ и сделать так, чтобы событие изменения ddl отправило форму. 

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

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

});

Вы можете прочитать в документации API, как работает целевой параметр, хотя это так же просто, как и получается.

Тогда прочитайте это руководство (но вы, кажется, уже знаете о Request.IsAjaxRequest ())
http://www.asp.net/learn/mvc/tutorial-32-cs.aspx

0 голосов
/ 30 июля 2009

Не уверен, что это поможет, но я делал подобное на прошлой неделе или около того.

Я не делал $ .ajax, я использовал $ .Post. Но главное в конце представления было включить , "json") в конце утверждения. Используется, когда я возвращаю данные Json, через которые могу пройти. В приведенном ниже коде мне нужно было сделать return Json(mydata, чтобы я мог фактически пройти через возвращенную коллекцию.

Я также сделал return PartialView("commentList" в другом месте, и на стороне клиента я 

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

Я не уверен, поможет ли что-нибудь из этого, но что помогло мне, это начать с малого, но очень маленького и оттуда нарастить.

Если вы хотите больше, дайте мне знать, и я постараюсь предоставить. Но я не эксперт по Jquery.

...