Частичное обновление страницы MVC - PullRequest
4 голосов
/ 26 марта 2010

У меня есть проект MVC, где у меня есть форма с полями, которые пользователь может ввести и сохранить. На этой же странице у меня есть таблица с кратким списком информации, которую пользователь только что сохранил. Проблема, которую я имею, пытается обновить только таблицу после сохранения, а не обновление всей страницы.

Это возможно в jquery или MVC? Если так, у кого-нибудь есть пример.

Вот как выглядит действие в контроллере:

public ActionResult RefreshList()
    {
        string _employeeID = Request.QueryString["empIDSearch"];
        this.ViewData["coursehistorylist"] = _service.ListCoursesByEmpID(_employeeID);
        return View("CourseHistoryList");
    }

Функция в представлении: (и здесь я запутался в том, как обновить только таблицу)

$.ajax({
        url: "/Home/RefreshList",
        type: "POST",
        success: function(result) {
            alert("got here");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " " + thrownError + " " + ajaxOptions);
        }
    });

Получение ViewData из контроллера:

<% foreach (var item in
  (IEnumerable<EdMVC.Models.tblEdCourse>)ViewData["coursehistorylist"])
 {
%> 

Спасибо.

Ответы [ 3 ]

8 голосов
/ 31 марта 2010

Примечание. Когда я писал этот MVC, он был выпущен только в версии 1, хотя сейчас он в основном актуален, но есть некоторые части этого поста, которые не применимы к более поздним версиям MVC.

Это более глубокая версия ответа Ника Ларсена, к сожалению, мне не хватило места в комментариях, поэтому я добавил его в качестве ответа.

Вероятно, это должен быть запрос "GET", поскольку в этом запросе вы не отправляете данные на сервер. jQuery на самом деле решит эту проблему самостоятельно, когда вы используете запрос $ .ajax, так что вы можете пропустить его, как я сделал ниже. Если явно требуется действие «POST», обязательно сделайте это различие.

В выполняемом здесь вызове ajax переменная результата представляет собой строку, возвращаемую с сервера, и ее можно просматривать и применять как таковую. Если вы хотите, вы можете также превратить это в объект jQuery и отфильтровать его, но это выходит за рамки этого вопроса.

Ваш код $ .ajax должен быть обновлен до следующего:

$.ajax({
        url: '/Home/RefreshList',
        success: function(result) {
            alert('Received: ' + result);
            $('#myDivId').html(result);//This is the line you need
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " " + thrownError + " " + ajaxOptions);
        }
    });

Приведенный выше код вставит результат в элемент с идентификатором «myDivId», если сервер ответит правильно.

Этот div должен иметь следующий атрибут id, но содержимое div и другие атрибуты не имеют значения.

<div id="myDivId"></div>

Приведенные выше примеры будут функционировать полностью сами по себе, если действие контроллера, на которое указывает ваш URL, возвращает значение.

На совершенно другой ноте ...

Следующее полностью облегчает вашу жизнь с MVC, даже если это не имеет отношения к вопросу, который не подходит в комментарии и заслуживает упоминания.

Чтобы сократить объявление пространства имен, добавьте пространство имен в файл web.config, под узлом <pages><namespaces> добавьте следующее: <add namespace="EdMVC.Models"/> Вы также должны делать это с любыми другими пространствами имен, к которым вам необходимо регулярно обращаться, так как это позволит вам легко получить доступ к их объектам из представления.

Кроме того, в этом случае вам, вероятно, следует отправлять данные в представление через значение «модель» представления, если это вообще возможно, а не в словарь ViewData, который вам всегда нужно отбрасывать при использовании.

Для этого измените ваш возврат с:

this.ViewData["coursehistorylist"] = _service.ListCoursesByEmpID(_employeeID);
return View("CourseHistoryList");

до:

return View("CourseHistoryList", _service.ListCoursesByEmpID(_employeeID)) 

Отсюда вам нужно создать строго типизированное представление, для этого замените атрибут наследования в верхней части вашего представления на:

Inherits="System.Web.Mvc.ViewPage<IEnumerable<tblEdCourse>>") 

С этими шагами вы можете теперь обращаться к нему как к строго типизированному объекту, например так:

foreach(tblEdCourse item in Model) 
{ 
}

Или, если это один объект, просто <%= Model.Id %>

Это должно позволить вам сократить ваш кастинг и сэкономить кучу времени в долгосрочной перспективе, если что-либо из вышеперечисленного не имеет смысла или является трудным для понимания, дайте мне знать, и я перефразирую это.

2 голосов
/ 27 марта 2010

Единственный пропущенный шаг - заменить существующую таблицу новыми данными, возвращаемыми в функции успеха.

Для получения дополнительной информации вам следует обернуть вызов к частичному представлению в действии с помощью элемента div с идентификатором. Затем вызовите функцию .html(newData) для этого div в вашем методе успеха.

0 голосов
/ 27 марта 2010

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

Однако ...

MVC - идеальный подход, поскольку он устраняет тесную связь между уровнем представления веб-приложения и реальным кодом, обрабатывающим взаимодействие с пользователем. Однако, если вы инвестируете в решение для веб-форм, реализация jquery все еще может быть выполнена ...

JQuery - это библиотека JavaScript, которая позволяет вам «запрашивать» DOM веб-страниц для доступа к различным элементам на этой странице. Он также имеет удобную функцию для выполнения асинхронных запросов к серверу.

В веб-формах вы можете создать веб-сервис, чтобы сохранить введенные пользователем данные и вернуть новую строку таблицы, чтобы выполнить частичное обновление. Вам также необходимо узнать, как вернуть JSON из веб-службы, чтобы упростить обработку в JavaScript.

Ниже приведены некоторые полезные ссылки:

Возвращение JSON из веб-службы .NET: http://blog.davebouwman.com/index.php/2008/09/posting-data-to-aspnet-json-services-with-dojo/

Использование веб-службы .NET с JQuery: http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...