클릭 한 제출 버튼에 따라 다른 MVC 게시 작업에 양식 게시

클릭 한 제출 버튼에 따라 다른 MVC 게시 작업에 양식 게시

---

나는 ASP.Net MVC 4. 보기에 여러 개의 버튼이 있습니다. 현재 동일한 작업 메서드를 호출하고 있습니다. 클릭 한 버튼을 name속성을 사용하여 구별하고 있습니다.

@using (Html.BeginForm("Submit", "SearchDisplay", new { id = Model == null ? Guid.NewGuid().ToString() : Model.SavedSearch }, FormMethod.Post))
{
    <div class="leftSideDiv">
        <input type="submit" id="btnExport" class="exporttoexcelButton" 
        name="Command" value="Export to Excel" />
    </div>

    <div class="pageWrapperForSearchSubmit">
        <input type="submit" class="submitButton" 
         value="Submit" id="btnSubmitChange" />
    </div>
}

//동작

    [HttpPost]
    public ActionResult Submit(SearchCostPage searchModel, string Command)
    {
        SessionHelper.ProjectCase = searchModel.ProjectCaseNumber;

        if (string.Equals(Command, Constants.SearchPage.ExportToExcel))
        {

        }
   }

질문

1. 다른 버튼 클릭 (사용자 지정 라우팅없이)에 대해 다른 POST 작업 방법으로 안내하는 방법이 있습니까?
2. 커스텀 라우팅없이 방법이 없다면 어떻게 커스텀 라우팅으로 할 수 있을까요?

참조 :

1. Jimmy Bogard-ASP.NET MVC에서 POST 정리

---

브라우저 지원에 따라 다른 방식으로 양식을 게시해야하는 URL (및 호출 된 작업)을 선택할 수 있습니다.

• HTML5를 지원하는 최신 브라우저 의 경우 제출 버튼의 formaction 속성을 사용할 수 있습니다.
• 이를 지원하지 않는 이전 브라우저 의 경우 버튼을 클릭 할 때와 제출하기 전에 양식의 작업 속성 을 변경하는 일부 JavaScript를 사용해야 합니다 .

이렇게하면 서버 측에서 특별한 작업을 수행 할 필요가 없습니다.

물론 UrlRazor에서 확장 메서드를 사용하여 양식 작업을 지정할 수 있습니다.

HMTL5를 지원하는 브라우저 : 다음 과 같이 제출 버튼을 정의하기 만하면됩니다.

<input type='submit' value='...' formaction='@Url.Action(...)' />

이전 브라우저의 경우 다음 과 같이 눈에 잘 띄지 않는 스크립트를 사용하는 것이 좋습니다 ( "마스터 레이아웃"에 포함).

$(document).on('click', '[type="submit"][data-form-action]', function (event) {
  var $this = $(this);
  var formAction = $this.attr('data-form-action');
  $this.closest('form').attr('action', formAction);
});

참고 :이 스크립트는 type=submit및 data-form-action속성 이있는 페이지의 모든 요소에 대한 클릭을 처리 합니다. 이 경우 data-form-action속성 값을 취하고 포함하는 양식의 작업을이 속성 값으로 설정합니다. 위임 된 이벤트이므로 추가 단계를 거치지 않고 AJAX를 사용하여로드 된 HTML에서도 작동합니다.

그런 다음 다음 data-form-action과 같이 원하는 작업 URL이 있는 속성을 버튼 에 추가하기 만하면됩니다 .

<input type='submit' data-form-action='@Url.Action(...)' value='...'/>

버튼을 클릭하면 양식의 작업이 변경되고 그 직후 브라우저는 원하는 작업에 양식을 게시합니다.

보시다시피 사용자 지정 라우팅이 필요하지 않으며 표준 Url확장 방법을 사용할 수 있으며 최신 브라우저에서는 특별한 작업이 없습니다.

---

베스트 답변 1 :

ActionNameSelectorAttribute 언급

1. ASP.NET MVC Framework에서 여러 제출 단추를 어떻게 처리합니까?

2. 2 개의 제출 버튼 / 작업이있는 ASP.Net MVC 4 양식

http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-scenarios.aspx

답변 2

참조 : dotnet-tricks-동일한 양식에서 여러 제출 버튼 처리-MVC Razor

두 번째 접근

취소 버튼 클릭을 처리하기위한 새 양식 추가. 이제 취소 버튼을 클릭하면 두 번째 양식이 게시되고 홈페이지로 리디렉션됩니다.

세 번째 접근 방식 : 클라이언트 스크립트

<button name="ClientCancel" type="button" 
    onclick=" document.location.href = $('#cancelUrl').attr('href');">Cancel (Client Side)
</button>
<a id="cancelUrl" href="@Html.AttributeEncode(Url.Action("Index", "Home"))" 
style="display:none;"></a>

---

이것은 당신이 가진 것이 2 개의 출력을 가진 하나의 명령 인 것처럼 들립니다. 저는 이것을 위해 클라이언트와 서버 모두 에서 변경을 선택 합니다.

클라이언트에서 JS를 사용하여 게시 할 URL을 작성합니다 (단순성을 위해 JQuery 사용).

<script type="text/javascript">
    $(function() {
        // this code detects a button click and sets an `option` attribute
        // in the form to be the `name` attribute of whichever button was clicked
        $('form input[type=submit]').click(function() {
            var $form = $('form');
            form.removeAttr('option');
            form.attr('option', $(this).attr('name'));
        });
        // this code updates the URL before the form is submitted
        $("form").submit(function(e) { 
            var option = $(this).attr("option");
            if (option) {
                e.preventDefault();
                var currentUrl = $(this).attr("action");
                $(this).attr('action', currentUrl + "/" + option).submit();     
            }
        });
    });
</script>
...
<input type="submit" ... />
<input type="submit" name="excel" ... />

Now at the server side we can add a new route to handle the excel request

routes.MapRoute(
    name: "ExcelExport",
    url: "SearchDisplay/Submit/excel",
    defaults: new
    {
        controller = "SearchDisplay",
        action = "SubmitExcel",
    });

You can setup 2 distinct actions

public ActionResult SubmitExcel(SearchCostPage model)
{
   ...
}

public ActionResult Submit(SearchCostPage model)
{
   ...
}

Or you can use the ActionName attribute as an alias

public ActionResult Submit(SearchCostPage model)
{
   ...
}

[ActionName("SubmitExcel")]
public ActionResult Submit(SearchCostPage model)
{
   ...
}

---

you can use ajax calls to call different methods without a postback

$.ajax({
    type: "POST",
     url: "@(Url.Action("Action", "Controller"))",
     data: {id: 'id', id1: 'id1' },
     contentType: "application/json; charset=utf-8",
     cache: false,
     async: true,
     success: function (result) {
        //do something
     }
});

ReferenceURL : https://stackoverflow.com/questions/21116999/posting-form-to-different-mvc-post-action-depending-on-the-clicked-submit-button