[RESOLVED]MVC Partial View

Hi,

I am quite new to MVC etc. I want to know something on postings by partial views.

I have a page which has a graph on. The graph is generated by a partial view. Now what I want to do is have date ranges in which the user can select to display data for.

But when I do a post from the form on the partial view, it just basically goes to a view displaying the graph only, and also removes the my form tags.

Any help would be appreciated in getting what I need (VIA Jquery might be the way?)

Thanks

Kobie

You may want to use the Ajax-Form helper to post your form and retrieve a new partial view (with your graph) and replace your old graph

@using (Ajax.BeginForm("GetGraph", new AjaxOptions { HttpMethod = "POST", TargetUpdateId = "graphDiv" }))
{
  Date From: @Html.TextBox("DateForm") <br />
  Date To: @Html.TextBox("DateTo")

  <input type="submit" value="Submit" />
}


<div id="graphDiv">
  // your graph goes here
</div>

The above uses the ajax form helper, specifying the graph’s div container for where we want to insert the new graph (based on the date fields).

The graph action:

[HttpPost]
public ActionResult GetGraph(DateTime DateFrom, DateTime DateTo)
{
  var graphData = /* use the date params above to generate your graph's data */;

  return PartialView("GraphPartial", graphData);
}

All this action does is it takes your date fields from the form and uses them to generate your graph’s data.  Then we pass that data to our graph’s partial view.  You’ll need to specify the name of that partial view (I used ‘GraphPartial’)

Last little note: in order to use AJAX, you’ll need to include the jquery and ‘unobtrusive-ajax’ scripts in your View.  They should be located in your /Scripts folder just like any other jquery script.  If you don’t have the unobtrusive-ajax script, it can
be downloaded using the NuGet Package Manager for your project (under Tools menu).

Hope that helps

Hi,

Exactly how I want it, I will try and let you know of the results.

Ok no luck, it still throws away my the rest of the page and then just displays the graph, but now with no data. :(

main view :

//Think its got something to do with this.

@using (Ajax.BeginForm("LeadChart", "Chart", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "myGraph" }))
{ 
<div>@Html.TextBoxFor(x => x.ChartData.DateFrom) </div>
<div>@Html.TextBoxFor(x => x.ChartData.DateTo) </div>
<div><input type="submit" value="Get data" /></div> 
}

<div id="myGraph">
         @{ Html.RenderPartial("LeadChart", Model.ChartData);}
</div>

Leadchart controller:

//So this works fine

[HttpPost]
public ActionResult LeadChart(Chart chart)
{
     chart.DateFrom = Convert.ToDateTime(chart.DateFrom);
     chart.DateTo = Convert.ToDateTime(chart.DateTo);
     var data = chart.ChartData; 
     return PartialView(chart);
}

1) change your form-action to not be the same name as the partial view

@using (Ajax.BeginForm("GetLeadChart", "Chart", ....

2) update the action name to reflect this change

[HttpPost]
public ActionResult GetLeadChart(Chart chart)
{
...

3) did you mean to use data instead of "chart"?


return PartialView("LeadChart", data);

4) lastly, if after posting, your view changes to just the partial chart view, it means your AJAX is not working.  If it’s not working after these suggestions, please post your View’s HTML source

Hi,

Hehehe so stupid mistake on my side. My Jquery was outdated…

Thanks a lot for the help!!Embarassed

Leave a Reply