asp.net mvc 4 數據未綁定

Question

我目前正在研究一個用例，用戶使用他的網絡攝像頭拍攝快照，然后將快照與在 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>

Answer 1

您沒有將任何ID /名稱分配給'<input type="hidden" value="' + data_uri + '">'因此，綁定器不知道如何將其綁定到模型及其屬性。 它應該具有您的C＃模型類使用的相同名稱/ ID

Answer 2

對於也在搜索的任何其他人，請確保您沒有兩個或多個具有相同名稱的輸入，或者您已添加相同的輸入（使用 @HtmlHelper）兩次，這會混淆活頁夾。