Question

我有一个MVC View页面，强类型为枚举产品列表。每个列表项都有一个具有唯一ID的Html.ActionLink。在我的jquery文件中，我有一个$ .ajax函数，它应该处理带有相应id的链接。目的是在同一页面上加载具有该项目信息的部分视图，以允许编辑已单击的任何项目。我不希望操作者导致单独的页面，或者生成一个帖子到服务器。

//这里是MVC的东西

@model IEnumerable<SimpleAjax.Models.Product>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
              @Html.ActionLink("Edit", "ShowEdit", "Home", new { id=item.Id } ,new { id = "btnShowEdit" + item.Id, @class= ".button_action"})
       |

        </td>
    </tr>
}


<div id="showEditProd">
</div>

//inside controller
    public ActionResult ShowEdit(int id)
    {

        Product prod = db.Product.Find(id);

        ProductViewModel viewModel = new ProductViewModel
        {
            EditProduct = prod
        };

        return PartialView(viewModel);
    }

//inside a separate partial view page
@model SimpleAjax.Models.ProductViewModel


@using (Html.BeginForm("Index_AddItem", "Home", FormMethod.Post, new { id = "fid" }))
{
    <div>
        @Html.LabelFor(model => model.EditProduct.Name)
        @Html.EditorFor(model => model.EditProduct.Name)
    </div>

     <div>
        @Html.LabelFor(model => model.EditProduct.Price)
        @Html.EditorFor(model => model.EditProduct.Price)
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
}

当我有硬编码的ID时，

现在正如预期的那样工作：

    $('#btnShowEdit1,#btnShowEdit2,#btnShowEdit3').click(function () {

            $.ajax({
                url: this.href,
                contentType: 'application/html; charset=utf-8',
                type: 'GET',
                success: function (result) {

                    $('#showEditProd').html(result);
                }
            });
        return false;
    });

上面的jquery按照需要工作。部分视图与枚举列表加载在同一页面上。但显然我不想硬编码变量。我可能有x个#btnShowEdit。我想利用一堂课，对吗？所以我有“.button_action”类来枚举Id。但是，当我这样做时，如下所示，链接导航到单独的页面。

这些是单独的页面，而不是我想要的

$('.button_action').click(function (index) {

          $.ajax({
            url: this.href,
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            success: function (result) {

                $('#showEditProd').html(result);
            }
        });
        return false;
    });

});


//also tried this...

    $('.button_action').each(function (index) {


    $('#btnShowEdit' + index).click(function () {

        $.ajax({
            url: this.href,
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            success: function (result) {

                $('#showEditProd').html(result);
            }
        });
        return false;
    });

});

我知道必须有一个简单的解决方案。谢谢你的帮助。

Answer 1

不使用Ajax HTML-helper的任何特定原因？

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx

您可以将它用作动作链接，但它是异步完成的，结果可以放在您的showEditProd中。

@Ajax.ActionLink("Action", 
                 "Controller", 
                 _YOURID_, 
                 new AjaxOptions { HttpMethod = "GET", 
                 InsertionMode = InsertionMode.Replace, 
                 UpdateTargetId = "showEditProd", 
                 OnComplete = "your_js_function();" })

Answer 2

如果其他人需要上述解决方案......这太简单了。jquery ajax代码不需要来自Html.ActionLink的id htmlattribute。事实上，这个额外的属性是造成麻烦的原因。 jquery ajax识别来自“this.href”的id，因为它是路由控制器以及id参数。因此我从actionlink中的htmlattributes中删除了id。现在它按预期工作了。

@Html.ActionLink("Edit", "ShowEdit", "Home", new { id=item.Id } ,new { @class= ".button_action"})

在js文件中

$('.button_action').click(function (index) {

      $.ajax({
        url: this.href,
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        success: function (result) {

            $('#showEditProd').html(result);
        }
    });
    return false;
});

}）;

Answer 3

检查一下：

$('.button_action').click(function (e) {
    e.preventDefault() // this prevent default behavior for hyperlink on 'click' event

通过ajax在Html.ActionLink中传递ID以获取部分视图

3 个答案: