0

我有一个 MVC 视图页面，强类型为枚举产品列表。每个列表项都有一个带有唯一 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;
    });

});

我知道必须有一个简单的解决方案。提前感谢您的帮助。

4

3 回答 3

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();" })
于 2013-06-29T18:40:28.810 回答
1

万一其他人需要上述解决方案......这太简单了。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;
});

});

于 2013-07-09T17:55:24.773 回答
0

检查这个：

$('.button_action').click(function (e) {
    e.preventDefault() // this prevent default behavior for hyperlink on 'click' event
于 2013-06-29T18:09:09.883 回答