JQuery - 通过JQuery触发MVC控制器动作的最佳方法是什么?

时间:2009-05-08 01:59:51

标签: jquery ajax

基本上,我在过滤栏中有几个单选按钮。例如,如果我在\ Catalog \ Flooring \ Harwood部分,我有[Area Rugs],[Carpet]& amp; [Stone&瓦]。那么,我想做什么,而不是在单选按钮下嵌入一个标签我想发起一个JQuery事件并定期发回服务器。我认为$ .post()应该这样做,但我没有让它正常工作。

PS:无论如何要在我的JS文件中嵌入/包含jquery-1.3.2-vsdoc.js文件,这样我才能获得完整的智能感知?

3 个答案:

答案 0 :(得分:1)

这是一个使用MVC控制器操作上下移动项目的ajax调用:

    [ActionName("item-reorder")]
    [AcceptVerbs(HttpVerbs.Post)]
    public string ItemReorder(Guid id, string direction)
    {
        ReorderDirection dir = (ReorderDirection)Enum.Parse(typeof(ReorderDirection), direction, true);
        int newSequence = this.WebServiceProxy.MoveItem(id, dir);
        if (newSequence >= 0)
            return ConfigurationManager.AppSettings["Ajax:Success"];
        else
            return ConfigurationManager.AppSettings["Ajax:Fail"];
    }

和javascript:

AjaxMoveItem: function(row, direction) {
    //get the id from the attribute
    var itemId = row.attr('itemId');
    //update server
    $.ajax({
        type: 'POST',
        url: '/item-reorder',
        //data: ({ id: itemId, direction: direction }), //didn't work .. vars passed as null
        data: ({ id: itemId, direction: direction }),
        success: function(responseText) {
            if (responseText == 'success') {

                alert('moved');
            } else {
                alert('error: ' + responseText);
            }
        },
        error: function() {
            alert('unknown error');
        }
    });
},

答案 1 :(得分:0)

你可以使用GET - 这将得到/ Catalog / Flooring / Harwood /

$(function() {
   $('input[type=radio]').click( function() {
       location.href = '<%= Url.Action( "Harwood", "Catalog/Flooring" ) %>' + '/' + $(this).val();
   });
});

<input type='radio' id='rugsRadio' name='typeRadio' value='AreaRugs' />
<input type='radio' id='carpetRadio' name='typeRadio' value='Carpet' />
...

或者您可以使用POST - 这将使用选定的typeRadio作为表单参数执行/ Catalog / Flooring / Harwood的帖子:

$(function() {
    $('input[name=typeRadio]').click( function() {
        $('form#typeForm').submit();
    });
});

<% using (Html.BeginForm("Flooring","Catalog", new { id = "Harwood" })) { %>
    <input type='radio' id='rugsRadio' name='typeRadio' value='AreaRugs' />
    <input type='radio' id='carpetRadio' name='typeRadio' value='Carpet' />
    ...
<% } %>

答案 2 :(得分:0)

初​​始化:

$(document).ready(function() {
    // Bind actions...
    $("#Navigation li[title]").live("click", function(e) { e.preventDefault; this.blur(); return updateNavigation($(this).attr('title')); });
    $("#ItemsPerPage").change(function(e) { return updatePaging(); });

    $('input[name=ProductType]').click(function() { return updateRadio(); });  //{ $('form#typeForm').submit(); });
    $(":checkbox").change(function(e) { return updateCheck(); });
});

回应ProductType单选按钮事件:

function updateRadio() {
    var productGroup = $("#valProductGroup").attr('title');
    var productType = $("input:radio[checked]").val();
    var url = "/Catalog/" + productGroup + "/" + productType;

    window.location = url;
    return false;
}

谢谢大家。