MVC / Razor文件上传视图

时间:2014-06-11 13:22:02

标签: asp.net-mvc asp.net-mvc-4 razor

我自己承认了新手,但我有一些视图,我粘贴了一些代码来提供文件上传。该功能有效,但如果代码在,则保存"保存"已经存在的视图按钮停止工作。如果我不得不猜测它与" HTML.BeginForm"有关。线路在那里两次。

以下是视图的顶部,

    @model BrooksSOR.Models.dataOffender

    @{
        ViewBag.Title = "Edit";
    }

    <h2>Edit</h2>
    <div >
       <h2>Upload Files in MVC</h2>
           <img src="@Model.Photograph" width="250" height="250"  />*


    @using (Html.BeginForm("FileUpload", "SOR",
        FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
    <input name="uploadFile" type="file" />
    <input type="submit" value="Upload File"/>
    <input type="hidden" name="parmPersonID" value="@Model.PersonID" />

    }
    </div>

    @using (Html.BeginForm())
    {
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)

    <fieldset>
      <legend>dataOffender</legend>

           <p>
        <input type="submit" value="Save" />
        <input id="Details" type="button" value="Details" />
    </p>
    </fieldset> 

1 个答案:

答案 0 :(得分:0)

删除@html.BeginForm

您需要为文件和其他一些字段发送的脚本。

//Purpose: Form Submit: SAVE Client
        document.getElementById('frmPage').onsubmit = function (e) {
            debugger;
            var file = document.getElementById('fileToUpload').files[0];
            var filename;
            if (file) {
                filename = file.name;
            }
            else {
                filename = "";
            }
            $('#Image').val(filename);
            var formObj = $(this);
            var formURL = '@Url.Action("SaveMethod", "ControllerName")';
            var formData = new FormData(this);
            $.ajax({
                url: formURL,
                type: 'POST',
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
                success: function (data, textStatus, jqXHR) {
                    debugger;

                    alert("Client saved successfully");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });
            e.preventDefault(); //Prevent Default action.
        }

这是设计:

<div>

                            <form id="frmPage" class="form-horizontal">
                                <div class="form-body">

                                    <div class="form-group">
                                        <label id="lblImage" class="col-md-3 control-label">Upload File</label>
                                        <div class="col-md-4">
                                            <input type="file" id="fileToUpload" name="file" />

                                        </div>
                                    </div>



                                <div class="modal-footer" style="margin-top: 0px">
                                    <div class="pull-right">
                                        <button type="submit" id="btnSave" class="btn blue Save">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>

此处:btnSavesubmit类型,因此它会提交该特定表单。名为frmPage的表单将执行我们添加的jquery脚本。