ASP.NET metoda MVC ActionLink i post

Jeśli używasz ASP MVC3 możesz użyć Ajax.ActionLink (), która pozwala określić metodę HTTP, którą można ustawić na "POST".

Możesz użyć jQuery, aby zrobić POST dla wszystkich przycisków. Po prostu daj im tę samą nazwę klasy CssClass.

Użyj "return false;" na końcu zdarzenia onclick javascript, jeśli chcesz zrobić przekierowanie po stronie serwera po postie, w przeciwnym razie po prostu zwróć widok.

Kod Razora

@using (Html.BeginForm())
{
    @Html.HiddenFor(model => model.ID) 
    @Html.ActionLink("Save", "SaveAction", "MainController", null, new { @class = "saveButton", onclick = "return false;" })
}

Kod JQuery

$(document).ready(function () {
        $('.saveButton').click(function () {
            $(this).closest('form')[0].submit();
        });
    });

C #

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveAction(SaveViewModel model)
{
    // Save code here...

    return RedirectToAction("Index");
    //return View(model);
}

@Aidos miał prawidłową odpowiedź, chciałem tylko wyjaśnić, ponieważ jest ukryta w komentarzu do jego postu autorstwa @CodingWithSpike.

@Ajax.ActionLink("Delete", "Delete", new { id = item.ApkModelId }, new AjaxOptions { HttpMethod = "POST" })

Tutaj była odpowiedź ASP.NET projekt MVC 5 uważam, że ładnie realizuje moje cele stylizacji w interfejsie użytkownika. Formularz wyślij za pomocą czystego javascript do niektórych zawierających formularz.

@using (Html.BeginForm("Logout", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
   <a href="javascript:document.getElementById('logoutForm').submit()">
      <span>Sign out</span>
   </a>
}

W pełni pokazany przypadek użycia to rozwijana lista wylogowania na pasku nawigacyjnym aplikacji internetowej.

@using (Html.BeginForm("Logout", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
    @Html.AntiForgeryToken()

    <div class="dropdown">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="ma-nav-text ma-account-name">@User.Identity.Name</span>
            <i class="material-icons md-36 text-inverse">person</i>
        </button>

        <ul class="dropdown-menu dropdown-menu-right ma-dropdown-tray">
            <li>
                <a href="javascript:document.getElementById('logoutForm').submit()">
                    <i class="material-icons">system_update_alt</i>
                    <span>Sign out</span>
                </a>
            </li>
        </ul>
    </div>
}

ActionLink nigdy nie odpali posta. Zawsze wywołuje żądanie GET.

Użyj poniższego wywołania linku akcji:

<%= Html.ActionLink("Click Here" , "ActionName","ContorllerName" )%>

Do przesyłania wartości formularza należy użyć:

 <% using (Html.BeginForm("CustomerSearchResults", "Customer"))
   { %>
      <input type="text" id="Name" />
      <input type="submit" class="dASButton" value="Submit" />
   <% } %>

Prześle dane do Administratora klienta i CustomerSearchResults akcji.

Użyj tego linku wewnątrz Ajax.BeginForm

@Html.ActionLink(
    "Save", 
    "SaveAction", 
    null, 
    null, 
    onclick = "$(this).parents('form').attr('action', $(this).attr('href'));$(this).parents('form').submit();return false;" })

;)

Moje rozwiązanie tego problemu jest dość proste. Mam stronę, która przeszukuje klienta jeden po całym e-mailu, a drugi po części, częściowy ciągnie i wyświetla listę lista ma link akcji, który wskazuje na actionresult o nazwie GetByID i przechodzi w id

GetByID pobiera dane dla wybranego klienta, a następnie zwraca

return View("Index", model); 

Czyli metoda post

To był dla mnie trudny problem do rozwiązania. Jak zbudować dynamiczne łącze w razor i html, które może wywołać metodę akcji i przekazać wartość lub wartości do określonej metody akcji? Rozważałem kilka opcji, w tym Niestandardowy helper html. Właśnie wymyśliłem proste i eleganckie rozwiązanie.

Widok

@model IEnumerable<MyMvcApp.Models.Product>

@using (Html.BeginForm()) {

     <table>
         <thead>
             <tr>
                 <td>Name</td>
                 <td>Price</td>
                 <td>Quantity</td>
            </tr>
        </thead>
        @foreach (Product p in Model.Products)
        {
            <tr>
                <td><a href="@Url.Action("Edit", "Product", p)">@p.Name</a></td>
                <td>@p.Price.ToString()</td>
                <td>@p.Quantity.ToString()</td>
            </tr>
         }
    </table>
}

Metoda działania

public ViewResult Edit(Product prod)
{
    ContextDB contextDB = new ContextDB();

    Product product = contextDB.Products.Single(p => p.ProductID == prod.ProductId);

    product = prod;

    contextDB.SaveChanges();

    return View("Edit");
}

Chodzi o ten adres Url.Akcja nie obchodzi, czy metoda akcji to GET czy POST. Będzie dostęp każdy rodzaj metody. Możesz przekazać swoje dane do metody akcji za pomocą

@Url.Action(string actionName, string controllerName, object routeValues)

Obiekt routeValues. Próbowałem tego i działa. Nie, technicznie nie robisz postu ani nie przesyłasz formularza, ale jeśli obiekt routeValues zawiera Twoje dane, nie ma znaczenia, czy jest to post czy get. Aby wybrać właściwą metodę, można użyć podpisu określonej metody akcji.

To jest moje rozwiązanie problemu. Jest to kontroler z 2 metodami działania

public class FeedbackController : Controller
{
public ActionResult Index()
{
   var feedbacks =dataFromSomeSource.getData;
   return View(feedbacks);
}

[System.Web.Mvc.HttpDelete]
[System.Web.Mvc.Authorize(Roles = "admin")]
public ActionResult Delete([FromBody]int id)
{
   return RedirectToAction("Index");
}
}

W widoku renderuję construct następującą strukturę.

<html>
..
<script src="~/Scripts/bootbox.min.js"></script>
<script>
function confirmDelete(id) {
  bootbox.confirm('@Resources.Resource.AreYouSure', function(result) {
    if (result) {
      document.getElementById('idField').value = id;
      document.getElementById('myForm').submit();
    }
  }.bind(this));
}
</script>

@using (Html.BeginForm("Delete", "Feedback", FormMethod.Post, new { id = "myForm" }))
{
  @Html.HttpMethodOverride(HttpVerbs.Delete)
  @Html.Hidden("id",null,new{id="idField"})
  foreach (var feedback in @Model)
  {
   if (User.Identity.IsAuthenticated && User.IsInRole("admin"))
   {
    @Html.ActionLink("Delete Item", "", new { id = @feedback.Id }, new { onClick = "confirmDelete("+feedback.Id+");return false;" })
   }
  }
...
</html>

Punkt zainteresowania w widoku Razor :

1. Funkcja JavaScript confirmDelete(id) wywoływana po kliknięciu linku wygenerowanego za pomocą @Html.ActionLink;

2. confirmDelete() funkcja wymagała identyfikatora klikanego elementu. Ta pozycja jest przekazywana z onClick handler confirmDelete("+feedback.Id+");return false; zwróć uwagę handler zwraca false do zapobiegaj domyślnej akcji-czyli żądaniu get do celu. OnClick Zdarzenie dla przycisków może być dołączone jQuery dla wszystkich przycisków na liście jako alternatywa(prawdopodobnie będzie jeszcze lepiej, ponieważ będzie mniej tekstu na stronie HTML, a dane mogą być przekazywane przez atrybut data-).

3. Forma ma id=myForm, aby znaleźć ją w confirmDelete().

4. Forma zawiera @Html.HttpMethodOverride(HttpVerbs.Delete) w celu użycia czasownika HttpDelete, jako działanie oznaczone HttpDeleteAttribute.

5. W JS funkcja używam potwierdzenia akcji (przy pomocy zewnętrznej wtyczki, ale standard confirm również działa dobrze. Nie zapomnij użyć bind() w call back lub var that=this (cokolwiek wolisz).

6. Forma ma ukryty element z id='idField' i name='id'. Tak więc przed wysłaniem formularza po potwierdzeniu (result==true), wartość ukrytego elementu jest ustawiona na wartość przekazywana argument i przeglądarka prześle dane do kontrolera w następujący sposób:

Request URL : http://localhost:38874/Feedback/Delete

metoda zapytania : kod statusu postu: 302 znaleziono

Nagłówki Odpowiedzi

Lokalizacja: / Feedback Host:localhost:38874 Dane formularza x-HTTP-Method-Override:DELETE id: 5

Jak widzisz jest to POST request Z X-HTTP-Method-Override: DELETE i data in body set to "id: 5". Odpowiedź ma kod 302, który przekierowuje do akcji Index, przez to odświeżasz ekran po usunięciu.

Aby pisać posty musisz podać dane formularza. Nie sądzę, że jest to możliwe, aby to zrobić z ActionLink. Sprawdź ten link .

Polecam pozostać czystym, aby odpocząć i używać HTTP delete do usuwania. Niestety Specyfikacja HTML ma tylko HTTP Get & Post. Znacznik może dostać tylko HTTP. Znacznik formularza może wykonać HTTP Get lub Post. Na szczęście jeśli używasz ajax można zrobić HTTP Delete i to jest to, co polecam. Szczegóły znajdziesz w poniższym poście: Http usuwa

Zrobiłem ten sam problem używając następującego kodu:

@using (Html.BeginForm("Delete", "Admin"))
{
       @Html.Hidden("ProductID", item.ProductID)
       <input type="submit" value="Delete" />
}

Wywołanie $.post() nie będzie działać, ponieważ jest oparta na Ajaxie. W tym celu należy więc zastosować metodę hybrydową.

Poniżej znajduje się rozwiązanie, które działa dla mnie.

Kroki: 1. Utwórz adres URL dla href, który wywoła metodę a z adresem url i parametrem 2. Wywołanie zwykłego posta przy użyciu metody JavaScript

Rozwiązanie:

W .cshtml:

<a href="javascript:(function(){$.postGo( '@Url.Action("View")', { 'id': @receipt.ReceiptId  } );})()">View</a>

Uwaga: metoda anonimowa powinna być owinięta w (....)() tj.

(function() {
    //code...
})();

PostGo definiuje się jako poniżej w JavaScript. Odpoczynek jest prosty..

@Url.Action ("Widok") tworzy adres url dla wywołania

{ 'id': @ Paragon.ReceiptId } wytworzy parametry jako obiekt, który w metodzie postGo jest z kolei konwertowany na pola POST. Może to być dowolny parametr, jakiego potrzebujesz

W JavaScript:

(function ($) {
    $.extend({
        getGo: function (url, params) {
            document.location = url + '?' + $.param(params);
        },
        postGo: function (url, params) {
            var $form = $("<form>")
                .attr("method", "post")
                .attr("action", url);
            $.each(params, function (name, value) {
                $("<input type='hidden'>")
                    .attr("name", name)
                    .attr("value", value)
                    .appendTo($form);
            });
            $form.appendTo("body");
            $form.submit();
        }
    });
})(jQuery);

Referencyjne adresy URL, których użyłem dla postGo

Non-ajax GET / POST using jQuery (plugin?)

Http://nuonical.com/jquery-postgo-plugin/

jQuery.post() będzie działać, jeśli masz niestandardowe dane. Jeśli chcesz opublikować istniejący formularz, jest łatwiejszy w użyciu ajaxSubmit().

I nie musisz konfigurować tego kodu w samym ActionLink, ponieważ możesz dołączyć obsługę dowiązań w zdarzeniu document.ready() (Które i tak jest preferowaną metodą), na przykład używając $(function(){ ... }) jQuery trick.

Natknąłem się na tę potrzebę zamieszczenia ze strony wyszukiwania (indeksu)na stronę wyników. Nie potrzebowałem tak dużo, jak stwierdził @ Vitaliy, ale wskazało mi to właściwy kierunek. Wszystko co musiałem zrobić to:

@using (Html.BeginForm("Result", "Search", FormMethod.Post)) {
  <div class="row">
    <div class="col-md-4">
      <div class="field">Search Term:</div>
      <input id="k" name="k" type="text" placeholder="Search" />
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-md-12">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
}

Mój Kontroler miał następującą metodę podpisu:

[HttpPost]
public async Task<ActionResult> Result(string k)