Asp.Net MVC 为 ajax 请求动态创建 url答案

【问题标题】：Asp.Net MVC Dynamicaly create url for ajax requestAsp.Net MVC 为 ajax 请求动态创建 url
【发布时间】：2017-06-25 20:39:10
【问题描述】：

我有一个包含任务列表的列表视图。每个任务都有它的状态显示在下拉列表中。我也有一个控制器方法来改变任务状态。我的看法：

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.TaskText)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TillDate)
        </td>
        <td>
            @Html.EnumDropDownListFor(modelItem => item.State, new { @class="state", @onchange="Drop()"})
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
}

我的控制器方法：

    [HttpPost]
    public ActionResult UpdateState(int id, int state)
    {
        context.UpdateState(id, state);
        return View();
    }

我也有这样的 JQuery 代码：

    function Drop()
    {
        $.ajax(
            {
                url: "UpdateState",
                type: "POST",
                success: function ()
                { alert("123123"); }
            }
        );
        alert("asdasd");
    }

如何动态创建包含项目 ID 和选定状态的 ajax url？

【问题讨论】：

标签： c# jquery asp.net ajax asp.net-mvc

【解决方案1】：

所以你有你可以渲染的部分。您将在视图中呈现脚本部分。在视图中，您可以动态呈现 url。

@section scripts {
    <script>

    function Drop() {
        $.ajax({
            url: "UpdateState/?id="@item.Id,
            type: "POST",
            success: function () {
                alert("123123");
            }
        });

        alert("asdasd");
    }
    </script>
}

【讨论】：

就是这样。谢谢。但现在我还有一个问题。我的动作方法有效，但从未成功提升 ajax 功能。出现错误 500。据我了解，这是因为我的 Action 方法返回 View()。我应该返回什么？
您可能会返回“return new HttpStatusCodeResult(HttpStatusCode.OK);”。这将返回 HTTP 200。您的 using 语句中需要 System.Net。

【解决方案2】：

Url.Action("action", "controller", new { id = "123" }) 应该在您的情况下工作得很好。 Url.Action 为您的控制器/操作生成 url 字符串。你也可以给它提供url参数。

function Drop()
{
    $.ajax(
        {
            url: "@Url.Action("UpdateState", "YourController", new { id = item.id, state = item.State })"
            type: "POST",
            success: function ()
            { alert("123123"); }
        }
    );
    alert("asdasd");
}

【讨论】：

【解决方案3】：

如果您使用提交按钮，您应该将实体的所有数据放入表单输入中。如果你想使用 js ajax 请求，你需要从某个地方带来数据。一种简单的方法是将每个项目的 ID 存储在每行内的隐藏元素中，并为每一行指定一个类，以便可以选择它。例如：

@foreach (var item in Model) {
    <tr class="taskData">
        <td>
            @Html.DisplayFor(modelItem => item.TaskText)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TillDate)
        </td>
        <td>
            @Html.EnumDropDownListFor(modelItem => item.State, new { @class="state", @onchange="Drop()"})
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            <input type="hidden" class="taskId" value="@item.Id" />
        </td>
    </tr>
}

然后用js：

function Drop()
    {
        var data=$(".taskData").map(function(){
                       var $this=$(this);
                       return {id:$this.find(".taskId").val(),
                               state:$this.find(".state").val()};
             }).get();
        $.ajax(
            {
                url: "UpdateState",
                type: "POST",
                data:data,
                success: function ()
                { alert("123123"); }
            }
        );
        alert("asdasd");
    }

【讨论】：