Как мне отфильтровать данные в MVC partialview с помощью jQuery
-
05-07-2019 - |
Вопрос
Как мне обновить данные с помощью Ajax, jQuery при изменении выпадающего списка на моей странице Index.aspx?У меня есть страница с выпадающим списком проектов, в котором должны быть показаны все проблемы, связанные с этим проектом.
Если я изменяю возвращаемое значение в своем действии контроллера, смотрите прокомментированный код, он либо удаляет главную страницу и просто загружает PartialView, либо ничего не загружает.Я также пытался сделать что-то вроде:возвращает PartialView("MyIssues", paginatedIssues);
С помощью приведенного ниже кода я могу изменить страницу с помощью Ajax, но не возвращаю правильные данные или html для обновления PartialView.
Итак, что я делаю не так или как я могу выполнить обновление данных?
Индекс.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);
}
Мои выпуски.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>
Решение
Вы могли бы использовать потрясающий плагин jQuery Form: http://malsup.com/jquery/form/ и попросите событие ddl change отправить форму.
$(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
Другие советы
Не уверен, что это поможет, но я делал подобное на прошлой неделе или около того.
Я не делал $.ajax, я использовал $.Post.Но важной вещью в конце просмотра было включение , "json")
в конце заявления.Использовал это, когда возвращал Json-данные, с которыми я мог бы их обработать.В приведенном ниже коде мне затем пришлось сделать return Json(mydata
чтобы я действительно мог просмотреть возвращенную коллекцию.
Я также сделал return PartialView("commentList"
в другом месте и на стороне клиента я
$.post("/jQueryTests/jQueryAddMessageComment", { commentText: commentText }, function(newComment) {
$("#divComments" + id.toString()).html(newComment);
});
Я не уверен, помогает ли что-нибудь из этого, но то, что помогло мне, - это начать не с малого, а по-настоящему с малого и двигаться дальше.
Если вам нужно больше, дайте мне знать, и я постараюсь предоставить.Но я не эксперт по Jquery.