Как я могу вернуть результат JSON в Ajax.BeginForm

У меня есть эта простая форма:

@using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , 
                  null, 
                  new AjaxOptions() {  HttpMethod = "post", OnSuccess = "getresult" },
                  null))
{
    @Html.EditorFor(m => m)
    <hr />
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-info" value="Next" />
        </div>
    </div>
}

И, для тестирования, простой контроллер:

    [HttpPost]
    public JsonResult CreateProductFromAjaxForm(CreateProductModel model)
    {
        if (!ModelState.IsValid)
        {
            return new JsonResult()
            {
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                Data = new { result = "error" }
            };
        }

       //add to database

        return new JsonResult()
        {
            JsonRequestBehavior = JsonRequestBehavior.AllowGet,
            Data = new { result = "success"}
        };
    }

Я добавил их в Web.Config:

 <add key="ClientValidationEnabled" value="true" />
 <add key="UnobtrusiveJavaScriptEnabled" value="true" />

и это для моего пакета script:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.unobtrusive.js"
                    ));

После нажатия кнопки "Отправить" результирующая страница просто показывает:

{"result":"success"}

Я бы ожидал, что я смогу обработать результат в обработчике OnSuccess="getresult", но он не работает.

В основном я использую Ajax.BeginForm главным образом для проверки клиентов.

Можете ли вы сказать мне, что не так?

UPDATE: я добавил HttpMethod = "post" в AjaxOptions.

UPDATE: getresult, определяется выше Ajax.BeginForm следующим образом:

<script type="text/javascript">
    var getresult = function (data) {
        alert(data.result);
    };
</script>

Ответ 1

вам нужно включить jquery.unobtrusive-ajax.js файл.

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Ответ 2

JsonResult - это своего рода производный класс ActionResult, который указывает, что это действие вернет JSON вместо представления или что-то еще.

Например:

 @using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , null, 
              new AjaxOptions() {  OnSuccess = "getresult" }, null))

Это приведет к генерации элемента, который отправит запрос AJAX при отправке в действие. Для этого вам необходимо включить следующую страницу script на страницу:

Теперь все, что осталось, это написать эту функцию javascript onSuccess и обработать результаты JSON, возвращаемые сервером:

<script type="text/javascript">
var onSuccess = function(data) {
    alert(data.result);
};
</script

Ответ 3

на странице

new AjaxOptions() {  
    OnSuccess = "getresult", 
}

в javascript

function getresult(data){
   alert(data.x);
}

в С#

[HttpPost]
public ActionResult CreateProductFromAjaxForm(CreateProductModel model)
{
    if (!ModelState.IsValid)
    {
        return Json("error", JsonRequestBehavior.AllowGet);
    }

   //add to database

    return Json(model, JsonRequestBehavior.AllowGet);
}

Ответ 4

Попробуйте указать метод HTTP:

new AjaxOptions() {  
    OnSuccess = "getresult", 
    HttpMethod = "post" 
}

Пример:

@using (Ajax.BeginForm("CreateProductFromAjaxForm", "Product" , null, new AjaxOptions() {  OnSuccess = "getresult", HttpMethod = "post" }, null))
{
    ....
}

Ответ 5

Я столкнулся с той же проблемой с моим проектом. Проблема в том, что библиотека Ajax не загружается. Когда я проверил свой bundleconfig и мой файл макета, у него действительно есть include, но я включаю абсолютное имя для библиотеки ajax, например

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
"~/Scripts/jquery.unobtrusive-ajax.min.js"));

Мой друг попросил меня использовать дикую карточку. Как ни странно bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include("~/Scripts/jquery.unobtrusive-ajax*")); начал включать в себя библиотеку ajax.

Теперь мои функции OnSuccess загружаются как ожидалось, а не смотрят на пустой экран с ответом json на нем.

Ответ 6

Вместо:

var getresult = function (data) {
    alert(data.result);
};

Try

function getresult(data) {
    alert(data.result);
};