Question

我有一个main overview.cshtml页面，其中包含以下代码来运行partial：

<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。用户可以指定日期范围。当他们这样做，然后点击提交我希望重新加载整个部分。

我该怎么做？这可能吗？

Answer 1

这应该做你想要的。比琼斯的评论更加冗长，也许他们会完成同样的事情。您可以尝试用Ajax.BeginForm替换Html.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>

Ajax重新加载整个部分MVC

1 个答案: