asp.net core - 如何使用Jquery模式对话框获取partialview按钮的事件?

时间:2017-11-10 14:15:08

标签: jquery asp.net-mvc file-upload asp.net-core

我有一个模态局部视图用于在数据库中插入数据。我想在注册信息时上传图片。 以下代码显示了我的部分视图。

部分视图

 @model LibraryProject.Models.ViewModels.AddBookViewModel


<form enctype="multipart/form-data" method="post">

    <div class="modal-body form-horizontal">
        <div class="row">

            <div class="form-group">
                <label asp-for="BookName" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="BookName" class="form-control" />
                    <span asp-validation-for="BookName" class="text-danger"></span>
                </div>
            </div>

            <div class="form-group">
                <label asp-for="BookDescription" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-9">
                    <textarea asp-for="BookDescription" class="form-control"></textarea>
                    <span asp-validation-for="BookDescription" class="text-danger"></span>
                </div>
            </div>

            @* Image *@
            <div class="form-group">
                <label asp-for="BookImage" class="col-md-2 control-label"></label>
                <div class="col-md-10">
                    <input type="file" id="files" name="files" />
                </div>
            </div>
        </div>
    </div>


    <div class="modal-footer">
        <button class="btn btn-default" type="button" data-dismiss="modal">back</button>
        <button type="button" id="upload" class="btn btn-success">Insert</button>
    </div>
</form>

我使用数据表单发布表单,并在Partial视图的底部编写了以下代码。

Jquery的:

@section Scripts{
<script>
        $(document).ready(function () {
            $("#upload").click(function (evt) {
                e.preventDefault();

                var fileUpload = $("#files").get(0);
                var files = fileUpload.files;
                var data = new FormData();
                for (var i = 0; i < files.length; i++) {
                    data.append(files[i].name, files[i]);
                }
                $.ajax({
                    type: "POST",
                    url: "/Book/AddBook",
                    contentType: false,
                    processData: false,
                    data: data,
                    success: function (message) {
                        alert(message);
                    },
                    error: function () {
                        alert("There was error uploading files!");
                    }
                });
            });
        });
 </script>}

我做了很多关于jquery代码的研究,但代码根本没有运行,而且它似乎根本不存在。

0 个答案:

没有答案