如何在MVC控制器中调用Javascript变量

How to call Javascript Variable in MVC Controller?

本文关键字：调用 Javascript 变量 控制器 MVC      更新时间：2023-09-26

这是我当前的代码。当我点击按钮时，控制器中的imageData没有收到任何东西。但是，当我在javascript中使用document.write(images);并删除$("#btnSave")以显示是否有一个值，它显示iVBORw0KGgoAAAANSUhE....这是我需要传递给控制器来保存图像对吗?我认为有一些错误在我的javascript传递值在控制器。

<<p> 视图/strong> 
@using (Html.BeginForm("SampleCaptureImage", "Warehouse", FormMethod.Post))
{
      <canvas id="canvas" style="max-width: 100%; height: auto; width: auto'9; display: block; margin-left: auto; margin-right: auto;" width="640" height="640"></canvas>
      <input type="submit" name="btnsubmit" id="btnSave" value="Save Drawing" />
}
脚本

<script type="text/javascript">
    $("#btnSave").click(function () {
        var images = document.getElementById("canvas").toDataURL("image/png");
        images = images.replace('data:image/png;base64,', '');
        $.post(
                '@Url.Action("SampleCaptureImage","Warehouse")',
                { imageData: images },
                handleSuccess
            );
    });
</script>
控制器

public ActionResult SampleCaptureImage(string imageData)
{
      string fileName = "CapturedImage.png";
      string fileNameWitPath = Path.Combine(Server.MapPath("~/Images/Sanipex Captured Images"), fileName);
      using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
      {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                 byte[] data = Convert.FromBase64String(imageData);
                 bw.Write(data);
                 bw.Close();
             }
             fs.Close();
      }
      return view();
}

因为你使用的是提交按钮，它会以默认方式运行而不是你使用的ajax方式

添加preventDefault()或将按钮类型更改为button

你可以阅读更多关于preventDefault()的信息，http://api.jquery.com/event.preventdefault/

是脚本内联或js文件?

试

$("#btnSave").click(function (e) {
        e.preventDefault();
        var images = document.getElementById("canvas").toDataURL("image/png");
        images = images.replace('data:image/png;base64,', '');
        //$.post(
                //'@Url.Action("SampleCaptureImage","Warehouse")',
               // { imageData: images },
             //   handleSuccess
        //    );
       $.post('@Url.Action("SampleCaptureImage","Warehouse")', { imageData: images })
        .done(function( data ) {
          alert( "Data Loaded: " + data );
        });
    });

您的控制器SampleCaptureImage没有HttpPost属性，默认情况下它只接收HTTP GET请求。

您还可以考虑另一种提交表单的方法，而不是使用提交类型的按钮。你可以设置一个普通的按钮，比如:

@using (Html.BeginForm("SampleCaptureImage","Warehouse", FormMethod.Post, new { id = "SubmitForm"}))
{
    <a href="#" id="SubmitBtn" class="btn btn-primary btn-large">Submit</a>
}

然后在javascript中这样做:

$("#SubmitBtn").click(function ()
{
    $("#SubmitForm").submit();
});

并且在click()函数中，可以在提交之前做任何其他特殊的工作

相关文章：