CODEWITHSUNDEEP
c#ajaxasp.net-mvcrazor
allencoded
allencoded

Reputation: 7265

Ajax to reload entire partial MVC

I have an main overview.cshtml page that has the following code to run a partial:

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

Inside of that partial it looks like so:

@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>

I want to make the onclick run some ajax that will reload the entire partial. The user has the ability to specify a date range. When they do that then click submit I want the entire partial to be reloaded.

How do I do that and is that possible?

Upvotes: 0

Views: 399

Answers (1)

B2K
B2K

Reputation: 2611

This should do what you want. A bit more verbose than Jonesy's comment, perhaps they would accomplish the same thing. You could try replacing Html.BeginForm with Ajax.BeginForm I suppose.

// 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>

Upvotes: 1

Related Questions