Как получить входные данные из MVC ViewModel в ajax сообщение - PullRequest
Новая
       34

Как получить входные данные из MVC ViewModel в ajax сообщение

1 голос
/ 14 марта 2020

Я получаю данные из таблицы базы данных SQL в представление ASP. NET MVC, но у меня возникают проблемы с получением измененных входных данных в сообщение Ajax, например: 

@model MyViewModel
    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Id, "Id:", new {})
        </div>
        <div class="col-4">
            @Html.Label(Model.Id.ToString(), new { title = "" })
        </div>
    </div>

    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Test, "Test:", new { })
        </div>
        <div class="col-9">
            @Html.TextBoxFor(model => model.Test, new { data_bind = "value: Test", @type = "text" })
        </div>
    </div>

    @section scripts {
        <script type="text/javascript">
                $("#save-click").click(function () {
                    var nr = @Model.Id;
                    var postData = @Html.Raw(Json.Encode(@Model));
                    //alert(postData.Test);

                    $.ajax({
                        type: "POST",
                        url: actions.test.createOrUpdate + "?id=" + nr,
                        dataType: "json",
                        traditional: true,
                        data: postData,
                        success: function (response) {
                            if (response.Code == 0) {
                                    else {
                                        window.location.reload(false);
                                    }
                            } else {
                                alert('err');
                            }
                        }
                    });
                });
            });
        </script>
    }

Когда я загружаю вид, все отображается правильно. Действие контроллера запускается правильно, и Id (который не может быть изменен) также передается должным образом. Однако при изменении полей ввода в контроллер передаются не измененные значения, а исходные значения, которые были извлечены в представление.

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

Любая помощь будет оценена.

1 Ответ

1 голос
/ 14 марта 2020 
var postData = @Html.Raw(Json.Encode(@Model));

Эта строка является виновником. Когда Razor рендерит скрипт, он назначит исходную / неизмененную модель вашей переменной postData.

Если вы используете "Inspect Element" или инструменты разработчика для проверки значения postData, вы увидите что значения не изменятся, потому что они статически назначены.

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

var postData = $("form").serialize();

И обязательно оберните поля ввода внутри тега формы. Смотрите код ниже: 

<form>
   <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Id, "Id:", new {})
        </div>
        <div class="col-4">
            @Html.Label(Model.Id.ToString(), new { title = "" })
        </div>
    </div>

    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Test, "Test:", new { })
        </div>
        <div class="col-9">
            @Html.TextBoxFor(model => model.Test, new { data_bind = "value: Test", @type = "text" })
        </div>
    </div>
</form>

@section scripts {
     <script type="text/javascript">
             $("#save-click").click(function () {
                 var nr = @Model.Id;

                 // use form.serialize or use the id/class of your form
                 var postData = $("form").serialize();

                 $.ajax({
                     type: "POST",
                     url: actions.test.createOrUpdate + "?id=" + nr,
                     dataType: "json",
                     traditional: true,
                     data: postData,
                     success: function (response) {
                         if (response.Code == 0) {
                                 else {
                                     window.location.reload(false);
                                 }
                         } else {
                             alert('err');
                         }
                     }
                 });
             });
         });
     </script>
}
...