С помощью Ajax.ActionLink получаем содержимое View (представления) и вставляем в div в ASP.NET MVC

Программирование, разработка, тестирование

→

ASP.NET MVC (web сайт на архитектуре Model-View-Controller)

→

С помощью Ajax.ActionLink получаем содержимое View (представления) и вставляем в div в ASP.NET MVC

Посмотрели 4880 раз(а)

С помощью Ajax.ActionLink получаем содержимое View (представления) и вставляем в div в ASP.NET MVC

последнее обновление: 11 декабря 2019

Получим содержимое View с помощью Ajax.ActionLink и вставляем в div

Html

План (5 шагов)

Шаг 1.

Создаем новое ASP.NET MVC приложение и подключаем jQuery & AJAX

Шаг 2.

В контролер добавим метод Show

Шаг 3.

Создаем новое представление Show.cshtml

Шаг 4.

С помощью Ajax.ActionLink получаем содержимое представления Show.cshtml и вставим в div

Шаг 5.

Запускаем ASP.NET MVC приложение

Шаг 1. Создаем новое ASP.NET MVC приложение и подключаем jQuery & AJAX

Создаем новое ASP.NET MVC приложение и подключаем jQuery & AJAX...

Шаг 2. В контролер добавим метод Show

C# Добавим метод Show в файл Controllers\HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
     public class HomeController : Controller
     {
          // GET: Home
          public ActionResult Index()
          {
               return View();
          }

          // GET: Show
          public ActionResult Show()
          {
               return View();
          }
     }
}

Шаг 3. Создаем новое представление Show.cshtml

Нажимаем правой клавишей мыши по методу Show в файле HomeController.cs

Нажимаем на Add View...

Напишем код

cshtml Файл Views/Home/Show.cshtml

@{
     Layout = null;
}

<!DOCTYPE html>

<html>

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

<body>
     <div>
          Show page
     </div>
</body>

</html>

Шаг 4. С помощью Ajax.ActionLink получаем содержимое представления Show.cshtml и вставим в div

cshtml Напишем код в файле Views/Home/Index.cshtml

@{
     Layout = null;
}

<!DOCTYPE html>

<html>
<head>
     <meta name="viewport" content="width=device-width" />
     <title>Index</title>
</head>
<body>
     <div>
          Hello!

          <br />

          <div id='my_content'></div>

          
          <script src="@Url.Content("~/Scripts/jquery-3.3.1.min.js")"></script>
          <script src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>

          
          @Ajax.ActionLink("Нажать сюда", "Show", new AjaxOptions { UpdateTargetId = "my_content" })
          

     </div>
</body>
</html>

Объект Ajax (это класс AjaxExtensions) в ASP.NET МVС...

Шаг 5. Запускаем ASP.NET MVC приложение

Нажимаем вверху на зеленый треугольник

В браузере увидим, что представление Index.cshtml показывает свой текст
Hello!
а когда мы нажмем на ссылку Нажать сюда показывает текст
Show page
из представления Show.cshtml