Question

您好我正在尝试使用ajax和jquery

在我的控制器中调用带参数的方法

控制器：

[HttpPost("{Id}")] 
public ActionResult PostComment(int Id, ShowViewModel model)
{
}

查看：

我有一个名为AddComment的按钮，点击它时应打开一个模态弹出窗口，要求确认保存

<form id="addCommentForm" asp-action="postcomment" enctype="multipart/form-data">
    <button id="addCommentButton" class="btn btn-primary">
        <i class="fa fa-search"></i>&nbsp;Add comment
    </button>`

    <div class="modal fade" id="saveConfirmationDialog" tabindex="-1" role="dialog" aria-labelledby="saveConfirmationDialogTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveConfirmationDialogTitle">Post selective exchange comment</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Do you want to post a comment?
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">
                        <i class="fa fa-envelope-open"></i>&nbsp;Post selective exchange comment
                    </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        <i class="fa fa-ban"></i>&nbsp;Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

使用Javascript：

ControllerName.View.Properties.controllerViewUrl = $("#controllerViewUrl").val();

    $(document).ready(function () {
        ControllerName.View.Validation.initialize();
        ControllerName.View.Initialize.addCommentButton();
    });

    ControllerName.View.Initialize = {}
    ControllerName.View.Initialize.addCommentButton = function () {
        $('#addCommentButton').click(function (event) {
            event.preventDefault();
            if ($('#addCommentForm').valid()) {
                $("#saveConfirmationDialog").modal('show');
            }
        });
    }


    ControllerName.View.Validation = {}

   ControllerName.View.Validation.initialize = function () {

        $("#addCommentForm").validate();
    }

   ControllerName.View.Ajax = {}

    ControllerName.View.Ajax.postComment = function (successCallback) {
        var url = ControllerName.View.Properties.controllerViewUrl + '/PostComment'+<<parameter>>;
    }

我的控制器方法没有被调用，我做错了什么？我还需要传递一个Id作为参数

请帮助，提前致谢

Answer 1

一个简单的例子

HTML CODE

<button id="saveButton" type="button" data-toggle="modal" data-target="#saveConfirmationDialog" class="btn btn-labeled btn-danger" style="display:none;">Save Data</button>
<div id="saveConfirmationDialog" class="modal fade" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modal-title" class="modal-title">Post selective exchange comment</h4>
            </div>
            <div class="modal-body">
                Do you want to post a comment?
            </div>
            <div class="modal-footer">
                <div id="formDiv">
                    <button id="sender" type="submit" class="btn btn-success"><i class="fa fa-envelope-open"></i>&nbsp;Post selective exchange comment</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-ban"></i>&nbsp;Close</button>
                </div>
                <div id="loadingPanel" style="display:none;">Loading...</div>
            </div>
        </div>
    </div>
</div>

JS CODE

<script type="text/javascript">
    $('#sender').click(function () {
        PostDataToController();
    });

    function PostDataToController(action) {
        $('#formDiv').hide();
        $('#loadingPanel').show();
        // create form data
        var formData = new FormData();
        formData.append("YourParameter", $('#YourValue').val());
        // Write here your parameters what you need

        // do post
        $.ajax({
            type: "POST",
            url: "/localhost:8080/InsertComment",
            enctype: "multipart/form-data",
            cache: false,
            contentType: false,
            processData: false,
            data: formData,
            success: function (d) {
                $('#formDiv').show();
                $('#loadingPanel').hide();
                if (d.result == "ok") {
                    /*Your success operations*/
                }
                else {
                    //alert(d.msg);
                    /*Your custom error operations*/
                }
            },
            error: function (xhr, textStatus, errorThrown) {
                /*Your error operations*/
                //alert(xhr);
                $('#formDiv').show();
                $('#loadingPanel').hide();
            }
    });
}
</script>

MVC代码

[HttpPost]
public ActionResult InsertComment(int Id, ShowViewModel model)
{
    if (ModelState.IsValid)
    {
        // insert
        // Yor save method is here
        if (!isSuccess()) // your process not succeeded
        {
            // error
            return Json(new { result = "no", msg = /*your error message*/ });
        }
        //succeeded
        return Json(new { result = "ok" });
    }
    else
    {
        // error
        string error = ModelState.Values.FirstOrDefault(f => f.Errors.Count > 0).Errors.FirstOrDefault().ErrorMessage;
        return Json(new { result = "no", msg = error });
    }
}

使用jQuery和ajax调用MVC控制器

1 个答案: