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加载部分视图

回答

相关问题