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

UPD

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

1）放上这个

public JsonResult Login([FromBody]ViewModel data)

请选中此binding

2）您需要添加id，因为您有未定义的字段，如下所示：

<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：

我希望这次会有所帮助

Answer 2

将数据发布到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

如何将数据从ViewModel发布到控制器方法中？

2 个答案: