ASP.net MVC 2 SPARK - Создайте ссылку «Добавить новый элемент» на странице поиска - PullRequest
Новая
       28

ASP.net MVC 2 SPARK - Создайте ссылку «Добавить новый элемент» на странице поиска

0 голосов
/ 09 декабря 2010

У меня есть веб-форма в SPARK, которая позволяет редактировать класс Facility, содержащий Комнаты. При редактировании объекта все комнаты также перечислены для редактирования. Форма отлично подходит для редактирования, но я бы хотел добавить кнопку «Добавить комнату», которая добавляет новую пустую комнату под существующие. Есть идеи, как этого добиться?

В настоящее время я делаю это на своей странице SPARK: 

[All the Facility editing stuff...]
<p>Room</p>
 <div class="small">Enter the rooms associated with this facility.</div>
  <div class="add">
    <div id="room">
      <AddFacilityRoom each="var roomModel in Model.FacilityRooms" RoomModel="roomModel" Index="roomModelIndex" />
    </div>
    <a id="addRoom" class="add" href="events/room/add.mvc">Add a room</a>
  </div>

AddFacilityRoom содержит HTML-элементы для редактирования комнаты.

Я бы хотел, чтобы add.mvc создал новый пустой класс Room и внедрил новый идентичный (но пустой) элемент управления ниже существующих. В настоящее время, хотя он открывает новую страницу при нажатии кнопки «Добавить комнату».

Ответы [ 2 ]

0 голосов
/ 03 января 2011

Ваше решение выглядит хорошо, но, поскольку вы используете Spark, вы можете рассмотреть редко упоминаемые шаблоны Javascript.Преимущество этого в том, что разметку в _AddFacilityRoom.spark не нужно будет дублировать в add.mvc.Также не потребовался бы запрос json (если данные для новой комнаты не нужны).

К сожалению, я точно забуду, как именно они работают, но шаги примерно такие:

  1. Добавить новое действие:

    public ActionResult AddRoomScript () {return new JavascriptViewResult {ViewName = "_AddFacilityRoom"};}

  2. Добавьте тег сценария с помощью: src = "! {Url.Action (" AddRoomScript ")}"

  3. Затем вызовите несколько js: var html = Spark.Shared._AddFacilityRoom.RenderView ({RoomModel = {});$ ('# room'). append (html);

Для правильной работы потребуется некоторое исследование, но это интересный вариант.

0 голосов
/ 10 декабря 2010

Хорошо, я понял это. Мне не хватало знаний JQuery, чтобы понять это. Функция ниже: 

$('#addRoom').click(function () {
    var a = $(this);
    a.addClass('loading');
    $.ajax({
        url: a.attr('href'),
        cache: false,
        success: function (html) {
            $('#room').append(html);
            a.removeClass('loading');
        }
    });
    return false;
});

Плюс следующий HTML: 

<div id="room">
 <a id="addRoom" class="add" href="events/room/add.mvc">Add a room</a>
</div>

Делает трюк.

...