ASP.NET MVC ActionLink 및 게시 방법

누구든지 ActionLink 및 POST 방법을 사용하여 컨트롤러에 값을 제출하는 방법을 알려줄 수 있습니까?
버튼을 사용하고 싶지 않습니다.
jquery에 뭔가가 있다고 생각합니다.

ActionLink앵커 <a>태그를 렌더링하기 때문에을 사용할 수 없습니다 . jQuery AJAX 게시물을
사용할 수 있습니다 . 또는 jQuery (AJAX가 아닌)를 사용하거나 사용하지 않고 양식의 제출 메서드를 호출 할 수 있습니다 .
onclick

ASP MVC3를 사용하는 경우 Ajax.ActionLink ()를 사용하여 "POST"로 설정할 수있는 HTTP 메서드를 지정할 수 있습니다.

jQuery를 사용하여 모든 버튼에 대해 POST를 수행 할 수 있습니다. 동일한 CssClass 이름을 지정하십시오.

"return false"를 사용하십시오. onclick javascript 이벤트가 끝날 때 게시 후 서버 측 RedirectToAction을 수행하려는 경우 그렇지 않으면보기를 반환합니다.

Razor 코드

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

JQuery 코드

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

씨#

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

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

@Aidos는 @CodingWithSpike가 작성한 게시물에 대한 댓글 안에 숨겨져 있기 때문에 정답을 명확히하고 싶었습니다.

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

다음은 기본 ASP.NET MVC 5 프로젝트에 구워진 답변으로 UI에서 스타일링 목표를 훌륭하게 달성한다고 생각합니다. 순수한 자바 스크립트를 사용하여 일부 포함 양식에 양식 제출.

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

완전히 표시된 사용 사례는 웹 앱의 탐색 모음에있는 로그 아웃 드롭 다운입니다.

@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는 게시물을 실행하지 않습니다. 항상 GET 요청을 트리거합니다.

Call the Action 링크를 사용하십시오.

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

양식 값을 제출하려면 다음을 사용하십시오.

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

고객 컨트롤러 및 CustomerSearchResults 작업에 데이터를 제출합니다.

Ajax.BeginForm 내에서이 링크를 사용하십시오.

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

;)

이 문제에 대한 나의 해결책은 매우 간단합니다. 고객이 전체 이메일로 하나를 검색하고 다른 하나는 부분적으로 검색하는 페이지가 있습니다. 부분은 목록에 GetByID라는 작업 결과를 가리키는 작업 링크가 있고 ID를 전달하는 목록을 가져와 표시합니다.

GetByID는 선택한 고객에 대한 데이터를 가져온 다음

return View("Index", model); 

게시 방법입니다

이것은 제가 해결하기 어려운 문제였습니다. 작업 메서드를 호출하고 특정 작업 메서드에 값을 전달할 수있는 razor 및 html로 동적 링크를 구축하려면 어떻게해야합니까? 사용자 지정 html 도우미를 포함하여 몇 가지 옵션을 고려했습니다. 방금 간단하고 우아한 해결책을 생각해 냈습니다.

보기

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

행동 방법

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

여기서 요점은 Url.Action이 작업 메서드가 GET인지 POST인지 상관하지 않는다는 것입니다. 두 가지 유형의 방법에 액세스합니다. 다음을 사용하여 데이터를 작업 방법에 전달할 수 있습니다.

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

routeValues ​​객체. 나는 이것을 시도했고 작동합니다. 아니요, 기술적으로 게시물을 작성하거나 양식을 제출하는 것은 아니지만 routeValues ​​객체에 데이터가 포함되어있는 경우 게시물인지 가져 오기인지는 중요하지 않습니다. 특정 작업 방법 서명을 사용하여 올바른 방법을 선택할 수 있습니다.

다음 코드를 사용하여 동일한 문제를 수행했습니다.

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

이것이 문제에 대한 나의 해결책입니다. 2 가지 동작 방식을 가진 컨트롤러입니다.

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

View에서 구조를 따르는 구조를 렌더링합니다.

<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의 관심 지점 :

1. confirmDelete(id)생성 된 링크 @Html.ActionLink를 클릭하면 호출되는 자바 스크립트 함수

2. confirmDelete()클릭되는 항목의 기능이 필요합니다. 이 항목은 onClick핸들러 에서 전달됩니다. confirmDelete("+feedback.Id+");return false;주의 핸들러는 기본 동작 (대상에 대한 요청 가져 오기)을 방지하기 위해 false를 반환합니다. OnClick버튼에 대한 이벤트는 목록의 모든 버튼에 대해 jQuery로 첨부 할 수 있습니다 (HTML 페이지의 텍스트가 적고 data-속성을 통해 데이터를 전달할 수 있기 때문에 아마도 더 좋을 것입니다 ).

3. 양식은 id=myForm에서 찾을 수 있습니다 confirmDelete().

4. 형태는 동사 @Html.HttpMethodOverride(HttpVerbs.Delete)를 사용하기 위해 .HttpDeleteHttpDeleteAttribute

5. JS 함수에서 작업 확인을 사용합니다 (외부 플러그인의 도움으로하지만 표준 확인도 잘 작동합니다. bind()콜백 또는 var that=this(원하는대로) 에서 사용하는 것을 잊지 마십시오 ).

6. 양식에 숨겨진 요소를 가지고 id='idField'와 name='id'. 따라서 확인 ( result==true) 후 양식이 제출되기 전에 숨겨진 요소의 값이 값 전달 인수로 설정되고 브라우저는 다음과 같이 컨트롤러에 데이터를 제출합니다.

요청 URL :http://localhost:38874/Feedback/Delete

요청 방법 : POST 상태 코드 : 302 발견

응답 헤더

위치 : / 피드백 호스트 : localhost : 38874 양식 데이터 X-HTTP-Method-Override : DELETE ID : 5

보시다시피 X-HTTP-Method-Override : DELETE 및 본문의 데이터가 "id : 5"로 설정된 POST 요청입니다. 응답에는 색인 작업으로 리디렉션되는 302 코드가 있으며, 삭제 후 화면을 새로 고칩니다.

REST 원칙에 순수하게 유지하고 삭제를 위해 HTTP 삭제를 사용하는 것이 좋습니다. 불행히도 HTML 사양에는 HTTP Get & Post 만 있습니다. 태그는 HTTP Get 만 가능합니다. 양식 태그는 HTTP Get 또는 Post를 수행 할 수 있습니다. 다행스럽게도 ajax를 사용하는 경우 HTTP 삭제를 수행 할 수 있으며 이것이 제가 권장하는 것입니다. 자세한 내용은 다음 게시물을 참조하십시오. Http 삭제

$ .post () 호출은 Ajax 기반이므로 작동하지 않습니다. 따라서이 목적을 위해 하이브리드 방법을 사용해야합니다.

다음은 나를 위해 일하는 솔루션입니다.

단계 : 1. url과 매개 변수로 a 메소드를 호출하는 href에 대한 URL을 생성합니다. 2. JavaScript 메소드를 사용하여 일반 POST를 호출합니다.

해결책:

.cshtml에서 :

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

참고 : 익명 메서드는 (....) () 즉

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

postGo 는 JavaScript에서 아래와 같이 정의됩니다. 휴식은 간단합니다 ..

@ Url.Action ( "View") 는 호출에 대한 URL을 만듭니다.

{ 'id': @ receipt.ReceiptId} 매개 변수는 postGo 메소드에서 POST 필드로 차례로 변환되는 객체로 생성됩니다. 필요한 모든 매개 변수가 될 수 있습니다.

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

postGo에 사용한 참조 URL

jQuery를 사용하는 비 ajax GET / POST (플러그인?)

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

jQuery.post()사용자 지정 데이터가있는 경우 작동합니다. 기존 양식을 게시하려는 경우 사용하는 것이 더 쉽습니다 ajaxSubmit().

예를 들어 jQuery 트릭을 사용하여 이벤트 (어쨌든 선호되는 방법) ActionLink에 링크 처리기를 연결할 수 있으므로이 코드 자체 를 설정할 필요가 없습니다 .document.ready()$(function(){ ... })

검색 (색인) 페이지에서 결과 페이지로 POST해야하는이 문제를 발견했습니다. @Vitaliy가 말한 것만 큼 많이 필요하지는 않았지만 올바른 방향으로 안내했습니다. 내가해야 할 일은 다음과 같습니다.

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

내 컨트롤러에는 다음과 같은 서명 방법이 있습니다.

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

이것은 MVC 샘플 프로젝트에서 가져온 것입니다.

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