Вызов действия с использованием jquery ajax - PullRequest
Новая
       3

Вызов действия с использованием jquery ajax

0 голосов
/ 06 сентября 2010

Я использую ASP.NET MVC 2. У меня есть модальное диалоговое окно (через jquery UI), которое содержит два текстовых поля и кнопку.Все элементы управления находятся внутри формы.

Я хотел бы вызвать, когда пользователь нажимает кнопку, действие контроллера, которое выполняет некоторые операции над переданными данными, содержащимися в двух текстовых полях, а затем возвращает целочисленное значение.и строковое сообщение для пользователя.

Кто-нибудь может привести пример для этого с помощью jquery?

Большое спасибо!

Ответы [ 2 ]

3 голосов
/ 06 сентября 2010

предположим, что у вас есть следующая форма: 

<form id="ajax-form">
    <fieldset>
        <input type="text" id="firstname" name="firstname" />   
        <input type="text" id="lastname" name="lastname" />
        <input type="submit" value="send" />
    </fieldset>
</form>

с использованием jQuery 

$(document).ready(function(){ 
$("#ajax-form").submit(function(){ 

    $.ajax({
            type: "POST",
            url: "Person/Add",
            data: $("#ajax-form").serialize(),
            success: function (response) {
                // whatever you want to happen on success
            },
            error: function (response) {
                    alert('There was an error.');
                }
        });

});

});

Доступ к вашим данным в методе действия. 

public ActionResult Add(FormCollection form)
{
    string firstname  = form["firstname"];
    string firstname  = form["lastname"];
    // do whatever you want here
    // then return something to the view
    return Json(/*some object*/);
}

Другой способ - использовать Microsoft Ajax 

<% using (Ajax.BeginForm("Add", "Person", 
            new AjaxOptions() { 
                               UpdateTargetId = "formDiv", 
                               InsertionMode = InsertionMode.Replace, 
                               HttpMethod = "Post" }))   {%>

        <fieldset>

             // Form Elements Here.            

        </fieldset>

<% } %>

UpdateTargetId - это идентификатор html-элемента, на который нужно нацелиться. Опция InsertionMode имеет три значения Replace, InsertAfter, InsertBefore

Надеюсь, это было полезно

Обновление : вам не нужно возвращать результат Json в вашем методе действия, вы можете просто вернуть частичное представление или любой HTML-код в качестве объекта ответа и затем вставить его с помощью jQuery.

1 голос
/ 06 сентября 2010

Вы можете взглянуть на документацию о том, как можно реализовать диалог, содержащий поля формы. А когда нажата кнопка confirm, вы можете просто отправить запрос AJAX. 

buttons: {
    Confirm: function() {
        // read the value in the textbox
        var name = $('#name').val();

        // send an AJAX request to an action that will return JSON:
        $.getJSON('/home/foo', { name: name }, function(result) {
            // read the returned value
            alert(result.Value);
        });
    },
    Cancel: function() {
        $(this).dialog('close');
    }
}

И ваше действие контроллера: 

public ActionResult Foo(string name)
{
    return Json(new { Value = '123' }, JsonRequestBehavior.AllowGet);
}
...