ASP.NET MVC 4和Jquery表单插件表单发布2次

Question

我尝试将带有模型的ajax发布文件发送到controller。 使用的Jquery表单插件。 使用模型进行文件发布没有问题，但是表单总是发布2次，因此我的数据总是被替换。 如何解决呢？

代码在这里：

  <script>
(function() {

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

$('form').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);
    }
}); 

})();       
</script>






    @Using (Ajax.BeginForm("AddNewProductToGroup", "Admin", New AjaxOptions With {.HttpMethod = FormMethod.Post,
                                                                              .InsertionMode = InsertionMode.Replace,
                                                                              .UpdateTargetId = "productslist",
                                                                              .OnSuccess = "OpenNewProduct"},New With{.enctype = "multipart/form-data"}))

  @Html.AntiForgeryToken()

<div class="form-group">
                        <label class="col-sm-4">
                             @Html.ValidationMessageFor(Function(m) m.Desc) 
                            @Html.DisplayNameFor(Function(m) m.Desc) 
                          </label>
                        <div class="col-sm-8">
                          @Html.TextBoxFor(Function(m) m.Desc,New With{.class="form-control"})
                        </div>
                      </div>


                           <div class="form-group">
                        <label class="col-sm-4">@Html.DisplayNameFor(Function(m) m.Image) </label>

                        <div class="col-sm-8">
                          @Html.TextBoxFor(Function(m) m.Image,New With{.class="form-control",.type="file", .id = "file_upload"})
                            <div class="progress progress-striped">
        <div class="progress-bar progress-bar-success">0%</div>
    </div>

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

                       <div class="col-lg-4">
                              <button type="submit" class="btn btn-primary">Add </button>

                       </div>


            End Using







<ValidateAntiForgeryToken>
Public Function AddNewProductToGroup(ByVal prd As ProductCreate) As ActionResult

Answer 1

我找到了隔离，将Ajax.beginform更改为Html.Beginform并修改了脚本。

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


$('#formprd').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function (event, position, total, percentComplete) {

        debugger
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
     success: function (result) {

        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
        event.preventDefault();
        $("#productslist").html(result);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
        return false;
    }
}); 

})();

和形式：

 @Using (Html.BeginForm("AddNewProductToGroup", "Admin", FormMethod.Post,New With{.enctype = "multipart/form-data",.id="formprd" }))