弹出以上传文件MVC

Question

I need to upload some xml files .For this I need to open from my MVC application a popup to load a file .I wrote the code below.In the controller I see the loaded file .

Upload.cshtml:

@using (@Html.BeginForm("UploadFile", "UploadFileController", FormMethod.Post, new { @id = "uploadForm", @enctype = "multipart/form-data" }))
  {
   <div>
        @Html.TextBoxFor(m => m.FileName, new { type = "file" })
       <button type="submit" class="btn">Upload</button>
  </div>
 }

Controller :

[HttpPost]
 public ActionResult UploadFile(UploadFileModel uploadFileModel)
{
....

}

Model:

public class UploadFileModel
{
    public int Id { set; get; }
    public HttpPostedFileBase FileName { get; set; }
}

Now ,the "Upload.cshtml" is a part and appear in the home page . 1.How can I transform it in a separate form ?This part appear when I press a button. 2.How can I show in the search dialog just xml files ?

Thanks .

Answer 1

As it was mentioned before , it's front-end problem and nothing to do with c# and controller. So please Modify Upload.cshtml :

 <button type="button" class="btn btn-default" id="showPopup">show popup</button>

<form id="uploadForm" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>                
        </div>

        <div class="modal-body">
            @Html.TextBoxFor(m => m.FileName, new { type = "file" })
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">close form</button>
            <button type="submit" class="btn btn-success" id="">Upload</button>
        </div>
    </div>
</div>

Now with jquery :

$('#showPopup).click(function(){
   $('#uploadForm').modal();
});

another option is Bootbox.js. hope it helps.