Question

我有一个视图，我从数据库中向表中添加了一些元素;我们打电话给学生表。在视图中我还可以选择分配给学生我在桌子上添加一些书籍。我用Ajax完成了这个。

演示：

    Name of Student: ...
    Books : <here is a drop down> ( from database)    < here is a button> (add button)

    <ul>
   When I click the button here I append some books. I also retain on Session the id of every book ( in a list and when I click submit I send that list to the server )
    </ul>
[Submit button]

问题是我想添加一个像这样的删除按钮：

    Name of Student: ...

    Books : <here is a drop down>     < here is a button> 

    <ul>
    Book1  delete
    Book2  delete
    </ul>
[Submit button]

当我单击删除按钮从列表和会话中删除该元素时。

这是我的代码：

视图中的脚本

$(function () {

    $("#add").click(function () {

        //items.push($("#category").val());
        $.ajax({
            url: '@Url.Action("AddCategory")',
            type: "POST",
            dataType: "JSON",
            data: { id: $("#categoryId option:selected").val() },
            beforeSend: function () { },
            success: function (data) {

                $("#toFill").append("<li>" + $("#categoryId option:selected").text() + " " + "<span style='cursor:pointer;' id='a'>" + "[X]" + "</span>" + " " + "</li>");
            },
            error: function () { alert("error") }

        })
        $("#toFill #a").click(function () {

            $.ajax({
                url: '@Url.Action("DeleteCat")',
                type: "POST",
                dataType: "JSON",
                data: { id: $("#categoryId option:selected").val() },
                beforeSend: function () { },
                succes: function (data) {
                    // $("li").remove();
                    alert("lala"); return false;
                },
                error: function () { alert("error at delete") }



            })

        });
    })

AddCategory和DeleteCat：

public ActionResult AddCategory(int id)
{
    Session.Category.Add(id);
    return Json(id, JsonRequestBehavior.AllowGet);
}

public ActionResult DeleteCat(int id)
{
    Session.Category.Remove(id);
    return Json(id, JsonRequestBehavior.AllowGet);
}

Answer 1

如果您直接在下拉列表中执行一个删除按钮，则更合乎逻辑且更容易遵循，使用和编程 - 即，在下拉列表中选择一个项目，然后单击删除以删除所选项目。

删除我刚刚使用Ajax-MVC3添加的元素（来自客户端和服务器）

1 个答案: