如何将数据从ViewModel发布到控制器方法中? [英] How to post data from ViewModel into a controller method?

问题描述

我正在尝试将JavaScript函数中的数据发布到控制器方法中.当我有一个简单的模型时，它工作正常，但是当我使用包含多个对象的ViewModel尝试发布数据时，它就不工作. 换句话说，我有一个登录页面，并从我的视图中将数据发布到这样的登录方法中

I'm trying to post data from a JavaScript function into a controller method. It's working fine when I have a simple model, but it's not working when I try to post data when working with a ViewModel that contains multiple objects. In another way, I have a login page, and I'm posting the data to the login method like this from my view

查看:

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

JavaScript:

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时

When I work with a simple model like LoginModel that contains username and password, everything works just fine. But in my case I'm working with a ViewModel that contains loads of tables and lists, and when I tried to pass ViewModel in the controller like this

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

我的ViewModel包含

And my ViewModel contains

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时，所以有什么办法可以使这段代码起作用?

I found out that the data is null, but it wasn't when I was using the LoginModel, so is there any way to make this code work?

推荐答案

UPD

0)，请在ViewModel(LoginModAl => LoginModEl)中更正您的命名

0) please, fix your naming in ViewModel (LoginModAl => LoginModEl)

1)放上这个

public JsonResult Login([FromBody]ViewModel data)

请选中此 2)您需要添加id，因为您有未定义的字段，如下所示:

2) you need to add id, because you got undefined fields, like this:

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

3)然后，您需要添加contentType和Json.stringify:

3) then, you need add contentType and Json.stringify:

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

        }),

我创建了一个新应用，它看起来不错: 客户资料:

I create new app and its looks fine: client data:

和dto:

我希望这次会有所帮助

这篇关于如何将数据从ViewModel发布到控制器方法中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！