asp.net MVC Core - 使用Ajax加載部分視圖

在我的MVC Core應用程序中，我想要在提交表單後加載部分視圖。asp.net MVC Core - 使用Ajax加載部分視圖

提交_TransferForm中的表單後，將加載另一個局部視圖，而不是刷新整個頁面。以下是我的代碼。

爲什麼_ApplySuccess佔據整個頁面，而不是作爲頁面的一部分顯示在Apply？

我在共享_Layout中添加了<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js">。

父視圖Apply.cshtml：

@Html.Partial("_ApplyForm") 

@section Scripts { 
    <script> 
    // delegate submit event to document, since form might be replaced 
    $(document).on('submit', '#applyForm', function() { 
     var $theForm = $(this); 
     // manually trigger validation 
     if ($theForm.valid()) { 
      $('#progress').show(); 
      $.post('', $theForm.serialize()) 
       .done(function (response) { 
        $theForm.replaceWith(response); 
       }) 
     } 
     return false; 
    }); 
    </script> 
}

局部視圖_ApplyForm.cshtml：

<form id="applyForm" asp-action="Apply" asp-controller="Jobs"> 
// content 
</form>

局部視圖_ApplySuccess.cshtml：

<div>Successfully applied.</div>

控制器的動作Apply：

public async Task<IActionResult> Apply(Applicant applicant) 
    { 
     if (ModelState.IsValid) 
     { 
      // code 

      return PartialView("_ApplySuccess"); 
     } 
     return PartialView("_ApplyForm"); 
    }

來源

2017-01-03 Matt

可能的重複[如何在腳本部分中包含腳本包在視圖中]（http://stackoverflow.com/questions/13660868/how-to-include-script-bundle-in-scripts-section-in-view ） –

@ebramkhalil這沒有幫助。順便提一下，我編輯了我的問題。 – Matt

-2

，它的工作原理。方法valid()沒有在編譯時以某種方式定義。

來源

2017-01-04 05:50:27 Matt

您可以使用bootbox警報表明進程完成，並處於警戒成功應用於消息，因爲你不顯示在局部視圖中的任何其他細節。

$(document).on('submit', '#applyForm', function() { 
    var $theForm = $(this); 
    // manually trigger validation 
    if ($theForm.valid()) { 
     $('#progress').show(); 
     $.post('', $theForm.serialize()) 
      .done(function (response) { 
       $theForm.replaceWith(response); 
      }) 
    bootbox.alert({ 
title: '<h4 style="color:white">Alert</h4>', 
message: '<p style="font-weight:700;">successfully applied</p>' 
}); 

    } 
    return false; 
});

你可以參考由後我刪除了條件if ($theForm.valid())參照此http://bootboxjs.com/鏈接

來源

2017-01-03 12:27:10

感謝您的替代方法 – Matt

歡迎馬特..如果你覺得這有幫助，那麼你可以做出這個答案 –

asp.net MVC Core - 使用Ajax加載部分視圖

回答

相關問題