使用Ajax调用在部分视图上提交

Question

这是我的jQuery代码：

<script type="text/javascript">
    $("#submitfileform").submit(function () {
        $.ajax({

            type: 'POST',
            contentType: 'application/html;charset=utf-8',
            dataType:'html',
            success:function (result) {
                $('#tablepartialview').html(result);
            },
            error:function (xhr, status) {
                alert(status);
            }
        })


        });
</script>

这是html.beginform，

     @using (Html.BeginForm("PropertyColumnMap", "ImportFile", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form single-col",id="submitfileform"}))
{
                    <input type="file" name="uploadFile" id="uploadFile" value=""/>
                    <select id="assetlist" name="assetlist">
                          <option>...</option></select>

                   <input class="btn btn-primary" type="submit" value="Submit" id="submitfile"/>
}
<div id="tablepartialview">


</div>

发生的事情是，在提交时，我在div-tablepartialview中得到了同一页面“索引”的局部视图，而不是我想要的另一页面“ PropertyColumnMap”。 Ajax调用完成后，它将重定向到操作“ PropertyColumnMap”，然后获得PropertyColumnMap的视图。

public ActionResult PropertyColumnMap(FormCollection f, HttpPostedFileBase uploadFile)
        {

            String fileid = Import(uploadFile);



                var excel = new ExcelQueryFactory(Session[fileid].ToString());
                excel.DatabaseEngine = DatabaseEngine.Ace;
                var workSheetName = excel.GetWorksheetNames().Last();
                var assetname = f["assetlist"].ToString();
                Mapping(assetname, workSheetName, fileid);


            return PartialView("PropertyColumnMap");


        }

Answer 1

如果可能，请在您的项目中包含以下js

http://malsup.github.com/jquery.form.js

那你可以用

$("#submitfileform").ajaxSubmit({
        type: 'POST',
        success:function (result) {
            $('#tablepartialview').html(result);
        },
        error:function (xhr, status) {
            alert(status);
        }
           });

Answer 2

使用MVC时，只需将Html.BeginForm切换为使用Ajaxified Ajax.BeginForm 。

它允许许多选项，包括指定要更新的目标元素的ID（例如“ tablepartialview”）。

例如

@using (Ajax.BeginForm("PropertyColumnMap", "ImportFile", new AjaxOptions(){ HttpMethod = "POST", UpdateTargetId = "tablepartialview"}, new { enctype = "multipart/form-data", @class = "form single-col", id = "submitfileform" }))
{
    <input type="file" name="uploadFile" id="uploadFile" value="" />
    <select id="assetlist" name="assetlist">
        <option>...</option>
    </select>

    <input class="btn btn-primary" type="submit" value="Submit" id="submitfile" />
}
<div id="tablepartialview">
</div>

您可能必须安装Ajax兼容的NuGet软件包以提供连接，但是它非常简单，不需要为视图编写任何额外的JQuery。