MVC 5 Ajax.BeginForm Кнопка «Отправить» вызывает текущую страницу вместо указанного URL контроллера и действия.

Question

Я пытаюсь использовать Ajax.BeginForm, чтобы я мог передать значение флажка в действие моего контроллера.

Я использовал @ Ajax.ActionLink, но я не могу получить значение недавно введенного флажка, поэтому я хочу использовать Ajax.BeginForm в дальнейшем.

Поскольку @ Ajax.ActionLink работает в представлении, я предполагаю, что Ajax работает правильно, поэтому я могу исключить это.

Вот несколько вариантов, которые я попробовал. При наведении курсора на кнопки они отображают URL-адрес моей веб-страницы вместо URL-адреса контроллера и действия. Когда я нажимаю на кнопки, страница в основном обновляется вместо вызова действия GetCode в контроллере PublicOffers.

Любая помощь очень ценится! Спасибо!

Вариант 1

<div>
    @using (Ajax.BeginForm("GetCode", "PublicOffers", null, new AjaxOptions()
    {
     UpdateTargetId = "detailsDiv",
     InsertionMode = InsertionMode.Replace,
     HttpMethod = "GET",
     OnBegin = "onStart",
     OnComplete = "onComplete",
     OnSuccess = "myCallback"
    }))
    {
     //bool checkedOption = false;
     //@Html.CheckBoxFor(x => checkedOption, new { Name = "OptIn" })

     @Html.CheckBoxFor(model => model.OptIn);
     @Html.HiddenFor(model => model.Id);

     <input type="submit" value="Get Code" class="button btn-primary" />
     }
</div>

Вариант 2

<div>    
   @using (Ajax.BeginForm(new AjaxOptions() 
   { HttpMethod = "GET", 
     Url = "PublicOffers/GetCode", 
     InsertionMode = InsertionMode.Replace, 
     UpdateTargetId = "detailsDiv", 
     OnBegin = "onStart", 
     OnComplete = "onComplete", 
     OnSuccess = "myCallback" 
   }))
   {
       //bool checkedOption = false;
       //@Html.CheckBoxFor(x => checkedOption, new { Name = "OptIn" })
       @Html.CheckBoxFor(model => model.OptIn)
       //@Html.HiddenFor(model => model.Id, new { Name = "OfferId" })
       @Html.HiddenFor(model => model.Id);
       @Html.AntiForgeryToken()

       <input type="submit" value="Submit" />
    }
</div>

Answer 1

Это не совсем ответ, но это может помочь.

Сначала убедитесь, что у вас это есть, я использую NuGet для его установки, Microsoft.jQuery.Unobtrusive.Ajax

Тогда убедитесь, чтоон отправляется на страницу, либо через пакетные сценарии, либо через ссылку на сценарий в cshtml

Сначала простая модель ...

namespace AjaxTest.Models
{
    public class AjaxTestModel
    {
        public bool OptIn { get; set; }

    }
}

Далее несколько cshtml ...

@model AjaxTest.Models.AjaxTestModel
@{ ViewBag.Title = "AjaxTest1";}
<h2>AjaxTest1</h2>
@using (Ajax.BeginForm("AjaxTest1", "Home", null,
    new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = "OnSuccess(xhr)",
        OnFailure = "OnFailure(xhr, status)"
    },
    new { id = "myform" }))
{
    @Html.CheckBoxFor(model => model.OptIn);
    <span id="lbl_message"></span>
    <br />
    <button id="btn_submit" type="submit" class="">Submit</button>
}
@section scripts{
    <script>
        $(document).ready(function () {
            console.log("ready to rock and roll....");
        });
        function OnBegin() {
            console.log("OnBegin");
        }
        function OnSuccess(xhr) {
            console.log("OnComplete");
            $("#lbl_message").text("Ok:" + xhr.responseJSON.param2);
        }
        function OnFailure(xhr, status) {
            console.log("OnFailure");
            $("#lbl_message").text("Error:" + xhr.responseJSON.param2);
        }
    </script>
}

Магия в контроллере, обратите внимание, что я возвращаю объект Json, а не представление.

public class HomeController : Controller
{
    public ActionResult AjaxTest1()
    {
        AjaxTestModel model = new AjaxTestModel();
        return View();
    }
    [HttpPost]
    public ActionResult AjaxTest1(AjaxTestModel model)
    {
        if (model.OptIn)
        {
            dynamic errorMessage = new { param1 = "param1", param2 = "You opted in." };
            HttpContext.Response.StatusCode = (int)HttpStatusCode.OK;
            return Json(errorMessage, JsonRequestBehavior.AllowGet);
        }
        else
        {
            dynamic errorMessage = new { param1 = "param1", param2 = "You opted out." };
            HttpContext.Response.StatusCode = (int)HttpStatusCode.NotFound;
            return Json(errorMessage, JsonRequestBehavior.AllowGet);
        }
    }
}

Обратите внимание, HttpContext.Response.StatusCode будет контролировать, какой активируется обратный вызов Ajax, возвращает HttpStatusCode.Ok и вызывается OnSuccess, возвращает HttpStatusCode.NotFound или почти любой другой код ошибки, а такжеOnFailure будет вызван.

Answer 2

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

ПРИМЕЧАНИЕ. Я изменил свой метод Get to Post, чтобы атрибут [ValidateAntiForgeryToken] работал в действии контроллера. Я читал, что это не будет работать с Get.

<div>
  @using (Ajax.BeginForm("GetCode", "PublicOffers", new { offerId = Model.Id }, new AjaxOptions()
  {
    //Nothing here, but for some reason without this code the Ajax.BeginForm below won't work                                        
  }))
  {
    //Nothing here, but for some reason without this code the Ajax.BeginForm below won't work    
  }
</div>

<div>
  @using (Ajax.BeginForm("GetCode", "PublicOffers", new { offerId = Model.Id },
    new AjaxOptions { OnBegin = "onStart", UpdateTargetId = "detailsDiv",
    InsertionMode = InsertionMode.Replace, HttpMethod = "Post",
    OnComplete = "onComplete",
    OnSuccess = "myCallback"},
    new { @style = "display:inline-block" }))
    {
      @Html.AntiForgeryToken()

      <div class="form-horizontal">
        <div class="form-group">
          @Html.CheckBoxFor(model => model.OptIn, new { Name = "optIn"})
        </div>
      </div>
       <input type="submit" class="button btn-primary" value="Get Code" id="get-code button" />
    }
</div>

Вот мое действие контроллера.

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> GetCode(Guid offerId, bool optIn = false)
{
  //Code here 

  return PartialView("_OfferCode");
}