使用@ Ajax.beginForm在div中显示json结果

时间:2014-05-05 08:30:54

标签: javascript jquery ajax json asp.net-mvc-4

我正在尝试使用mvc4中的Ajax.beginform显示来自服务器的响应的错误消息。我从服务器收到响应消息和错误但是当我在div中显示错误时它显示如下

{"success":false,"OtherData":"Image must be greater Than 960 x 960"}

以下是我的观点和控制器操作

  

控制器操作

if (img.Width < 960 && img.Height < 960)
           {

               return Json(new { success = false, OtherData = "Image must be greater Than 960 x 960" });
           }

,我的部分视图

   @using (Ajax.BeginForm("UploadeImage", "ImageUpload", null, new AjaxOptions {   HttpMethod =    "POST", OnSuccess = "OnSuccess" }, new { enctype = "multipart/form-data", Id = "ImgUp" }))
 {
  @Html.AntiForgeryToken()

<div id="dialog" title="Basic dialog">
    Image size must be greater than 960 x 960 and less than 20 MB
    <div>
        <input type="file" name="Images" id="filePhoto" />

        <input type="submit" name="continue" class="btn btn-info" value="continue" />
    </div>

</div>

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success">0%</div>
</div>

<div id="status"></div>

<div id="Error"></div>

<div>
    <img id="img" src="#" alt="Preview" width="250" height="250" />
</div>
}


 <script>
    function readURL(input) {
       if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
            $('#img').attr('src', e.target.result);
          }

        reader.readAsDataURL(input.files[0]);
      }
   }
    $("#filePhoto").change(function () {
    readURL(this);
   });

    (function () {

    var bar = $('.progress-bar');
    var percent = $('.progress-bar');
    var status = $('#status');

    $('#ImgUp').ajaxForm({
        beforeSend: function () {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        uploadProgress: function (event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        success: function () {
            var percentVal = '100%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
          complete: function (xhr) {
            status.html(xhr.responseText);
          }
       });

      })();
   function OnSuccess() {
    if (!data.success) {
        document.getElementById("#Error").innerHTML =OtherData;
    }
  }

1 个答案:

答案 0 :(得分:0)

试试这个,

function OnSuccess() {
    if (!data.success) {
      $("#Error").html(data.OtherData);
    }
  }