Использование Ajax для частичной загрузки изображений в .NET MVC4

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

Цель состоит в том, чтобы загружать частичный просмотр INSIDE div.. Он просто загружает частичный вид как целую страницу, а не внутри Div.

Код выглядит следующим образом:

Контроллер:

namespace LDP.WebUI.Controllers
{
    public class TestController : Controller
    {
        //
        // GET: /Test/

        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult Page1()
        {
            return PartialView("Page1");
        }
        public PartialViewResult Page2()
        {
            return PartialView("Page2");
        }
    }
}

Main View (Index): (Я также пробовал "mainDiv" без знака фунта, не уверен, что это было правильно)

<script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#hideme').click(function () {
            $(this).hide();
        });
    });
</script>
<div>
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
@Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
<div id ='mainDiv'>

</div>
<button id ="hideme">Hide Me</button>
</div>

Частичный вид 1 (Page1.cshtml)

@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

Частичный вид 2 (Page2.cshtml)

@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

Обновление: Я создал новый проект MVC 4. Это происходит по умолчанию с помощью Jquery 1.7.1 и библиотеки ненавязчивого ajax от Microsoft. Он по-прежнему загружает частичный вид на новой странице...

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

<button>load about</button>
<script type="text/javascript">
    $("button").click(function () {
        $("#mainDiv").load("Test/Page2");
    });

</script>
    enter code here

Ответ 1

ditch # in UpdateTargetId = "#mainDiv"
убедитесь, что на вашей странице есть ссылка jquery.unobtrusive-ajax.min.js script.

Ответ 2

Я скопировал ваш код в новый проект MVC4, и он отлично работает.

Смотрите снимок экрана решения:

Надеюсь, это даст вам подсказку о том, что может быть неправильным.

Ответ 3

Я обычно загружаю частичные части, подобные этому, используя JQuery

$( document ).ready(function() {

  $("#lnkPage1").click(function( event ) {

    $('#mainDiv').load('Test/Pag1');

  });

  $("#lnkPage2").click(function( event ) {

    $('#mainDiv').load('Test/Pag2');

  });

});

Ответ 4

@using (Ajax.BeginForm("AjaxViewCall", "Home", new AjaxOptions { UpdateTargetId = "result" }))   
{
    <p>
        <input type="submit" value="Ajax Form Action" />
    </p>
}

<div id="result></div>

При нажатии кнопки он должен вызвать действие, которое возвращает PartialView. Вам не нужно "#" в вызове Ajax.BeginForm.

Ответ 5

Единственный выпуск, который я имел с исходным примером, - это путь \lib\in script src. По умолчанию MVC 4 Web-приложение помещает js файлы в "Scripts", а не "Scripts\Lib". Пример экрана показан правильно.

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"

Также в исходном примере - установка в ViewBag.Title приведет к тому, что это не сработает:

@{
    ViewBag.Title = "Some Title";
}

Ответ 6

У меня такая же проблема; загрузка частичного представления как всей страницы, а не в определенный div.

Я неправильно предполагал, что мой _Layout.cshtml включал файл jquery.unobtrusive-ajax.js, поскольку я не понимал, что делает Bundles thingy (?). Я думал, что это добавили Bundles.

В моем _Layout.cshtml View он определяет @RenderSection("scripts", required: false) Что на английском языке; он необязательно включает раздел в вашем представлении, называемый @scripts. Поэтому никакая ошибка не возникает, если вы ее не включаете (скрипты @section), но симптом заключается в том, что Ajax просто отображает на новой странице, если вы этого не делаете.

Чтобы исправить это: поставьте следующее в своем представлении (я ставлю его ниже ...ViewBag.Title; })

@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}

Извините, если мое объяснение немного рудиментарно, я немного новичок в этом. Надеюсь, это поможет кому-то.

Ответ 7

загрузить данные json или частичный вид таблицы. не полный формат.

success:function(data){
    alert(data);
    debugger;
    ('#div_id').data(data);
}

здесь возвращенные данные - это данные json или данные типа

datap > . используйте предупреждение для проверки данных.