Как мне заставить Ajax.ActionLink обновлять элемент вместо навигации по всей странице? - PullRequest
Новая
       8

Как мне заставить Ajax.ActionLink обновлять элемент вместо навигации по всей странице?

9 голосов
/ 17 мая 2009

Я пытаюсь обновить <div> на мой взгляд, когда пользователь нажимает на Ajax.ActionLink. Однако он всегда перемещается по всей странице, а не вставляет ответ сервера в указанный мной элемент.

Мне кажется, что я делаю все в этом примере , но даже после создания самого простого тестового примера я все еще не могу создать желаемое поведение.

В следующем тестовом примере я загружаю /Company/test и после нажатия «Go!» Я ожидал, что <div> будет заменен на «Все готово», но вместо этого вся страница перейдет на /Company/test_ajax.

Я уверен, что здесь что-то упущено. Заранее спасибо.

CompanyController 

public ActionResult test()
{
    return View();
}

public ActionResult test_ajax()
{
    return Content("All done");
}

test.aspx 

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
</head>
<body>

<h2>test</h2>
<%= Ajax.ActionLink("Go!", "test_ajax",
    new AjaxOptions {
        UpdateTargetId="viewport"
        }) %>
<div id="viewport">Replace me!</div>

</body></html>

Ответы [ 5 ]

5 голосов
/ 18 сентября 2011

Если вы используете MVC 3, вам нужно будет включить "jquery.unobtrusive-ajax.js" в качестве ссылки. Он уже должен присутствовать в вашей папке Scripts. \ М /

4 голосов
/ 28 октября 2011

Я обнаружил, что добавление jquery.unobtrusive-ajax.js на мою страницу layout.cshtml позволяет избежать всевозможных глупостей «почему это не работает?» моментов при работе с объектами / методами ajax.

3 голосов
/ 19 мая 2009

Ваш пример работает, как и ожидалось, на моем компьютере. Проверьте, действительно ли файлы MicrosoftAjax.js и MicrosoftMvcAjax.js присутствуют в папке ../../Scripts.

1 голос
/ 13 августа 2014

С этим тоже были проблемы. Я использую VS2013 и jquery-1.10.2.min.js. Пришлось использовать комбинацию из 4 файлов JS, чтобы заставить его работать. Надеюсь, этот пример кода кому-нибудь поможет.

Test.cshtml: 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>

        <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.history.js")" type="text/javascript"></script>


    <script type="text/javascript">

        $(function () {
            $.history.init(function (hash) {
                if (hash.length > 0) {
                    $("#" + hash).click();
                }
            },
            { unescape: ",/" });
        });

        function AddHashTag(hashTag) {
            window.location.hash = hashTag;
        }

    </script>

</head>
<body>
            @Ajax.ActionLink("Render Circle", "GetCircle", null,
                new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('circle')" },
                new { @id = "circle" })

            @Ajax.ActionLink("Render Diamond", "GetDiamond", null,
                new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('diamond')" },
                new { @id = "diamond" })

            @Ajax.ActionLink("Render Star", "GetStar", null,
                new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('star')" },
                new { @id = "star" })

        <div id="divContent" style="width: 300px; height: 300px; text-align: center; vertical-align: middle;
    margin: 50px 50px;">
        </div>
</body>
</html>


star.cshtml:
star<div class="star"></div>

diamond.cshtml:
diamond<div class="diamond"></div>

circle.cshtml:
circle<div class="circle"></div>


Home Controller:

        public ActionResult Test()
        {
            return View();
        }

        [HttpGet]
        public ActionResult GetCircle()
        {
            return PartialView("Circle");
        }

        [HttpGet]
        public ActionResult GetDiamond()
        {
            return PartialView("Diamond");
        }

        [HttpGet]
        public ActionResult GetStar()
        {
            return PartialView("Star");
        }
1 голос
/ 17 мая 2009

Мне пришлось изменить AjaxOptions в моем вызове ActionLink, чтобы он заработал: 

<%= Ajax.ActionLink("Update", "UpdateContent", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "target", InsertionMode = InsertionMode.Replace })%>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...