Ajax重新加载整个部分MVC

本文关键字：个部 MVC 加载 新加载 Ajax | 更新日期: 2023-09-27 18:12:24

我有一个主要的概述。CSHTML页面，该页面具有以下代码来运行部分:

<div>
    Html.RenderAction("UserProjMetric", "Users", new {id = Model.Id});
</div>

部分的内部是这样的:

@model RecruiterMetricsViewModel
<div>
    <div> 
    <input type="text" id="dates start" />
    <input type="text" id="dates end" />
    <input type="submit" onclick="runAjax()" />   
    <table>
    @foreach(var data in Model.Metrics)
    { 
        <tr>  <td>@data</td>  </tr>
    }
    </table>
</div>

我想让onclick运行一些ajax，将重新加载整个部分。用户可以指定日期范围。当他们这样做，然后点击提交，我希望整个部分被重新加载。

我怎么做，这是可能的吗?

Ajax重新加载整个部分MVC

这应该是您想要的。比Jonesy的评论更啰嗦一点，也许他们会达到同样的效果。您可以尝试替换Html。使用Ajax BeginForm。我想。

// overview.cshtml
<div id="UserProjWrapper">
    Html.RenderAction("UserProjMetric", "Users", new {id = Model.Id});
</div>
// UserProjMetric.cshtml
@model RecruiterMetricsViewModel
@using(Html.BeginForm("UserProjMetric","Users",null,FormMethod.Post, new {id = "UserProjForm" }))
{
    <input type="text" name="startDate" class="dates start"  />
    <input type="text" name="endDate" class="dates end" />
    <input type="submit" value="Submit"/>   
    <table>
    @foreach(var data in Model.Metrics)
    { 
        <tr>  <td>@data</td>  </tr>
    }
    </table>
}
<script>
   $(function() {
       $('#UserProjForm').submit(function(e) {
           e.preventDefault();
           $.post($(this).attr("action"),$(this).serialize(),function(response) {
               $('#UserProjWrapper').html(response);
           });
       });
   });
</script>
相关文章：