Как отправить данные из ViewModel в метод контроллера?

Question

Я пытаюсь отправить данные из функции JavaScript в метод контроллера.Он работает нормально, когда у меня простая модель, но не работает, когда я пытаюсь опубликовать данные при работе с ViewModel, которая содержит несколько объектов.По-другому, у меня есть страница входа в систему, и я отправляю данные в метод входа в систему следующим образом:

Просмотр:

     <input type="text" name="username" >   
     <input type="password" name="password">
     <button type="submit" id="postIt">Log in</button>

JavaScript:

$("#postIt").click(function() {
    postIt();
});

function postIt() {
    var usr = $("#username").val();
    var pwd = $("#password").val();
    $.ajax({
        type: "POST",
        url: "Home/Login",
        data: {
            "Username": usr,
            "Password": pwd
        },
        success: function(data) {
            if (data.result) {
                alert(data.message);
            } else {
                // unauthorized
                alert(data.message);
            }
        }
    });
}

и вот мой контроллер

[HttpPost]
public JsonResult Login(LoginModel data)
{  
    //some code
}

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

[HttpPost]
public JsonResult Login(ViewModel data)
{  
    //some code
}

И моя ViewModel содержит

public class myViewModel
{
    public LoginModel LoginModal { get; set; }
    public List<Users> UsersV { get; set; }
    public List<Images> ImagesV { get; set; }
    public List<Videos> VideosV { get; set; }
    public List<Notes> NotesV { get; set; }
    ///...
}

Я обнаружил, что данные нулевые, но это было не так, когда я использовал LoginModel, так есть ли способ заставить этот код работать?

Answer 1

При публикации данных в MVC вам необходимо сопоставить свои свойства с публикуемыми параметрами.

В вашем JavaScript вы публикуете объект, который выглядит следующим образом:

{    
    "Username": usr,
    "Password": pwd
}

Но ваша модель представления ожидает что-то вроде:

{
    "LoginModal": {
        "Username": usr,
        "Password": pwd
    }
}

Один из способов исправить это - изменить javascript:

function postIt() {
    var usr = $("#username").val();
    var pwd = $("#password").val();
    $.ajax({
        type: "POST",
        url: "Home/Login",
        data: {
            "LoginModal": {
                "Username": usr,
                "Password": pwd
            }
        },
        success: function(data) {
            if (data.result) {
                alert(data.message);
            } else {
                // unauthorized
                alert(data.message);
            }
        }
    });
}

Однако я бы не рекомендовал это. Вы пытаетесь сделать слишком много с моделью представления и должны разбить их на отдельные ViewModels и Views

Answer 2

UPD

0), пожалуйста, исправьте свое имя в ViewModel (LoginModAl => LoginModEl)

1), поставьте

public JsonResult Login([FromBody]ViewModel data)

пожалуйста, отметьте это привязка

2) вам нужно добавить идентификатор, потому что вы получили неопределенные поля, например:

<input type="text" name="username" id="username" >   
<input type="password" name="password" id="password">

3) затем вам нужно добавить contentType и Json.stringify:

$.ajax({
        type: "POST",
        url: "Home/Login",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            "loginModel":{
                "Username": usr,
                "Password": pwd
            }

        }),

Я создаю новое приложение, и оно выглядит отлично: данные клиента:

и dto в контроллере:

Я надеюсь, что в этот раз это будет полезно