dir.by  
  Поиск  
Компьютер, программы
→
ASP.NET MVC (web сайт на архитектуре Model-View-Controller)
 С помощью JQuery получаем содержимое View (представления) в ASP.NET MVC 
посмотрели 10621 раз
обновлено: 11 декабря 2019
Получим содержимое View с помощью jQuery:

  Html  
<script>
// Home это контроллер
// Index это метод
$.get("/Home/Index", function (data)
{
...
})
</script>


План (5 шагов)
Шаг 1. Создаем новое ASP.NET MVC приложение и подключаем jQuery
Шаг 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...
Напишем код
  Файл 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. Загрузка представления Show.cshtml с помощью ajax
Напишем код
  Файл Views/Home/Index.cshtml
@{
     Layout = null;
}

<!DOCTYPE html>

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

<body>

     <!-- подключаем JQuery библиотеку -->
     <script src="@Url.Content("~/Scripts/jquery-3.3.1.min.js")"></script>

     Hello!

     <!-- сюда будем вставлять -->
     <div id='mydiv1' style='border:1px solid gray;'></div>

     <script>
          // ждем когда загрузится документ
          $(document).ready(function ()
          {
               // получаем содержимое View по пути контроллера "/Home/Show"
               $.get("/Home/Show", function (data)
               {
                    // в элемент с id=mydiv1 всталяем содержимое
                    $("#mydiv1").html(data);

               }).fail(function (data) // обработка ошибки
               {
                    alert('not loaded');
               });
          });
     </script>
</body>

</html>
Шаг 5. Запускаем ASP.NET MVC приложение
Нажимаем вверху на зеленый треугольник
В браузере увидим, что представление Index.cshtml показывает свой текст
Hello!
и показывает текст из представления Show.cshtml
Show page
 
← Предыдущая тема
Подключаем JQuery в ASP.NET MVC проект
 
Следующая тема →
Подключаем jQuery & AJAX в ASP.NET MVC проект
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Объявления  
  Объявления  
 
• Что такое MVC в ASP.NET ?
• Создаем новое приложение ASP.NET MVC
Контроллер (Controller)
• Передаем данные из контроллера в представление в ASP.NET MVC. Используем ViewBag, ViewData, TempData, Model (строго типизированное представление)
Представление (View)
• Что такое View (представление) и операторы Razor в ASP.NET MVC
• Создаем переменную и выводим на экран во View в ASP.NET MVC
• @using внутри View в ASP.NET MVC
• @foreach(var item in arr) {...} внутри View в ASP.NET MVC
• @DateTime.Now внутри View в ASP.NET MVC
• Как узнать имя контроллера внутри View в ASP.NET MVC
• Отображаем [DateTime | только Date | только Time] в нужном формате в ASP.NET MVC
Разновидности представлений (View)
• Строго типизированное представление (Strongly-typed-view) в ASP.NET MVC
...
• Мастер представление (Master View) с использованием @RenderBody() в ASP.NET MVC
• Мастер представление (Master View) с использованием @RenderBody() и дополнительных секций @RenderSection в ASP.NET MVC
...
• Частичное представление (Partial View) в ASP.NET MVC. Встраиваем частичное представление @Html.Partial("My1") и @{ Html.RenderPartial("My1");}
• При нажатии submit внутри partial view происходит ajax вызов метода controller. Метод controller должен возвращать PartialView(model) | ASP.NET MVC
...
• Строго типизированное частичное представление (Strongly-typed partial view) в ASP.NET MVC
Создаем папку ViewModels. Это хороший стиль программирования для передачи данных из Controller во View
• Создаем папку ViewModels. Создаем свой класс в папке ViewModels. Это хороший стиль программирования для передачи данных из Controller во View. Web приложение ASP.NET MVC
Атрибуты. Используем атрибуты во ViewModels(чтобы показать кнопки, combo в представлении). Используем атрибуты в Controller (чтобы улучшить методы)
• Аттрибут [Display(Name = "...")] описывается в C# классе и используется в @Html.LabelFor, @Html.DisplayNameFor в ASP.NET MVC
• Аттрибут [Required(ErrorMessage = "Пожалуйста, введите название")] описывается для свойства в C# классе и требует чтобы свойство было заполнено, если не заполнено на экране ошибка ErrorMessage в ASP.NET MVC
• Аттрибут [Remote("IsValidAuthor", "Home", ErrorMessage = "Enter correct author of book")] описывается для свойства в C# классе и проверяет это свойство на правильность на сервере через метод IsValidAuthor в conroller Home, если метод возвращает false, то на экране будет ошибка ErrorMessage в ASP.NET MVC
• Аттрибут [HiddenInput(DisplayValue = false)] описывается в C# классе и используется в @Html.HiddenFor в ASP.NET MVC
Маршрутизация
Ссылки и перенаправления в представлении
• @Html.ActionLink внутри View в ASP.NET MVC
• @Html.RouteLink внутри View в ASP.NET MVC
• @Url.Action внутри View в ASP.NET MVC
• @Url.RouteUrl внутри View в ASP.NET MVC
• @Url.Content внутри View в ASP.NET MVC
Bootstrap в MVC
• Добавляем и подключаем Bootstrap (css, js файлы) в ASP.NET MVC проект
JQuery в МVС
• Подключаем JQuery в ASP.NET MVC проект
• С помощью JQuery получаем содержимое View (представления) в ASP.NET MVC. Пример: $.get("/Home/Index", function (data) {...}) ...
Класс AjaxExtensions в МVС (асинхронное получение данных)
• Подключаем jQuery & AJAX в ASP.NET MVC проект
• С помощью Ajax.ActionLink получаем содержимое View (представления) и вставляем в div в ASP.NET MVC
• Объект Ajax (это класс AjaxExtensions) в ASP.NET МVС
База данных (Entity Framework) в ASP.NET MVC
• Entity Framework в приложении ASP.NET MVC. Используем Code First (пишем c# код, а таблицы в базе данных создаются сами)
Аутентификация (login/register/logout)
• Что такое аутентификация (login/register/logout) в ASP.NET MVC ?
• Пример: Аутентификация (login/register/logout) в ASP.NET MVC используя аутентификацию форм FormsAuthentication.SetAuthCookie(model.Name, true);
Авторизация (admin/user/...)
• Что такое авторизация (admin/user/...) в ASP.NET MVC ?
• Пример: Авторизация (admin/user/...) в ASP.NET MVC используя провайдер ролей RoleProvider
Пишем приложение "Планирование дел, задач" в ASP.NET MVC
• Создаем пустое приложение "Планирование дел, задач" | ASP.NET MVC | Visual Studio 2017
• Добавляем библиотеки Bootstrap & jQuery в приложение "Планирование дел, задач" | ASP.NET MVC | Visual Studio 2017
• Создаем мастер-представление (главное меню & логин кнопки используя Bootstrap) в приложении "Планирование дел, задач" | ASP.NET MVC | Visual Studio 2017
• Добавляем контроллер "Home" и представление "Index" (главная страница в приложении "Планирование дел, задач" | ASP.NET MVC | Visual Studio 2017
• Добавляем библиотеку Entity Framework и создаем соединиение с Базой данных в приложении "Планирование дел, задач" | ASP.NET MVC | Visual Studio 2017
• Аутентификация (login/register/logout) в приложении "Планирование дел, задач" | ASP.NET MVC | Visual Studio 2017
• Добавляем класс "Task" для сохранения дел, задач в базу данных в приложении "Планирование дел, задач" | ASP.NET MVC | Visual Studio 2017
• Добавление nUnit в приложении "Планирование дел, задач" | ASP.NET MVC | Visual Studio 2017
Дополнительные темы, вопросы
• Чем ASP.NET MVC лучше ASP.NET Web Forms ?
• Выбор между ASP.NET Core и ASP.NET ?
• Как выбрать интернет браузер чтобы в нем запускался .NET проект
• Как узнать локальный адрес и порт вашего ASP.NET MVC приложения ?
• Scriptsindex.d.ts(8,1): error TS1008: Build:Unexpected token; "module, class, interface, enum, import or statement" expected. Scriptsindex.d.ts(8,13): error TS1005: Build:";" expected. в Visual Studio 2017 в приложении ASP.NET MVC
• Error "unable to connect to web server "iis express" | ASP.NET MVC | Visual Studio 2017
• Error "This site can"t be reached" when run ASP.NET application | Solution: Recreate the Self-Signed HTTPS Certificate for localhost in IIS Express
WWW сайты для изучения ASP.NET MVC
• Cайты для изучения ASP.NET MVC

  Ваши вопросы присылайте по почте: info@dir.by