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

Question

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

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

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

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

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

Очевидный метод заключается в использовании Html helper @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 из контроллера, как показано выше.Там вам понадобится кнопка SAVE, при щелчке она вызывает Ajax для отправки ваших значений обратно на сервер.

Вы должны использовать ФОРМУ в вашем представлении с 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();
});

includeantiforgerytoken в посте 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.

ФОРМА в вашем представлении должна иметь также токен подделки, который является первым (скрытым) полем, возвращаемым и используемым системой 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>