Получите значения формы, чтобы избежать перезагрузки страницы при отправке формы MVC - PullRequest
0 голосов
/ 19 февраля 2020

У меня есть ASP. NET форма бритвы, которая выглядит примерно так:

@using (Html.BeginForm("CreateUser", "Users", FormMethod.Post, new { role = "form", id="create-user-form" }))
{

@Html.LabelFor(model => model.LastName)
                            @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })

}

Then in my controller:

public ActionResult CreateUser(UserViewModel viewModel)
{



}

Используя jQuery, могу ли я получить переменные в форме и отправить ее в мой контроллер такой, что страница не перезагружается при отправке формы?

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

Ответы [ 2 ]

0 голосов
/ 19 февраля 2020

Вы можете сделать это с помощью функции Ajax. Если вы сделаете это, вы можете полностью удалить блок @using.

Сначала добавьте кнопку в свой вид и присвойте ей идентификатор. также дайте вашему полю ввода идентификатор.

@Html.LabelFor(model => model.LastName)
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control", @id = "lastName" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
<button type="button" class="btn btn-success" id="createButton">Add user</button>

Затем добавьте скрипт внизу вашего кода. Далее предполагается, что у вас есть этот код в вашем файле _Layout.cs html: @RenderSection("scripts", required: false) Если нет, не оборачивайте теги сценария в этот бит кода: @section Scripts {}

@section Scripts {
<script>
        // listen for button click event
        $('#createButton').click(function (e) {
            e.preventDefault();

            let lastName = $('#lastName').val();

            // Check for empty input -> exit if empty
            if ($.trim(lastName) == "") {
                return;
            }

            let data = JSON.stringify({
                lastName: lastName
            });

            // call saveUser ajax function, pass in data
            $.when(saveUser(data)).then(function (response) {
                alert(response);
            }).fail(function (err) {
                console.log(err);
            });
        });

        // Pass all data to Controller for saving
        function saveUser(data) {
            return $.ajax({
                url: '/Users/CreateUser',
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                processData: false,
                cache: false,
                data: data,
                success: function (result) {
                    console.log(result);
                },
                error: function () {
                    alert('Error! Please contact an administrator if the problem persists.')
                }
            });
        }
    </script>
}

Наконец, настройте действие своего контроллера примерно так:

[HttpPost]
public JsonResult CreateUser(string lastName)
{
    // prepare a return statement
    string result = "Error! Please contact an administrator if the problem persists.";

    // perform your create logic here, then check if it succeeded or not


    if (createSucceeded == true)
    {
        // change result string to a success message
        result = "Success! User created!";
    }

    // Return the result string
    return Json(result, JsonRequestBehavior.AllowGet);
}
0 голосов
/ 19 февраля 2020

Вы можете настроить AJAX вызов в jQuery, или вы можете использовать jQuery Ненавязчивый Ajax пакет Nuget (я более знаком с настройкой этого).

Использование В этом пакете вы можете воспользоваться атрибутом помощника submitform Ajax.

Основная цель этого - создать один раздел div (инкапсулированный в элементе формы AJAX), содержащий поля ввода, которые являются Отправлено. Затем, при отправке, он вызывает результат частичного просмотра (который требует возврата PartialView ();) и отображает его в исходном родительском представлении, без перезагрузки страницы.

Вот пример настройки:

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
    @{using (Ajax.BeginForm("PartialViewResultName", "ControllerName", null, new AjaxOptions
      {
          HttpMethod = "GET",
          UpdateTargetId = "targetDivID",
          InsertionMode = InsertionMode.Replace,
          LoadingElementId = "targetDivLoadingID"
      }, new
      {
          id = "formID"
      }))
      {
          // Where your Html code that will be submitted goes
          <button type="submit">submit</button>
      }}
    </div>
    <div class="col-md-4"></div>
</div>
<div class="row">
    <div class="col-md-12">
        <div id="targetDivID"></div>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...