Ajax MVC PartialView

ProgramBox

Ajax MVC PartialView

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#c# #jquery #ajax #asp.net-mvc #razor

Вопрос:

Я столкнулся с проблемой с отображением PartialView в моем веб-приложении. То, что я пытаюсь сделать, это использовать @Ajax.ActionLink() для заполнения div при нажатии кнопки / ссылки содержимым другого представления. Проблема, с которой я сталкиваюсь, заключается в том, что вместо заполнения div он перезагружает содержимое на новую страницу, а не заполняет div. Все другие ответы, которые я просмотрел, говорят то же самое, и мой синтаксис практически такой же. Есть ли что-то среднее, что я пропустил или что я должен был знать, прежде чем я начал пытаться это сделать?

Вот моя ссылка на действие

 <body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar">Hei</span>
                <span class="icon-bar">På</span>
                <span class="icon-bar">Deg</span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            </ul>
        </div>
        <div>
            @Ajax.ActionLink("Last inn partial view", "_LoadView", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId="result"})
        </div>
    </div>
</div>

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>amp;copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>
@Scripts.Render("~/bundles/ajax");

Вот раздел, который я хочу заполнить

 <div class="content">
    <div class="content background">
        <div id="result">Her står det masse text</div>
    </div>
</div>
</div>

Вот контроллер

  [HttpGet]
    public PartialViewResult _LoadView()
    {
        return PartialView();
    }

Редактировать:

Забыл упомянуть, что у меня настроен BundleConfig.cs, и я убедился, что он работает, поскольку я визуализирую свой css через него, хотя это первый скрипт, который я попробовал.

         public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/scripts/jquery-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/scripts/jquery.validate*"));
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/scripts/modernizr-*"));
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/scripts/bootstrap.js"));
        bundles.Add(new ScriptBundle("~/bundles/ajax").Include("~/scripts/jquery.unobtrusive-ajax.js", "~/scripts/jquery.unobtrusive-ajax.min.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/bootstrap-theme.css", "~/Content/bankstyle.css"));
    }
}

РЕДАКТИРОВАТЬ: добавлен текст к вопросу, чтобы сделать его более понятным, выделен жирным шрифтом, чтобы сделать его понятным. Я очень открыт для альтернативных решений

РЕДАКТИРОВАТЬ: Понял, что я действительно искал, это модальный фреймворк в bootstrap. Спасибо за предложения

1. устанавливаете ли вы ненавязчивый jquery?

2. Ajax.ActionLink генерирует стандартную ссылку привязки и немного JavaScript, чтобы перехватить ее для обработки запроса через AJAX, а не поведение по умолчанию при изменении представления. Если происходит поведение по умолчанию, это означает, что JavaScript не запускается, что указывает на наличие какой-то ошибки на странице.

3. Хорошее описание, @ChrisPratt

4. Рассмотрено использование @html. Действие? будет вызывать действие при загрузке страницы и возвращать представление

5. @Ra3IDeN Ему явно не нужна ссылка, он хочет частичную загрузку представления внутри элемента в его представлении с использованием помощников html.

Ответ №1:

Пожалуйста, запустите это в консоли:

 PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.2

Для установки, пожалуйста, выполните следующие шаги:https://www.nuget.org/packages/Microsoft.jQuery .Ненавязчивый.Ajax/

Затем вы должны использовать файл сценария, который находится в папке Scripts

Ответ №2:

Установите ненавязчивый js-файл:

Запуск в nuget: Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Добавьте это в свой вид:

 @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")

Ответ №3:

Это не ответ на исходный вопрос, а альтернативное решение:

использование html.action

 <div id="contentContainer">
   @Html.Action("Action", "Controller")
</div>

Это вызовет действие и отобразит представление, которое вы возвращаете из действия.

Ответ №4:

Выяснилось, что я действительно искал модальную структуру в bootstrap. Исправлены мои проблемы за 5 минут.