ASP.NET MVC ActionLink ve post yöntemi


98

Biri bana ActionLink ve POST yöntemini kullanarak Controller'a nasıl değer gönderebileceğimi söyleyebilir mi?
Düğmeleri kullanmak istemiyorum.
Sanırım jquery ile ilgili bir şey var.


1
Html.ActionLink'e benzer bir yöntem yazdım, sadece Gönder butonu ile POST Formu oluşturuyor. Bakacağım, butonu formu gönderen bağlantı ile değiştirme seçeneği verebilir miyim? Buraya bakın: stackoverflow.com/questions/3449807/…
nikib3ro

Yanıtlar:


58

Bir kullanamazsınız ActionLinkbu sadece bir çapa kılmaktadır, çünkü <a>etiketi.
Bir jQuery AJAX gönderisi kullanabilirsiniz .
Ya da jQuery ile veya jQuery olmadan (AJAX olmayan) formun gönderme yöntemini çağırın, belki de onclickherhangi bir denetim sizi ilgilendirirse.


71

ASP MVC3 kullanıyorsanız, "POST" olarak ayarlayabileceğiniz bir HTTP Yöntemi belirtmenize olanak tanıyan bir Ajax.ActionLink () kullanabilirsiniz.


46
Bunun çalışması için ajax javascript dosyalarından birini eklemeniz gerekeceğini unutmayın, örneğin " jquery.unobtrusive-ajax.min.js". Aksi takdirde, tıklandığında POST yerine GET yapmaya devam edecektir. Bağlantıyı yapmak için sözdizimi şöyle olacaktır:@Ajax.ActionLink("Delete", "Delete", new { id = item.Id }, new AjaxOptions {HttpMethod = "POST"})
CodingWithSpike

1
göze batmayan ajax iyi çalıştı ANCAK eylem bağlantısını biraz farklı kullanmak zorunda kaldım, bu AjaxOptions nesnesi yerine bir Dictionary'yi parametre olarak iletmek zorunda kaldım : stackoverflow.com/a/10657891/429521 Ayrıca, ajax özelliklerini el ile iletmek zorunda kaldım JS, tıklama olaylarını yakalayabilir ve geçersiz kılabilirdi "data-ajax"="true, "data-ajax-url"=<your link> and "data-ajax-method"="Post". Btw, ASP.NET MVC 3 kullanıyorum
Felipe Sabino

1
@CokoBW Bu bir stackoverflow.com/questions/10507737/… ? Gerçekten mi? Benim için kırılmış görünmüyor ...
Felipe Sabino

21

Tüm düğmeleriniz için bir POST yapmak için jQuery'yi kullanabilirsiniz. Onlara aynı CssClass adını verin.

"Return false" kullanın onclick javascript etkinliğinizin sonunda, gönderiden sonra bir sunucu tarafı RedirectToAction yapmak istiyorsanız, aksi takdirde sadece görünümü geri döndürün.

Razor Kodu

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

JQuery Kodu

$(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);
}

@ goodies4uall Indeed, ve bu cevap tam da bunu yapıyor. :) CSS sınıfının adı "saveButton" (belki yanıltıcı bir ad olabilir), ancak eylemi başlatmak için bir bağlantı etiketi kullanılıyor
Savantes

18

@Aidos doğru cevaba sahipti, sadece @CodingWithSpike tarafından yapılan gönderisine yapılan bir yorumun içinde gizlendiği için bunu netleştirmek istedi.

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

7

Burada, varsayılan ASP.NET MVC 5 projesine eklenen bir cevap vardı. Bunun, UI'de stil hedeflerimi güzelce gerçekleştirdiğine inanıyorum. Form, saf javascript kullanarak içeren bir forma gönderin.

@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>
}

Tam olarak gösterilen kullanım örneği, bir web uygulamasının gezinme çubuğundaki bir çıkış açılır listesidir.

@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>
}


2

Aşağıdaki Eylem Bağlantısını Arayın:

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

Form değerlerini göndermek için şunu kullanın:

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

Verileri Müşteri Kontrolörüne ve Müşteri Arama Sonuçları Eylemine sunacaktır.


1

Bu bağlantıyı Ajax.BeginForm içinde kullanın

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

;)


1

Bu soruna Benim Çözümüm oldukça basit. Bir müşterinin tek tek tüm e-postayla diğerini kısmen aradığı bir sayfam var, kısmi liste çeker ve listenin GetByID adlı bir eylem sonucuna işaret eden bir eylem bağlantısına sahip bir listeyi görüntüler ve kimliği geçer

GetByID, seçilen müşteri için verileri çeker ve ardından geri döner

return View("Index", model); 

hangi gönderi yöntemi


1

Bu benim için çözmesi zor bir problemdi. Razor ve html'de bir eylem yöntemini çağırabilen ve belirli bir eylem yöntemine bir değer veya değerler iletebilen dinamik bir bağlantıyı nasıl oluşturabilirim? Özel bir html yardımcısı da dahil olmak üzere birkaç seçeneği düşündüm. Basit ve zarif bir çözüm buldum.

Görünüm

@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>
}

Eylem yöntemi

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");
}

Buradaki nokta, Url.Action'ın eylem yönteminin GET mi yoksa POST mu olduğunu umursamamasıdır. Her iki yöntem türüne de erişecektir. Verilerinizi kullanarak eylem yöntemine aktarabilirsiniz.

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

routeValues ​​nesnesi. Bunu denedim ve işe yarıyor. Hayır, teknik olarak bir gönderi yapmıyorsunuz veya formu göndermiyorsunuz, ancak routeValues ​​nesnesi verilerinizi içeriyorsa, bunun bir gönderi veya alma olması farketmez. Doğru yöntemi seçmek için belirli bir eylem yöntemi imzası kullanabilirsiniz.


1
Örneğinizi denedim ve tarayıcınız GET'i sunucuya gönderiyor, hatta formun Post türü olsa bile. Denetleyicide actionMethod [HttpPost] özniteliğine sahipse, rota bulunamadığı için isteği başarısız olur.
Vitaliy Markitanov

1

Aşağıdaki kodu kullanarak aynı sorunu yaptım:

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

Sayfada çok sayıda öğeniz varsa, bunların her birini forma sarmalısınız ve sonuç olarak birçok form oluşturulacaktır. Ayrıca <input type = submit> düğmeyi oluşturur, bağlantıyı değil.
Vitaliy Markitanov

@VitaliyMarkitanov jQuery ajax kullanmanızı öneriyor musunuz?
isxaker

Bu konudaki yazıma bakın, çözümümü orada anlattım.
Vitaliy Markitanov

MVC örnek projesinde, bu onların da yaptığı şeydir
Maya

1

Sorun için bu benim çözümüm. Bu, 2 eylem yöntemine sahip denetleyicidir

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");
}
}

Görünümde yapıyı aşağıdaki yapıyı oluşturuyorum.

<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>

Razor View'da ilgi çekici nokta :

  1. İle confirmDelete(id)oluşturulan bağlantı @Html.ActionLinktıklandığında çağrılan JavaScript işlevi ;

  2. confirmDelete()işlev, tıklanan öğenin kimliği gerekli. Bu öğe onClickişleyiciden iletildi confirmDelete("+feedback.Id+");return false;Dikkat edin işleyici, varsayılan eylemi önlemek için false değerini döndürür - bu, hedefe yönelik isteği alır. OnClickAlternatif olarak listedeki tüm düğmeler için jQuery ile düğmeler için olay eklenebilir (HTML sayfasında daha az metin olacağı ve data-öznitelik yoluyla veri aktarılabileceği için muhtemelen daha da iyi olacaktır ).

  3. Formda id=myFormbulabilmek için var confirmDelete().

  4. Form, ile işaretlenmiş eylem olarak fiili @Html.HttpMethodOverride(HttpVerbs.Delete)kullanmak için içerir .HttpDeleteHttpDeleteAttribute

  5. JS işlevinde eylem onayı kullanıyorum (harici eklentinin yardımıyla, ancak standart onayla da iyi çalışıyor. bind()Geri aramada veya var that=this(ne tercih ederseniz) kullanmayı unutmayın .

  6. Formu ile gizli bir elemanı vardır id='idField've name='id'. Bu nedenle, onay ( result==true) sonrasında form gönderilmeden önce, gizli öğenin değeri geçirilen değere ayarlanır ve tarayıcı verileri şu şekilde denetleyiciye gönderir:

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

İstek Yöntemi : POST Durum Kodu: 302 Bulundu

Yanıt Başlıkları

Konum: / Geri Bildirim Ana Bilgisayarı: localhost: 38874 Form Verileri X-HTTP-Yöntemi-Geçersiz Kılma: DELETE id: 5

Gördüğünüz gibi, X-HTTP-Method-Override: DELETE ile POST isteği ve gövdedeki veriler "id: 5" olarak ayarlanmış. Yanıt, Dizin eylemine yönlendiren 302 koduna sahiptir, bu sayede sildikten sonra ekranınızı yenilersiniz.


1

Bu, MVC örnek projesinden alınmıştır.

@if (ViewBag.ShowRemoveButton)
      {
         using (Html.BeginForm("RemoveLogin", "Manage"))
           {
              @Html.AntiForgeryToken()
                  <div>
                     @Html.Hidden("company_name", account)
                     @Html.Hidden("returnUrl", Model.returnUrl)
                     <input type="submit" class="btn btn-default" value="Remove" title="Remove your email address from @account" />
                  </div>
            }
        }

0

REST ilkelerine sadık kalmanızı ve silmeleriniz için bir HTTP silme kullanmanızı tavsiye ederim. Maalesef HTML Özelliklerinde yalnızca HTTP Al ve Gönder var. Bir etiket yalnızca bir HTTP Alabilir. Bir form etiketi, bir HTTP Alabilir veya Gönderebilir. Neyse ki ajax kullanıyorsanız, HTTP Silme işlemi yapabilirsiniz ve bunu tavsiye ederim. Ayrıntılar için aşağıdaki gönderiye bakın: Http Siliniyor


0

Ajax tabanlı olduğu için $ .post () çağrısı çalışmaz. Dolayısıyla bu amaç için hibrit bir yöntemin kullanılması gerekiyor.

Benim için çalışan çözüm aşağıdadır.

Adımlar: 1. href için url ve parametre ile a yöntemi çağıran URL oluşturun 2. JavaScript yöntemini kullanarak normal POST'u çağırın

Çözüm:

.Cshtml olarak:

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

Not: anonim yöntem (....) () içine sarılmalıdır yani

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

postGo , JavaScript'te aşağıdaki gibi tanımlanır. Gerisi basit ..

@ Url.Action ("Görünüm") çağrı için url oluşturur

{'id': @ Receipt.ReceiptId} , postGo yönteminde POST alanlarına dönüştürülen nesne olarak parametreler oluşturur. Bu, istediğiniz herhangi bir parametre olabilir

JavaScript'te:

(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);

PostGo için kullandığım referans URL'ler

JQuery (eklenti?) Kullanarak ajax dışı GET / POST

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


0

jQuery.post()özel verileriniz varsa çalışacaktır. Mevcut formu göndermek istiyorsanız, kullanımı daha kolaydır ajaxSubmit().

Ve bu kodu ActionLinkkendi içinde kurmanız gerekmez , çünkü document.ready()(zaten tercih edilen bir yöntem olan) olaya bağlantı işleyicisi ekleyebilirsiniz , örneğin $(function(){ ... })jQuery hilesini kullanarak .


0

Bu ihtiyaç bir Arama (Dizin) sayfasından Sonuç sayfasına POST'a geldi. @Vitaliy'nin belirttiği kadar ihtiyacım olmadı ama beni doğru yönde gösterdi. Tek yapmam gereken şuydu:

@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>
}

Denetleyicim aşağıdaki imza yöntemine sahipti:

[HttpPost]
public async Task<ActionResult> Result(string k)
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.