Question

我有一个包含任务列表的列表视图。每个任务都在DropDown列表中显示状态。我还有一个控制器方法来改变任务状态。我的观点：

@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？

Answer 1

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

@section scripts {
    <script>

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

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

Answer 2

如果您使用提交按钮，则应将实体的所有数据放在表单输入中。如果要使用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");
    }

Answer 3

Url.Action("action", "controller", new { id = "123" })应该适合您的情况。 Url.Action为您的控制器/操作生成url字符串。您也可以为其提供网址参数。

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

Asp.Net MVC Dynamicaly为ajax请求创建url

3 个答案: