Рендеринг частичного представления с формой в Modal на Html.ActionLink нажмите

Question

У меня есть страница со столом, где каждая строка имеет ссылку «Переместить».

При нажатии на ссылку, я пытаюсь получить вызванный метод GET, который в свою очередь визуализирует вид _MoveReportPartial в модальном виде.

Как только пользователь делает выбор в модальном режиме, кнопка отправки должна отправить сообщение методу «Почта» контроллера.

Если я удаляю атрибут класса (move-modal) от Html.ActionLink(...), он фактически отключает файл js и игнорирует его. Затем он работает, открывая _MoveReportPartial в новом окне, а затем отправляя правильный метод, если пользователь нажимает кнопку submit.

Я пытаюсь открыть его в модальном режиме, но js У меня нет работы и маршрутизируется на метод POST вместо этого на кнопку «Переместить».

EDIT Почему .load Вызовите POST метод вместо GET? Как я могу изменить js? (Добавлено event.preventDefault();, по-прежнему наблюдается такое же поведение)

Ссылка движения по мнению инициирующего выглядит следующим образом:

<div class="d20 actionLink"> 
    @Html.ActionLink("Move", "MoveReport", "ReportsWeb", new {id = item.ReportDefinitionId, newReport = false}, new {@class = "move-modal"}) 
</div> 

У меня есть js файла:

$(function() { 
$('.move-modal').click(function() { 
    event.preventDefault(); 
    $('<div/>').appendTo('body').dialog({ 
     close: function (event, ui) { 
      dialog.remove(); 
     }, 
     modal: true 
    }).load(this.href, {}); 
}); 

});

Мой ReportsWebController выглядит следующим образом:

[HttpGet] 
public ActionResult MoveReport(Guid id, bool newReport) 
{ 
    //some code 

    return PartialView("_MoveReportPartial", model); 
} 

[HttpPost] 
public ActionResult MoveReport(MoveReportModel Model) 
{ 
    try 
    { 
     //some code 
    } 
    catch (Exception exc) 
    { 
     InternetReportingTrace.Source.WriteError(exc); 
     throw; 
    } 
    return RedirectToAction("ListReports"); 
} 

и мой _MoveReportPartial выглядит следующим образом:

<div id="dialog-confirm"> 
<div align="center"> 
    <h2>Please Confirm</h2>   
</div> 

@using (Html.BeginForm("MoveReport", "ReportsWeb", FormMethod.Post)) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 
    <div tabindex="-1" role="dialog"> 

     <div class="modal-content"> 
      <p>Report @Model.Report.Name with ID @Model.Report.ReportDefinitionId </p> 
      <p>Will be moved to:</p> 

      @for (int i = 0; i < Model.MoveOptions.Count; i++) 
      { 
       <div class="radio"> 
        <label><input type="radio" name="optradio">@Model.MoveOptions[i]</label> 
       </div> 
      } 
      <div> 
       <input type="submit" value="Move Report" /> 
      </div> 
     </div> 
    </div> 
} 

Answer 1

Я не думаю, что вы предотвращения поведения по умолчанию ActionLink должным образом.

Try:

$('.move-modal').click(function (event) { 
    event.preventDefault(); 
    $('<div/>').appendTo('body').dialog({ 
    close: function (event, ui) { 
     dialog.remove(); 
    }, 
    modal: true 
    }).load(this.href, {}); 
}); 

Потому что обработчик JQuery, вы можете использовать event.preventDefault() вместо return false;. Если обработчик вашего клика использует return false, чтобы предотвратить навигацию браузера, он открывает возможность того, что интерпретатор не достигнет оператора return, и браузер продолжит выполнение поведения якоря по умолчанию перед этой точкой. Использование event.preventDefault() в качестве первой строки в обработчике означает, что вы можете гарантировать, что поведение навигации по умолчанию не будет срабатывать.

Во-вторых, неправильный вызов метода .load.

Изменить

.load(this.href, {}); 

к

.load(this.href); 

документации на api.jquery.com/load состояний «Метод POST используется, если данные представлены в виде объекта, в противном случае, предполагается, GET «. Поскольку вы отправляете ему пустой объект, предполагается, что вы хотите использовать POST. Нет необходимости делать это.