用Ajax从视图发送到控制器

本文关键字:控制器 视图 Ajax | 更新日期: 2023-09-27 18:17:32

我有一个关于用ajax将数据从视图发送到控制器的问题。
这是我的视图:

@model GDMfrontEnd.Models.DeliverableViewModel
@{
    ViewBag.Title = "Create";
}
<div class="row">
<div class="large-12 columns">
<h2>Uploaden!</h2>
@using (Html.BeginForm("Create", "Deliverable", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
        <p><img src="~/Content/images/step1.png" />Selecteer jouw afbeeldingen</p>
        <div class="editor-label">
            @Html.LabelFor(model => model.Thumbnail)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Thumbnail, new { type = "file" })
            @Html.ValidationMessageFor(model => model.Thumbnail)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Image)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Image, new { type = "file" })
            @Html.ValidationMessageFor(model => model.Image)
        </div>
            <div class="editor-label">
            @Html.LabelFor(model => model.VideoUrl)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.VideoUrl)
            @Html.ValidationMessageFor(model => model.VideoUrl)
        </div>
        <p><img src="~/Content/images/step2.png" />Informatie</p>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Projects)
        </div>
        <div class="editor-field">
             @Html.DropDownListFor(model => model.ProjectID, new SelectList(ViewBag.Projects, "project_id", "project_name", Model.ProjectID))
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.TagName)
        </div>
        <div class="editor-field">
             <input type="text" id="tags" />
        </div>
        <p>
            <input id="submit" type="submit" value="Create" />
        </p>
}
</div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")
    <script type="text/javascript" language="javascript">
        $(function () {
            var object = {};
            $.ajax({
                type: "GET",
                url: "/Deliverable/Tags",
                dataType: "json",
                success: function (data) {
                    object.tags = data;
                }
            });
            function split(val) {
                return val.split(/,'s*/);
            }
            function extractLast(term) {
                return split(term).pop();
            }
            $("#tags")
            // don't navigate away from the field on tab when selecting an item
                .bind("keydown", function (event) {
                    if (event.keyCode === $.ui.keyCode.TAB &&
                    $(this).data("ui-autocomplete").menu.active) {
                        event.preventDefault();
                    }
                })
                .autocomplete({
                    minLength: 0,
                    source: function (request, response) {
                        // delegate back to autocomplete, but extract the last term
                        response($.ui.autocomplete.filter(
                            object.tags, extractLast(request.term)));
                    },
                    focus: function () {
                        // prevent value inserted on focus
                        return false;
                    },
                    select: function (event, ui) {
                        var terms = split(this.value);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push(ui.item.value);
                        // add placeholder to get the comma-and-space at the end
                        terms.push("");
                        this.value = terms.join(", ");
                        return false;
                    }
               });
            });
            $("#submit").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Deliverable/AddTags",
                    data: terms,
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        alert('success');
                    },
                    error: function () {
                        alert('failure');
                    }
                });
            });

    </script>
}

我有一个html表单与底部的文本框,在那里你可以添加标签的文本框。(标签在数据库中定义)

问题是ajax没有做任何事情。他甚至不属于我的行动方法。

有谁能帮我一下吗?我想把数组项发送到我的控制器中的一个动作方法。 编辑:

我的行动:

[HttpPost]
    public ActionResult AddTags(List<string> data)
    {
        return View();
    }

我只是在动作的开始有一个断点来检查它是否到达了动作,但没有结果…

用Ajax从视图发送到控制器

您正在操作上设置HTTPPost属性,这意味着该操作将仅映射到post请求上。在您的ajax脚本中,您通过类型Get定义,这意味着ajax请求将使用Get请求触发。

删除该属性或更改请求的类型