使用ASP.NET MVC和Entity Framework将表单数据和图像从一种表单发布到db中的两个单独的表中

Question

我的问题是文件上传和Ajax。 我有一个带有表单字段和上传功能的表单。 我希望用户从光盘中选择图像，单击不带重定向的上传，在下面显示图像，填写表格，单击创建以将表格保存到一个表中并将图像保存到另一个表中。 问题是上传和创建按钮都在提交，我希望上传等待表单的其余部分。 Ajax是否是最佳解决方案？ 这是我的代码：

视图：

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

        <div class="form-horizontal">
            <h4>sticenikSlika</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.sticenikId, "sticenikId", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("sticenikId", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.sticenikId, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.vrijeme, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.vrijeme, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.vrijeme, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>

        </div>
    }

    <div class="form-horizontal">
        <div class="form-group">
            @using (Html.BeginForm("FileUpload", "UploadImage", FormMethod.Post,
            new { enctype = "multipart/form-data" }))
            {
            <label for="file" class="control-label col-md-2">Upload Image:</label>
            <div class="col-md-10">
                <span class="btn btn-default btn-file">
                    <input type="file" name="file" id="file" />
                </span>
                <input type="submit" value="Upload" class="submit btn btn-default" id="upload" />
            </div>            
            }
        </div>
    </div>

发布到数据库的控制器是默认的Entity Framework东西。

控制器UploadImage：

public ActionResult FileUpload(HttpPostedFileBase file)
            {
                if (file != null)
                {
                    string pic = System.IO.Path.GetFileName(file.FileName);
                    string path = System.IO.Path.Combine(
                                           Server.MapPath("~/Content/images/profile"), pic);

                    file.SaveAs(path);

                    using (MemoryStream ms = new MemoryStream())
                    {
                        file.InputStream.CopyTo(ms);
                        byte[] array = ms.GetBuffer();

JavaScript：

<script>
            $('#upload').click(function (e) {
                e.preventDefault();

                $.ajax({
                    url: '/UploadImage/FileUpload',
                    // not sure what to do 

                    error: function () {
                        alert('Error');
                    }
                });
            });
</script>

当我单击“上传”时，它保存图像，但不保存表单；当我单击“创建”时，它保存表单，但不保存图像。 如何将两者结合起来？

Answer 1

我无法在ajax中为您提供帮助，但是如果您要使用c＃，则在剃刀页面中仅放置一种包含数据和图像的表格，您的表格当然应该是这样的

      @using (Html.BeginForm("--", "--", FormMethod.Post,
        new { enctype = "multipart/form-data" })) 

和您的控制器：

        public ActionResult FileUpload(HttpPostedFileBase file, YourModel model)
        {
            //here save your model
            if (file != null)
            {
                //save file
            }

        }

Answer 2

@using (Html.BeginForm("FileUploadAndSaveData", "UploadImage", FormMethod.Post,
            new { enctype = "multipart/form-data" })) 
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>sticenikSlika</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.sticenikId, "sticenikId", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("sticenikId", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.sticenikId, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.vrijeme, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.vrijeme, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.vrijeme, "", new { @class = "text-danger" })
                </div>
            </div>

             <div class="form-group">
            @Html.LabelFor(model => model.vrijeme, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.vrijeme, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.vrijeme, "", new { @class = "text-danger" })
            </div>
        </div>          

    </div>
     <label for="file" class="control-label col-md-2">Upload Image:</label>
        <div class="col-md-10">
            <span class="btn btn-default btn-file">
                <input type="file" name="file" id="file" />
            </span>
            <input type="submit" value="Save" class="submit btn btn-default" id="upload" />
        </div>    
    }

    </div>

在UploadImage Controller中创建新动作

public ActionResult FileUploadAndSaveData(HttpPostedFileBase file,Model obj) {

FileUpload(HttpPostedFileBase file);/// function Call  for Save Image
SaveData(obj); //Function Call for Save Data
}