asp.net mvc 4 数据未绑定

asp.net mvc 4 data not binding

我目前正在处理一个用例,其中用户使用他的网络摄像头拍摄快照,然后显示快照以及在 javascript 中生成的包含一个隐藏字段(base64 代码为快照)和一个提交按钮。

问题是,确实调用了操​​作,但模型是空的...我已经被锁定了好几个小时...

数据模型:

namespace backend_OCR.Models
{
    public class SnapshotModels
    {
        public string data_uri { get; set; }
    }
}

控制器:

    public ActionResult Capture()
    {
        ViewBag.uri = "URI_test";
        return View();
    }

    [HttpPost]
    public ActionResult Capture(SnapshotModels snapshot)
    {

        ViewBag.uri = snapshot.data_uri;

        return View();
    }

查看:

@model backend_OCR.Models.SnapshotModels
@{
ViewBag.Title = "Capture";
}
<script type="text/javascript" src="~/Content/js/webcamjs.js"></script>

<div class="content-wrapper">
    <div class="col-md-6">
        <div class="panel panel-default">
        <div class="panel-heading">Camera</div>
        <div class="panel-body">
            <div class="container" id="my_camera"></div>
            <!-- A form for taking snaps and processing them-->
            <form style="text-align: center; margin-top: 10px;">
                <input style="text-align: center;" type="button" class="btn btn-success" value="Prendre capture" onclick="take_snapshot()">
            </form>

        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading">Snapshot</div>
        <h2>@ViewBag.uri</h2>
        <div class="panel-body">
            @using (Html.BeginForm("Capture", "Camera", FormMethod.Post))
            {
            <div id="results" style="text-align: center;">
                L'image capturée apparaitra ici...
            </div>
            }
        </div>
        <br />
    </div>
</div>

Javascript :

<script language="JavaScript">
Webcam.set({
    width: 400,
    height: 300,
    image_format: 'jpeg',
    jpeg_quality: 100
});
Webcam.attach('#my_camera');
</script>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
    // take snapshot and get image data
    Webcam.snap(function (data_uri) {
        // display results in page
        document.getElementById('results').innerHTML =
            '<div><img id="my_snap" src="' + data_uri + '"/></div>'
            + '<input type="hidden" value="' + data_uri + '">'
            + '<input id="save" class="btn btn-success" value="Crop and  send" type="submit"/>';
</script>

您没有为您的 '<input type="hidden" value="' + data_uri + '">' 分配任何 ID/Name 所以活页夹不知道如何将它绑定到您的模型及其 属性。它应该具有相同的 name/id 你的 c# 模型 class 使用

对于任何其他也在搜索的人,请确保您没有两个或更多同名输入,或者您已添加相同的输入(使用@HtmlHelper)两次,这会混淆活页夹。