Блог

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

Вот функциональность, которая мне требуется:

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

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

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

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

 @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);
}
  

Вы должны обработать событие изменения значения в окне со списком, выбрать идентификатор, затем использовать 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);
    }
}