Partial View on Submit using Ajax call

Question

Here is my jquery code:

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

and here is 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>

What happens is, on submit, I get the partial view of the same page 'Index' in div-'tablepartialview', instead of another page 'PropertyColumnMap', which I want. After the ajax call is done,it redirects to action 'PropertyColumnMap', and then I get the view for 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

If its possible please include following js to your project

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

Then you can use

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

Answer 2

As you are using MVC, just switch your Html.BeginForm to use the Ajaxified Ajax.BeginForm instead.

It allows for many options including specifying the id of the target element to update (eg 'tablepartialview').

eg

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

You probably have to install the Ajax unobtrusive NuGet package to provide the wiring, but it is quite simple and does not require you to write any extra JQuery for the view.