Форум программистов, компьютерный форум, киберфорум
C#: ASP.NET Core
Форум программистов и сисадминов Киберфорум > Форум программистов > .NET > C# .NET > C#: Web, ASP.NET > C#: ASP.NET Core
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/21: Рейтинг темы: голосов - 21, средняя оценка - 4.86
Эксперт .NET
4432 / 2092 / 404
Регистрация: 27.03.2010
Сообщений: 5,657
Записей в блоге: 1
1

Не обновляется частичное представление через Ajax

14.05.2015, 23:50. Показов 3851. Ответов 3
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Shared/_Layout.cshtml
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

@using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")
</head>
<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"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Зоопарк", "Index", "Main", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
            </div>
        </div>
    </div>
 
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - ASP.NET Application</p>
        </footer>
    </div>
 
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>
MainIndex.cshtml
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

@model ZooWorld.Core.AnimalBase[]
 
@{
    ViewBag.Title = "Главная";
 
    // UpdateTargetId - элемент на странице, который будет обновляется после получения новых данных со стороны сервера.
    // Url - адрес ресурса на сервере, который возвращает данные для обновления страницы
    var options = new AjaxOptions()
    {
        UpdateTargetId = "details-block",
        Url = Url.Action("AnimalDetails"),
        HttpMethod = "Post"
    };
}
 
<h2>Зоопарк</h2>
<br />
 
 
 
<table class="animal-table">
 
    <caption>Животные:</caption>
    <thead>
    <tr>
        <th>Имя</th>
        <th>Возраст</th>
    </tr>
    </thead>
    <tbody>
    @foreach (var animal in Model)
    {
        <tr>
            <td>
                @using (Ajax.BeginForm(options))
                {
                    <input name="animalId" type="hidden" value="@animal.Id"/>
                    <input type="submit" value="@animal.Name"/>
                }
            </td>
            <td>@animal.Age</td>
        </tr>
    }
    </tbody>
</table>
<br/>
<div id="details-block">
 
</div>
 
@section scripts
{
    @*Ненавязивый JavaScript для выполнения запроса на сервер без полного обновления страницы*@
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    public class MainController : Controller
    {
        // GET: Main
        public ActionResult Index()
        {
            AnimalBase[] animals = ZoologicalGarden.Instance.GetAllAnimals();
            return View("MainIndex", animals);
        }
 
        public ActionResult Description(int animalId)
        {
           AnimalBase animal = ZoologicalGarden.Instance.GetAnimalById(animalId);
           return View("MainDescription", animal);
        }
 
        [HttpPost]
        public ActionResult AnimalDetails(int animalId)
        {
            AnimalBase animal = ZoologicalGarden.Instance.GetAnimalById(animalId);
            return PartialView("MainAnimalDetails", animal);
        }
    }
MainAnimalDetails.cshtml
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@model ZooWorld.Core.AnimalBase
 
<caption>Описание животного: "@Model.Name"</caption>
<table class="animal-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>группа</th>
            <th>пол</th>
            <th>вес</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Model.Id</td>
            <td>@Model.GroupId</td>
            <td>@Model.Sex</td>
            <td>@Model.Weight</td>
        </tr>
    </tbody>
</table>


При нажатии на кнопку не происходит обновления данных в
HTML5
1
2
3

<div id="details-block">
 
</div>
После создания страницы в итоге имеем такой HTML код
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Главная - My ASP.NET Application</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/site.css" rel="stylesheet"/>
 
    <script src="/Scripts/modernizr-2.6.2.js"></script>
 
    
</head>
<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"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Зоопарк</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
            </div>
        </div>
    </div>
 
    <div class="container body-content">
        
 
<h2>Зоопарк</h2>
<br />
 
 
 
<table class="animal-table">
 
    <caption>Животные:</caption>
    <thead>
    <tr>
        <th>Имя</th>
        <th>Возраст</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form0" method="post">                    <input name="animalId" type="hidden" value="11"/>
                    <input type="submit" value="Рогатая ящерица"/>
</form>            </td>
            <td>2</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form1" method="post">                    <input name="animalId" type="hidden" value="5"/>
                    <input type="submit" value="Австралийский клинохвостый орёл"/>
</form>            </td>
            <td>2</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form2" method="post">                    <input name="animalId" type="hidden" value="6"/>
                    <input type="submit" value="Молуккский орёл"/>
</form>            </td>
            <td>2</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form3" method="post">                    <input name="animalId" type="hidden" value="1"/>
                    <input type="submit" value="Волк"/>
</form>            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form4" method="post">                    <input name="animalId" type="hidden" value="2"/>
                    <input type="submit" value="Тигр"/>
</form>            </td>
            <td>4</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form5" method="post">                    <input name="animalId" type="hidden" value="3"/>
                    <input type="submit" value="Лев"/>
</form>            </td>
            <td>2</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form6" method="post">                    <input name="animalId" type="hidden" value="4"/>
                    <input type="submit" value="Росомаха"/>
</form>            </td>
            <td>2</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form7" method="post">                    <input name="animalId" type="hidden" value="7"/>
                    <input type="submit" value="Осёл"/>
</form>            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form8" method="post">                    <input name="animalId" type="hidden" value="8"/>
                    <input type="submit" value="Зебра"/>
</form>            </td>
            <td>4</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form9" method="post">                    <input name="animalId" type="hidden" value="9"/>
                    <input type="submit" value="Жираф"/>
</form>            </td>
            <td>2</td>
        </tr>
        <tr>
            <td>
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#details-block" data-ajax-url="/Main/AnimalDetails" id="form10" method="post">                    <input name="animalId" type="hidden" value="10"/>
                    <input type="submit" value="Лошадь"/>
</form>            </td>
            <td>2</td>
        </tr>
    </tbody>
</table>
<br/>
<div id="details-block">
 
</div>
 
 
        <hr />
        <footer>
            <p>&copy; 2015 - ASP.NET Application</p>
        </footer>
    </div>
 
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    
    
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
 
 
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Opera","requestId":"e25fb580a388471ab3f86c9fbca7bc0b"}
</script>
<script type="text/javascript" src="http://localhost:50281/8beae15335ac454099562e07ed1d1ed0/browserLink" async="async"></script>
<!-- End Browser Link -->
 
</body>
</html>
Миниатюры
Не обновляется частичное представление через Ajax   Не обновляется частичное представление через Ajax  
0
Лучшие ответы (1)
Сообщение: #7626147
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 14.05.2015, 23:50
Ответы с готовыми решениями:

Частичное представление
Приветствую! Имеется частичное представление c DropDownList , которое &quot;подтягивается&quot; на основное...

Net Core Razor Pages как вернуть частичное представление?
Пытаюсь тут разобраться. Есть Net Core Web Application, не MVC. Как на страницу вернуть частичное...

Не работает частичное представление в ajax запросе
VS 2010, ASP.NET MVC4, Template:Empty Здравствуйте, коллеги. Никак не могу добиться, чтобы...

Не загружать частичное представление повторно jquery ajax
В общем с помощью jqury ajax загружаю на страницу частичное представление. Допустим это действие...

3
Эксперт .NET
4432 / 2092 / 404
Регистрация: 27.03.2010
Сообщений: 5,657
Записей в блоге: 1
14.05.2015, 23:58  [ТС] 2
BundleConfig.cs
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    public class BundleConfig
    {
        // For more information on Bundling, visit [url]http://go.microsoft.com/fwlink/?LinkId=254725[/url]
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
 
            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));
 
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
 
            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at [url]http://modernizr.com[/url] to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
 
            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.css"));
 
            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
 
        }
    }
Добавлено через 1 минуту
Все данные из репозитория точно приходят. Метод в контроллере выполняется. Я тут как-то напутал с именем представления и в тот самый целевой div подгружалась цельная страница, то есть всё работало. Но как я поменял на имя частичного представления в методе контроллера стал возвращать PartialView, то всё перестало работать.
0
Эксперт .NET
4432 / 2092 / 404
Регистрация: 27.03.2010
Сообщений: 5,657
Записей в блоге: 1
17.05.2015, 10:38  [ТС] 3
Народ, вот создал отдельный проект, который демонстрирует проблему. Проект максимально простой, разбираться не придётся. Пускай немного в другом ключе, сейчас дополнительное представление обновляется, но в блок подгружается цельная страница, что явно беда. Как сделать так, чтобы подгружалось лишь частичное представление?

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

using System.Web.Mvc;
 
namespace AjaxUpdateDataInBlock.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View(Database.GetPersons());
        }
 
        [HttpPost]
        public ActionResult Details(int detailsId)
        {
            return View(Database.GetDetails(detailsId));
        }
    }
}
Views/Home/Index.cshtml
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

@using AjaxUpdateDataInBlock.Models
@model IEnumerable<Person>
 
@{
    ViewBag.Title = "Index";
}
 
// UpdateTargetId - элемент на странице, который будет обновляется после получения новых данных со стороны сервера.
@{
    AjaxOptions options = new AjaxOptions()
    {
        UpdateTargetId = "details-block",
        HttpMethod = "Post"
    };
}
 
<h2>Index</h2>
 
@foreach (Person person in Model)
{
    <p>@Ajax.ActionLink(@person.Name, "Details", "Home", new { detailsId = @person.DetailsId }, options)</p>
}
 
<div id="details-block">
</div>
 
@section scripts
    {
    @*Ненавязивый JavaScript для выполнения запроса на сервер без полного обновления страницы*@
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
Вложения
Тип файла: rar AjaxUpdateDataInBlock.rar (301.6 Кб, 9 просмотров)
0
Эксперт .NET
4432 / 2092 / 404
Регистрация: 27.03.2010
Сообщений: 5,657
Записей в блоге: 1
18.05.2015, 11:10  [ТС] 4
Лучший ответ Сообщение было отмечено Metall_Version как решение

Решение

Всё, разобрался. В частичном представлении просто должен быть div, как контейнер. А id должен быть на странице с вызовом @Ajax.ActionLink
HTML5
1
2
3
4
5

@model AjaxUpdateDataInBlock.Models.PersonDetails
 
<div id="details-block">
    <p>Возраст: @Model.Age</p>
</div>
Добавлено через 31 секунду
Разобрался читая это: http://metanit.com/sharp/mvc5/10.3.php
0
18.05.2015, 11:10
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 18.05.2015, 11:10
Помогаю со студенческими работами здесь

Ajax.ActionLink не принимает в div частичное представление от контроллера
Вот кусок представления: &lt;p&gt; @Ajax.ActionLink(&quot;Создать&quot;, &quot;Create&quot;, new AjaxOptions {...

Как после серии AJAX запросов вернуть полное представление, а не частичное
Здравствуйте. Я сочиняю своего рода опросник (тест) и столкнулся с проблемой. Суть проблемы...

Частичное представление
Добрый день. Разрабатываю весьма серьезный проект, с большой посещаемостью. Чтобы уменьшить...

Частичное представление и jquery
Представление List.cshtml отображает список товаров. Строки списка формируются частичным...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru