2020年4月24日 星期五

.Net Core One Form MultipeSubmit with ajax

之前一個from多按鈕作法在網路上很多
MultipleButtonAttribute<=之前都用這個方式可Google就有了
使用.Net Core時單純的直接submit的話一般方法都可以
目前使用jquery.unobtrusive-ajax來做的話都送不到後端
但用習慣了還是想繼續用下去
試過了很多方法最後找到一篇文章經測試後可以使用
Html部分如下跟之前一樣只是沒特別指定asp-controller and asp-action
 
<form data-ajax-begin="OnBegin" data-ajax-complete="OnComplete" data-ajax-method="post" data-ajax-success="OnSuccess" data-ajax="true" id="from1" method="post">
<div class="form-group">
<button class="btn btn-primary" id="Edit" type="submit">編輯</button>
      <button class="btn btn-danger" id="Delete" type="submit">刪除</button>          
   </div>
</form>
javascript部分使用jquery在按鈕點擊後加上data-ajax-url的url
這是這次的重點部分
 
<script src="~/lib/Microsoft.jQuery.Unobtrusive.Ajax/jquery.unobtrusive-ajax.min.js"></script>
     <script>
        $("#Edit").on("click", function () {
            $("#from1").attr("data-ajax-url", "@Url.Action("自訂Action", "自訂Controller")" );
        });

        $("#Delete").on("click", function () {
              if (!confirm("確定刪除!!"))
                    return false;

            $("#from1").attr("data-ajax-url", "@Url.Action("自訂Action", "自訂Controller")" );
        });
    </script>
後端部分宣告兩個ActionResult來接收即可
 
[HttpPost]
[ValidateAntiForgeryToken]       
public IActionResult Edit()
{
    ResultViewModel result = new ResultViewModel();
    return Json(result);
}

[HttpPost,ActionName("Delete")]
[ValidateAntiForgeryToken]     
public IActionResult DeleteConfirmed()
{
     ResultViewModel result = new ResultViewModel();
return Json(result);
}
個人覺得這樣寫程式有點不好看
但目前好像就只有這方法可行
歡迎有更好方法可以提供謝謝
參考網址:
jQuery Unobtrusive Ajax Helpers in ASP.NET Core
Multiple Submit Buttons