Question

我需要使用jquery创建一个带按钮类的Ajax.ActionLink。

我使用ActionLinks作为标签云，我可以填充它并删除旧标签，但我无法弄清楚如何添加附加了相同ajax的新标签。

这是我的Ajax.ActionLink：

<div name="TagsDiv" id="TagsDiv" >
@foreach (var tagItem in Model.Tags)
{
@Ajax.ActionLink(tagItem.Name, "DeleteTag", "Tag",
new { GameID = Model.Id, tagValue = tagItem.Name },
new AjaxOptions { HttpMethod = "Post" },
new { @class = "btn removeTag", @style= "margin: 10px"})
}

我使用以下表单制作新标签：

@using (Ajax.BeginForm("CreateTagItem", "Tag", null, new AjaxOptions { HttpMethod = "Post" }))
        {
                <input type="hidden" value="@Model.Id" name="currentGameId" id="currentGameId" />
                <input class="form-control has-success col-md-6" name="newTag" id="newTag" type="text" placeholder="Type new tag value here" data-val-required="field is required" data-val="true" value=""/>
                <button class="btn btn-success add" id="addNewTag" href="#TagsDiv" data-id="@Model.Id" data-url="@Url.Action("CreateDeletableTag", "Tag")" type="submit">Add New Tag</button>
            }

我将排除控制器方法和其他服务。

我可以在我的数据库中成功创建标签，并使用以下jquery + ajax将。部分视图添加到标签云：

@*createtag view jquery+ajax*@
<script type="text/javascript">
    $(document).ready(function() {
        $("#addNewTag").on('click', function (e) {
            var _self = $(this);
            var dataUrl = _self.data('url');
            var gamei = _self.data('id');
            var tagval = $("#newTag").val();
            $.ajax({
                type: 'GET',
                url: dataUrl,
                cache: false,
                data: { GameID: gamei, tagValue: tagval },
                success: function(e) {
                    var content = [];
                    content.push(e);

                    $('#TagsDiv').append(content.join(''));
                },
                error: function() {}
            });
            return;
        });
    });

部分视图仅包含本文开头的Ajax.Action链接。

我使用简单的jquery在点击时删除标签，但它似乎不适用于部分视图。

$(".removeTag").click(function(e) {
        $(e.target).remove();
    });

Answer 1

干净的方法，没有Ajax.ActionLink html帮助器。您将编写jquery代码以删除和添加新项目。您将完全控制要执行的代码。

<div id="TagsDiv">
@foreach (var tagItem in Model.Tags)
{
    <div>
          @tagItem.Name - @Html.ActionLink("Remove", "RemoveTag", 
                  "Home", new { @id = tagItem.Id,gameId=Model.EventId  }, 
                        new { @class = "removeMe" })
    </div>   

}
</div>
<div>
    <input type="text" id="newTag"/>
    <input type="button" data-id="@Model.Id" data-url="@Url.Action("CreateTag")" 
                                                                             id="addTag"/>
</div>

这将渲染div中的所有标记以及与其关联的删除链接以及用于创建新标记的输入字段。

现在让我们添加一些js代码来添加新标记，并在用户点击删除链接时删除标记。

$(function() {    
    $(document).on("click", "a.removeMe", function(e) {
        e.preventDefault();
        var _self = $(this);
        $.post(_self.attr("href"), function(res) {
            if (res.Status === "success") {
                _self.closest("div").remove();
            }
        })
    });

    $("#addTag").click(function(e) {
        e.preventDefault();
        var _self = $(this);    
        var dataUrl = _self.data('url');
        var gamei = _self.data('id');
        var tagval = $("#newTag").val();
        $.ajax({
            type: 'POST',
            url: dataUrl,
            cache: false,
            data: { GameID: gamei, tagValue: tagval },
            success: function(r) {
                if (r.Status === "success") {
                    //Build markup for new tag
                    var newItem = $("<div>" + tagval +
                        "-<a href='@Url.Action("RemoveTag", "Home")?id=" + r.TagId + 
                                  "&gameId=@Model.Id' class='removeMe'>Remove</a></div>");
                    $('#TagsDiv').append(newItem);
                }

            },
            error: function() {}
        });

    });
});

这假设你的Action方法像这样返回Json数据

[HttpPost]
public ActionResult RemoveTag(int id,int gameId)
{
    // to do  : remove from db
    return Json(new { Status = "success" });
}
[HttpPost]
public ActionResult CreateTag(int GameID,string tagValue)
{
    //to do : Save to db
    // replace 34 with the newly created Tag Id
    return Json(new {Status = "success", TagId = 34});        
}

如果您不想在javascript代码中构建html标记，则可能会返回具有标记项标记的部分视图（具有删除操作链接）

如何使用JQuery添加带有类按钮的Ajax.ActionLink？

1 个答案: