代码之家  ›  专栏  ›  技术社区  ›  Rabadash8820

ASP.NET核心MVC模型绑定错误?

  •  0
  • Rabadash8820  · 技术社区  · 6 年前

    model binding . 基本上,我只是尝试将一些已发布的json绑定到具有嵌套属性的对象模型。下面提供了一个按钮的最小代码,当按下该按钮时,它将通过XMLHttpRequest发送到控制器操作方法。action方法使用一个模型类参数 [FromBody] 属性。

    型号:

    public class OuterModel {
        public string OuterString { get; set; }
        public int OuterInt { get; set; }
        public InnerModel Inner { get; set; }
    }
    
    public class InnerModel {
        public string InnerString { get; set; }
        public int InnerInt { get; set; }
    }
    

    using Microsoft.AspNetCore.Mvc;
    
    public class HomeController : Controller {
    
        [HttpPost("models/")]
        public IActionResult Save([FromBody] OuterModel viewModel) {
            if (!ModelState.IsValid)
                return BadRequest(ModelState);
    
            // Return an appropriate response
            return Ok();
        }
    }
    

    “提交”按钮的Razor标记:

    <div class="form-row">
        <div class="col-2">
            @{ string url = Url.Action(nameof(HomeController.Save), "Home"); }
            <button id="post-btn" data-post-url="@url">POST</button>
        </div>
    </div>
    

    要提交的JavaScript(不绑定):

    document.getElementById("post-btn").addEventListener("click", e => {
            const xhr = new XMLHttpRequest();
            xhr.addEventListener("timeout", () => console.error("Timeout"));
            xhr.addEventListener("error", () => console.error("Error"));
            xhr.addEventListener("load", () => console.log(`Status: ${xhr.status} ${xhr.statusText}`));
            xhr.open("POST", e.target.dataset.postUrl);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.send(JSON.stringify({
                "OuterString": "outer",
                "OuterInt": 1,
                "Inner.InnerString": "inner",
                "Inner.InnerInt": 5
            }));
        });
    

    看看那个JavaScript,我希望 Inner.* docs :

    模型绑定查找模式 参数名。属性名 将值绑定到属性。如果找不到此表单的匹配值,它将尝试仅使用属性名绑定。

    OuterModel.Inner action方法中的属性结束 null . 下面的json 但是,请正确绑定:

    xhr.send(JSON.stringify({
        "OuterString": "outer",
        "OuterInt": 1,
        "Inner": {
            "InnerString": "inner",
            "InnerInt": 5
        }
    }));
    

    所以我可以使用这段代码来实现我需要的模型绑定,我只是不明白为什么第一个JavaScript 没有 工作。我没有对嵌套属性使用正确的命名约定吗?如果你能澄清一下,我将不胜感激!

    0 回复  |  直到 6 年前