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'中获得同一页面'Index'的部分视图，而不是我想要的另一个页面'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（例如＆＃39; tablepartialview＆＃39;）。

e.g。

@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。

使用Ajax调用提交的部分视图

2 个答案:

e.g。