Как отправить модель обратно на контроллер ASP. NET, используя jQuery в представлении ASP. NET Razor

Question

У меня есть вид Razor, который принимает данные. Я использую форму, но я не использую метод записи, так как хочу сначала сообщить пользователю о сохранении. Таким образом, у меня есть кнопка сохранения для запуска функции jQuery, с помощью которой я затем запускаю метод сохранения контроллера. В других приложениях у меня был бы метод Post save, определенный в Html .BeginForm (), который запускает соответствующий метод контроллера. Но так как я хотел сначала запустить модал, я хочу сам запустить этот метод.

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

Я получаю «модель не определена» в консоли. Тем не менее, я могу очень хорошо ссылаться на модель в любом из html помощников в представлении.

Как получить ссылку на эту модель на этом уровне - в jQuery?

Кажется, это видно:

$.post("UserProfile/ProcessSaveUserProfile", { userProfileForMaintVM: Model });

Представление Razor (упрощенное):

  @model GbngWebClient.Models.UserProfileForMaintVM

  @using (Html.BeginForm())
  {
    @Html.ValidationSummary(true, "Please fix the following errors.")
        <div class="row">
            <div class="col-md-3">
                @Html.LabelFor(model => model.UserProfileSingleVM.Email)
                @Html.TextBoxFor(model => model.UserProfileSingleVM.Email, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserProfileSingleVM.Email, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-3">
                @Html.LabelFor(model => model.UserProfileSingleVM.WantEmailNotificationsSwitch)
                @Html.CheckBoxFor(model => model.UserProfileSingleVM.WantEmailNotificationsSwitch, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserProfileSingleVM.WantEmailNotificationsSwitch, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-3">
                @Html.LabelFor(model => model.UserProfileSingleVM.City)
                @Html.TextBoxFor(model => model.UserProfileSingleVM.City, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserProfileSingleVM.City, "", new { @class = "text-danger" })
            </div>
        </div>
     </div>
  }

  @Html.AntiForgeryToken()

  <div class="panel-body">
     <div class="row">
         <div class="col-md-3">
          <a href='#' type="submit" class='btn btn-primary' 
  onclick=ConfirmSaveProfile();>Save</a>
         </div>
     </div>
 </div>

  function ConfirmSaveProfile() {
  $(`<div class="modal fade" id="myModal6" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-body" style="padding:10px;">
               <h4 class="text-center">Are you sure you want to save your changes ?</h4>
               <div class="text-center">
                   <a class="btn btn-info btn-yes6">Yes</a>
                   <a class="btn btn-default btn-no6">No</a>
                </div>
             </div>
         </div>
       </div>
    </div>`).appendTo('body');

     $("#myModal6").modal({
        backdrop: 'static',
        keyboard: false
    });

    $(".btn-yes6").click(function () {
        $("#myModal6").modal("hide");

        // Don't want a callback.
        $.post("UserProfile/ProcessSaveUserProfile", { userProfileForMaintVM: Model });
    });

    $(".btn-no6").click(function () {
        $("#myModal6").modal("hide");
    });

    $("#myModal6").on('hidden.bs.modal', function () {
        $("#myModal6").remove();
    });
}

Метод контроллера ( упрощенно):

  [HttpPost]
  [ValidateAntiForgeryToken]
  public async Task<ActionResult> ProcessSaveUserProfile(UserProfileForMaintVM userProfileForMaintVM)
    {
       Code to call the web api...           
    }

Answer 1

Вам необходимо создать модель, в которой эти свойства будут связаны при выполнении ajax POST.

1. Но сначала я считаю, что вам нужно ввести поле ID / первичный ключ в форму .

@using (Html.BeginForm())
  {
    // replace this with your primary key field
    @Html.HiddenFor(model=>model.Id)

    @Html.ValidationSummary(true, "Please fix the following errors.")
        <div class="row">
            <div class="col-md-3">
                @Html.LabelFor(model => model.UserProfileSingleVM.Email)
                @Html.TextBoxFor(model => model.UserProfileSingleVM.Email, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserProfileSingleVM.Email, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-3">
                @Html.LabelFor(model => model.UserProfileSingleVM.WantEmailNotificationsSwitch)
                @Html.CheckBoxFor(model => model.UserProfileSingleVM.WantEmailNotificationsSwitch, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserProfileSingleVM.WantEmailNotificationsSwitch, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-3">
                @Html.LabelFor(model => model.UserProfileSingleVM.City)
                @Html.TextBoxFor(model => model.UserProfileSingleVM.City, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserProfileSingleVM.City, "", new { @class = "text-danger" })
            </div>
        </div>
     </div>
  }

Создайте модель, к которой будут привязаны эти свойства;

public class ReceiveModel{
   // replace this with data type and name of your primary key field
   public int Id {get;set;}

   // replace data type if incorrect
   public string Email {get;set;}
   public bool WantEmailNotificationsSwitch {get;set;}
   public string City {get;set;}
}

Используйте это при нажатии кнопки, не забудьте изменить идентификаторы полей ввода в скрипте;

$(".btn-yes6").click(function () {
   // replace the selectors below with the id attribute of your input fields
   // replace Id with your primary key field

   var data = {
      Id: $("#Model.Id").val(),
      Email: $("#Model.UserProfileSingleVM.Email").val(),
      WantEmailNotificationsSwitch: $("#Model.UserProfileSingleVM.WantEmailNotificationsSwitch").val(),
      City: $("#Model.UserProfileSingleVM.City").val()
   };

   $.ajax({
      url: 'UserProfile/ProcessSaveUserProfile',
      type: 'POST',
      data: data,
      contentType: 'application/json; charset=utf-8',
      success: function (data) {
         // ...
      },
      error: function () {
         alert("error");
      }
   });
});

Затем в действии вашего контроллера используйте ReceiveModel в качестве параметра.

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ProcessSaveUserProfile(ReceiveModel model)
{
   // replace with id property
   UserProfileForMaintVM uvm = db.UserProfileForMaintVM.FirstOrDefault(m=>m.Id==model.Id);

   // assign new properties
   uvm.UserProfileSingleVM.Email = model.Email;
   uvm.UserProfileSingleVM.WantEmailNotificationsSwitch = model.WantEmailNotificationsSwitch;
   uvm.UserProfileSingleVM.City = model.City;

   // call your web api then pass uvm 
   db.SaveChanges();          
}