Ajax 调用替换整个内容

Question

我有一个表单和提交按钮。通常，当执行提交操作时，它会返回到新页面并且不会更新部分视图。我在 jquery live 函数中使用 ajax 调用，但它仍然替换整个内容，而不是使用提供的模型返回部分视图。以下是我在_detailfile.cshtml 中的代码。应用程序上传文件但替换整个内容。

<div id="trainingFileDiv" style="overflow: auto; height: 470px;">
 <table class="fileTable">
                @foreach (var training in Model.TrainingList)
                {
                    using (Html.BeginForm("fileForm", "Home/TempUpload", new { employeeId = Model.Id, trainId= @training.Id }, FormMethod.Post, new { enctype = "multipart/form-data" }))
                    {
                        if (training.TrainingFile != null)
                        {
                    <tr>
                        <td>
                        </td>
                    </tr>
                        }

                        else
                        {
                    <tr>
                        <td class="view_detail_label" style="width: 250px;">
                            @training.Name.Name
                        </td>
                        <td>
                            <input  type="file" name="@training.Id"/>
                        </td>

                    </tr>

                     <tr><td><input type="submit" name="Submit" id="Submit" value="Yükle" /></td>

                     </tr>
                        }

                    }

                }
            </table>
</div>

以下是我的脚本，仅更新 div 文件，但它不起作用。

 $("fileForm").live("submit",  function (event) {


         if (form.valid()) {
             $.ajax({
                 url: this.action,
                 type: this.method,
                 data: $(this).serialize(),
                 success: function (result) {
                     $('#trainingFileDiv').html(result);
                 }
             });
         }

         event.preventDefault();
     });

这是我在网上找到的另一个代码，它不会更新 div 而是更新所有内容。

$(function () {
    $('fileForm').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#trainingFileDiv').html(result);
                }
            });
        }
        return false;
    });
});

我在这里缺少什么？ 谢谢你的帮助

EDIT1 当部分视图从控制器返回时，我得到Uncaught ReferenceError: $ is not defined fileForm:7

EDIT2 函数对所有表单进行 ajaxify。我在edit1中得到错误

  $(function () {
         $('form').submit(function () {
             if ($(this).valid()) {
                 $.ajax({
                     url: this.action,
                     type: this.method,
                     data: $(this).serialize(),
                     success: function (result) {
                         $('#trainingFileDiv').append(result);
                     },
                 });//end of ajax call
             }//end of if

         });     });

EDIT3 在下面的代码中我没有错误，但请求中没有任何文件。您可以在函数下方看到控制器代码。但是当我返回 true 或 false 时，文件被放置在 Request 对象中并发送到控制器。但它取代了我在退货时的所有内容。这里有什么问题？

$('form').submit(function (event) {

         if ($(this).valid()) {
             $.ajax({
                 url: this.action,
                 type: this.method,
                 data: $(this).serialize(),
                 success: function (result) {
                     $('#trainingFileDiv').html(result);
                 },
                 complete: function () {
                     console.log("Complete");
                 },
                 error: function () {
                     console.log("Error");
                 }
             }); //end of ajax call
         } //end of if
         //return true;//if commented no error on jquery side but no files are passed to controlller
     });

  foreach (string upload in Request.Files)
            {
                string path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
                string filename = Path.GetFileName(Request.Files[upload].FileName);
                TrainingFile file = new TrainingFile();
                file.Name = filename;
                file.Path = path;



                var training = _work.TrainingRepository.GetSet().Where(a => a.EmployeeId == employeeId && a.Id == trainId).ToList().ElementAt(0);
                training.TrainingFile = file;
                training.FileId = file.Id;

                _work.TrainingFileRepository.Add(file);
                _work.TrainingFileRepository.Save();
                _work.TrainingRepository.UpdateAndSave(training);
                _work.TrainingRepository.Save();

                Request.Files[upload].SaveAs(Path.Combine(path, filename));
            }

Answer 1

$('#trainingFileDiv').html(result);// ovverides already existing html

$('#trainingFileDiv').append(result); //adds new result to existing html

Answer 2

不幸的是，我还没有足够高的代表发表评论，尽管我正在努力做到这一点。 如果页面上只有一个表单，您可以使用 $('form') 获取表单。 否则，根据您使用的视图引擎，您可能需要添加一些额外的语法来指定表单的 Id。

就像 Darin Dimitrov 建议的那样：

using (Html.BeginForm("fileForm", "Home/TempUpload", new { employeeId = Model.Id, trainId= @training.Id }, FormMethod.Post, new { enctype = "multipart/form-data", id = "fileForm" }))

在 Razor 中，您需要将 @ 添加到 id 中，这样会是这样的：

@using (Html.BeginForm("fileForm", "Home/TempUpload", 
new { employeeId = Model.Id, trainId= @training.Id }, FormMethod.Post, 
new { enctype = "multipart/form-data", @id = "fileForm" }))

Answer 3

你的选择器错误，没有返回任何元素：

$('fileForm')

当然，您没有将提交处理程序附加到任何元素。

您可能想使用 id 选择器来检索表单：

$('#fileForm')

也不要忘记将此id 分配给您的表单：

using (Html.BeginForm("fileForm", "Home/TempUpload", new { employeeId = Model.Id, trainId= @training.Id }, FormMethod.Post, new { enctype = "multipart/form-data", id = "fileForm" }))

或者如果您想对页面上的所有表单进行 AJAX 化（或者您只有一个表单），您可以使用：

$('form')

当然，您的$("fileForm").live 选择器的备注完全相同。另请注意，.live 方法在很久以前就已被弃用，除非您使用史前时期的 jQuery 版本，否则您可能希望使用推荐的 .on() 函数。