Динамическая загрузка частичного представления

Для проекта мне нужен динамический способ загрузки частичных представлений, желательно с помощью jquery/ajax.

Здесь требуются следующие функции:

  • Пользователь вводит форму. Отображается выпадающий список, а общий частичный вид отображается с помощью некоторых элементов управления вводом.
  • Пользователь выбирает другое значение в раскрывающемся меню
  • Частичное представление обновляется. Основываясь на значении раскрывающегося списка, он должен загрузить частичный вид. Некоторые значения имеют пользовательские представления, связанные с ними (я мог бы назвать их с помощью первичного ключа, например), другие - нет. Когда нет пользовательского вида; он должен загрузить значение по умолчанию. Когда он есть, он должен, конечно, загрузить пользовательский.

И все это должно быть ajaxified, когда это возможно.

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

Ответы

Ответ 1

Предполагая, что у вас есть выпадающее меню:

@Html.DropDownListFor(
    x => x.ItemId,
    new SelectList(Model.Items, "Value", "Text"),
    new { 
        id = "myddl", 
        data_url = Url.Action("Foo", "SomeController")
    }
)

вы можете подписаться на событие .change() этого выпадающего списка и отправить запрос AJAX на действие контроллера, которое вернет частичное и введет результат в DOM:

<script type="text/javascript">

$(function() {
   $('#myddl').change(function() {
       var url = $(this).data('url');
       var value = $(this).val();
       $('#result').load(url, { value: value })
    });
});

</script>

И поместите тег DIV, где вы хотите, чтобы частичный вид отображался в представлении хоста:

<div id="result"></div>

и внутри действия Foo вы можете вернуть частичный вид:

public ActionResult Foo(string value)
{
    SomeModel model = ...
    return PartialView(model);
}

Ответ 2

Вам нужно обработать событие с измененным значением в поле со списком, получить идентификатор, а затем использовать ajax для вызова действия сервера, передав выбранный идентификатор. Действие сервера вернет соответствующее представление. На стороне клиента вы заполняете возвращаемое представление в область на странице.

Например, действие на стороне сервера:

public ActionResult GetView(int id)
{
    switch (id)
    {
        case 1:
            return View("View1", model1);
            break;
        case 2:
            return View("View2", model2);
            break;
        default:
            return View("Default", modelDefault);
    }
}