Question

我在asp.net mvc应用程序的视图中有一个数据列表。这是一个库存清单，我在每行的末尾有两个图像（加号和减号），这样我就可以增加或减少库存数量。它目前工作正常，调用mvc动作，但由于列表很长，我想使用jQuery和AJAX让调用无需刷新。我想用不引人注目的javascript做这个，所以不要在我的图像上使用onclick处理程序。由于我刚刚开始使用jQuery，我不知道如何迭代所有图像并添加函数。以下是带有表单标签的图片：

<td>
            <% using (Html.BeginForm("Increase", "Stock", new { Id = item.StockId }))
               {%>
            <input type="image" src="/Content/Images/bullet_add.png" style="margin-left:20px;" />  <% } %>
             </td>
        <td><% using (Html.BeginForm("Decrease", "Stock", new { Id = item.StockId }))
               {%>
            <input type="image" src="/Content/Images/bullet_delete.png" style="margin-left:10px;" /><% } %>
        </td>

有人可以帮我一点吗？

Answer 1

我建议您使用jquery form plugin，它允许您不引人注意地ajaxify您的HTML表单。所以给出了这些形式：

<td>
    <% using (Html.BeginForm("Increase", "Stock", new { Id = item.StockId },
              FormMethod.Post, new { @class = "changeStock" })) { %>
        <input type="image" src="/Content/Images/bullet_add.png" style="margin-left:20px;" />
    <% } %>
</td>
<td>
    <% using (Html.BeginForm("Decrease", "Stock", new { Id = item.StockId },
              FormMethod.Post, new { @class = "changeStock" })) { %>
        <input type="image" src="/Content/Images/bullet_delete.png" style="margin-left:10px;" />
    <% } %>
</td>

你可以解释他们：

$(function() {
    // Ajaxify the forms having the changeStock class
    $('form.changeStock').ajaxForm(function(result) {
        // On the success callback update a container which holds 
        // the items in order to refresh the UI. For this the controller
        // actions you are posting to need to return PartialView with only
        // the parts of the html that needs to be updated.
        $('#listOfItems').html(result)
    });
});

Answer 2

这是未经测试的，但希望它可以让你朝着正确的方向前进。如果您能根据我的上述评论提供更多信息，我会更新我的答案。

$(document).ready(function(){
    //this will target all <input type='image'> controls for all forms on the page. A better practice would be to focus on just the target forms
    //  perhaps based on the ID of a containing div, etc
    $("form [input[@type=image]").click(function(){
        //$image is now a jQuery object variable referencing the clicked image
        var $image = $(this);

        //$form is now a jQuery object variable referencing the parent <form> of the clicked image
        var $form = $image.parent();

        //stockId is now a variable referencing the id of the form, assuming this is the stockID we want to manipulate
        var stockId = $form.attr("id"); 

        //probably a better way to do this, but to know if we want to go up or down, I checked the src attribute of the <input type='image'> control
        //if the url of the image contains add, the direction is add, else it's del
        var direction = $image.attr("src").contains("add") ? "add" : "del";

        //call a function to handle the add,del
        shiftStock(stockId, direction);
    });
});

//a javascript function that accepts the ID of the stock and the direction we want to go
function shiftStock(stockId, direction){

    //do an ajax call using jQuery, passing in our stockId and direction
    //I'm using a get, but and an XML return data Type, but this could just as easily be a post with json, etc
    $.ajax(
        type: "GET",
        url: "webserviceurl??",
        dataType: "XML",
        data: "stockId=" + stockId + "&direction=" + direction,
        success: function(xml){
            //parse the returned xml if need be to handle any UI updates, like new stock numbers, etc?
            alert(xml);
        },
        error: function(xml, error, status){
            alert(error);
        }
    );
}

jQuery Ajax调用列表上的按钮

2 个答案: