Динамический рендеринг частичного представления в ASP.Net MVC3 Razor с использованием Ajax-вызова Action - PullRequest
Новая
       29

Динамический рендеринг частичного представления в ASP.Net MVC3 Razor с использованием Ajax-вызова Action

1 голос
/ 17 ноября 2011

Я пытаюсь создать одностраничную форму для создания «рабочего элемента».Одним из свойств является раскрывающийся список «Тип рабочего элемента».

В зависимости от типа рабочего элемента пользователю может потребоваться предоставить дополнительную информацию в сетке атрибутов стиля имя-значение-пара (таблица свойств).

Я хотел бы динамически отображать лист свойств, как только тип рабочего элемента выбран или изменен.Как только пользователь предоставит всю информацию, он щелкнет по кнопке «Отправить», чтобы создать «рабочий элемент».

Это то, что у меня есть: 

    @using (Ajax.BeginForm("AttributeData", new AjaxOptions() { UpdateTargetId="AttributeDataCell" }))
{

        <div style="float:left">

@{
    Html.RenderPartial("CreateWorkItemPartialView");
 }
 </div>     

<div id="AttributeDataCell" style="float:right">
    @Html.Action("AttributeData", new {id = 1})
</div>
}

Действие AttributeData в контроллере просто отображаетчастичное представление: 

public ActionResult AttributeData(int id = 0)
{
    var attributes = _workItemDataService.ListWorkItemTypeAttributes(id);
    return PartialView("EditWorkItemAttributesPartialView", attributes);

}

Теперь я хотел бы подключить это к событию выбора в раскрывающемся списке, чтобы частичное представление повторно отображалось в ячейке таблицы выше при каждом изменении выбора.Я хотел бы передать выбранное значение в качестве идентификатора.

Один из способов заключается в том, чтобы заставить форму представить себя (и, следовательно, повторно выполнить рендеринг).

  1. Если этоправильный подход, как мы можем это сделать?Esp., Как сделать только лист свойств для повторного рендеринга?

  2. Если есть лучший способ достичь вышеуказанного, укажите.

Спасибо

1 Ответ

1 голос
/ 17 ноября 2011

Вы можете подписаться на событие .change() раскрывающегося списка и инициировать запрос AJAX: 

$(function() {
    $('#Id_Of_Your_Drop_Down').change(function() {
        // This event will be triggered when the dropdown list selection changes

        // We start by fetching the form element. Note that if you have
        // multiple forms on the page it would be better to provide it
        // an unique id in the Ajax.BeginForm helper and then use id selector:
        var form = $('form');

        // finally we send the AJAX request:
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function(result) {
                // The AJAX request succeeded and the result variable
                // will contain the partial HTML returned by the action
                // we inject it into the div:
                $('#AttributeDataCell').html(result);
            }
        });
    });
});
...