MVC Html.BeginForm и перезагрузка страницы

Question

Я имел обыкновение разрабатывать некоторые приложения на C#/Winforms, и теперь я пытаюсь изучить веб-разработку с помощью MVC.

Это много новых концепций (JS,Ajax,ASP.net и т. Д.), Поэтому, пожалуйста, будьте терпимы...

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

Например, я хочу вставить данные в базу данных через форму, просто вставить, и ничего больше.

Метод для вставки находится в контроллере.

Очевидный метод заключается в использовании Html помощника @Html.BeginForm, На этом этапе я не могу сделать это без перезагрузки всей страницы.

Из-за того, что я не нашел четкого ответа, не могли бы вы мне помочь.

1-это возможно с @Html.BeginForm ничего не делать после публикации формы для вставки в базу данных (возможно, с конкретным типом возврата действия в контроллере) или Ajax.BeginForm такое уникальное решение?

2-То же самое, чтобы обновить часть страницы, является ли AJAX уникальным решением?

Большое спасибо.

Answer 1

Я создал одну форму в ядре asp.net с почтовыми данными, используя ajax. Это работает. Создать частичное представление.

@model Department

<h2>Create</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<div class="form-horizontal">
    <form asp-action="Create" role="form" asp-controller="Department" asp-antiforgery="true"
          data-ajax-success="Bindgrid"
          data-ajax="true"
          data-ajax-method="POST">
        <div class="form-group">
            <label class="control-label" asp-for="DepartmentName"></label>
            <input class="form-control" type="text" asp-for="DepartmentName" />
            <span asp-validation-for="DepartmentName" class="text-danger"></span>
        </div>
        <input class="btn btn-primary" type="submit" value="Save" />
    </form>
</div>

Логика контроллера

[ValidateAntiForgeryToken()]
        [HttpPost]
        public JsonResult Create(Department department)
        {
            if (ModelState.IsValid)
            {
                Context.Department.Add(department);
                Context.SaveChanges();
            }
            return Json(department);
        }

Answer 2

Вы можете загрузить частичные виды в вид, используя Razor или Ajax. Я использую эту технику, когда одна и та же часть страницы может иметь разные представления - например, как элемент управления с вкладками

Вы составляете URL в обычном стиле для MVC. В этом примере я предполагаю, что выполняется HTTP GET для некоторых существующих данных. Для вашей опции CREATE GET достаточно только контроллера и действия. Обратите внимание, что HTML-код, возвращаемый из действия, заменяет содержимое DIV в другом месте на странице.

var targetUrl = "/MyController/MyAction/" + id + "?extraParameter=" + 123;

//-----------------------------------------
// get content from URL using Ajax
//-----------------------------------------
$.ajax({
         url: targetUrl,
         type: "get",
         success: function (result) {
         $("#divPageContent").html(result);
         }
});

Вы можете загрузить свой CREATE view из контроллера, как показано выше. Там вам понадобится кнопка SAVE, при нажатии на которую вы вызываете Ajax для отправки ваших значений обратно на сервер.

Вы должны использовать FORM по вашему мнению с AntiForgeryToken и использовать Ajax POST. Я не рекомендую использовать HTTP GET для добавления или изменения данных.

Есть много ресурсов, чтобы показать вам, как это сделать.

Предполагая, что ваш процесс CREATE работает, вы можете вернуть любое представление, которое вам нравится, чтобы показать результаты, обратно в тот же DIV, который использовался для создания.

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

Для моих сайтов я считаю, что большинство процессов работают нормально, не прибегая к Ajax. Современные браузеры хорошо справляются с изменением контента и мерцают. Я прибегаю к Ajax для частичного просмотра более сложных страниц. Если вы идете по маршруту Ajax, рассмотрите индикатор занятости - при работе Ajax всплывает значок по вашему выбору, чтобы ваши пользователи знали, что страница выполняет какую-то работу.

$(function () {
    $(document).ajaxStart(function () {
        $(".processSpinner").show();
    });

    $(document).ajaxStop(function () {
        $(".processSpinner").hide();
    });

    $(document).ajaxError(function () {
        $(".processSpinner").hide();
    });

    $(".processSpinner").hide();
});

включить антифоргегокен в ajax пост ASP.NET MVC

Answer 3

Есть много концепций, чтобы получить вашу голову вокруг. Давайте начнем с двух основных вариантов. Обновить дату с помощью простого поста назад или JavaScript и Ajax?

Хорошо, давайте перейдем к первому, простому процессу создания.

Вам понадобится таблица базы данных для обновления. Вы можете создать модель Entity Framework из базы данных. Ваше приложение будет взаимодействовать с этим обновлением таблицы. Это "М" или модель в MVC. Вам также нужно будет создать контроллер ("C" в MVC) и представление ("V" в MVC).

Контроллер часто содержит два метода для выполнения работы. Когда пользователь переходит на веб-страницу, он получает начальные данные. Все, что это делает, это возвращает представление с нулевой моделью, поэтому все элементы управления редактирования находятся в своем состоянии по умолчанию - например, пустое текстовое поле

[HttpGet]
public ActionResult Create()
{
    return View();
}

Когда представление сохраняется пользователем, вызывается другой метод (с тем же именем). Обратите внимание, что это метод POST, поэтому все данные в FORM упакованы в ModelState. MVC свяжет вашу модель для вас с параметрами метода - вы даже можете сказать, какие из них включить. Версия здесь использует Async.

В вашем представлении FORM также должен быть токен защиты от подделки, который является первым (скрытым) полем, возвращаемым и используемым системой MVC - вы обычно его не видите.

Предполагая, что данные действительны, они сохраняются в базе данных (у меня обычно есть базовая бизнес-модель для выполнения работы по поддержанию чистоты контроллера). Если модель недопустима (например, отсутствует поле), существующая модель передается обратно в представление для пользователя, чтобы сделать еще один ход, вместе с любыми сообщениями об ошибках. Посмотрите на аннотации данных, чтобы увидеть, как определить допустимые диапазоны значений.

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create([Bind(Include = "YourName")] MyData model)
        {
            if (ModelState.IsValid)
            {
                await _bs.MyData_UpdateAsync(model);
                    return RedirectToAction("Index");
            }

            // return with any errors
            return View(model);
        }

Наконец, вам потребуется представление, из которого HTML генерируется динамически и передается в браузер клиента.

@model MyApp.Models.MyData
@{
    ViewBag.Title = "Create Something";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container w-50">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.YourName, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.YourName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.YourName, "", new { @class = "text-danger" })
            </div>

            <div class="d-flex">
                <div class="ml-auto">
                    <input type="submit" value="Create" class="btn btn-primary btn-sm btn-default" />
                </div>
            </div>
        </div>
    }
</div>