ASP.NET MVC 4 Partial View Post Method on a form

Question

I have a partial view that is called _GetForfaitDashBoard.cshtml This is the code

@model WebAppComp.Areas.Admin.Models.StatsForfaitDashBoard


<table class ="table table-bordered">
<tr>
<th>Nombre total de Forfaits</th>
<th>Moyenne des forfaits par Agence</th>
<th>Forfait Ayant le prix le plus haut</th>
<th>Forfait Ayant le prix le plus bas</th>
<th>Le forfait le plus visité</th>
<th>Le forfait le mieux noté par les membres</th>
<th>le forfait ayant le plus de réservations</th>
<th>le forfait le plus récent</th>
</tr>
<tr>
<td>@Model.CountForfaits</td>
<td>@Model.AverageCountForfaitPerAgence</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdHighestPriceForfait }, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdLowestPriceForfait }, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdMostVisitedForfait }, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdBestRatedForfait }, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdMostBookedForfait}, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdMostRecentForfait}, null)</td>
</tr>

</table>

It's a table in which I put statistics. What I want to do is to have these statistics loaded in a web page based on a Form , the form will contain a simple dropdownlist in which the user choses the type of statistics that he wants. Here is the code of the partial View Action :

[HttpPost]
        public PartialViewResult _GetForfaitDashBoard (TypeForfait typeForfait)
        {
            .....
        }

Now I don't know how to do to put all I said into action. Is putting a form in the base view that posts to the action of the Partial View will be a good approach? Or is there any other solutions to call a partial view based on a form?

Andrew · Accepted Answer · 2013-07-05 12:08:53Z

1

Since you're returning a PartialView my suggestion would be:

Use the jQuery Change event to get the selected value from your dropdownlist and post it to the server.

$("#yourdropdownid").change(function(e){}

Then post your data (my personal preference is via a Ajax request but you can also use the Post function) to your _GetForfaitDashBoard action and handle the response in your javascript:

$("#yourdropdownid").change(function(e){
    var selectedValue = this.val();

    $.ajax({
       url: $("#yourFormId").attr("action"),
       type: "POST",
       data: { typeForfait: selectedValue }, 
       success: function(response){ $('#IdOfTheElementWhereYouWantToInsert').html(response) },
       error: function(){ // handle your error }
    });
}

The response parameter in the success function is the rendered html of the partialView.

Assuming that you're basing the type of statistics only on the selected value I would suggest to change your parameter type from TypeForfait to string (or an int) in your action.

    [HttpPost]
    public PartialViewResult _GetForfaitDashBoard (string typeForfait)
    {

    }

edited Jul 5, 2013 at 12:08

answered Jul 5, 2013 at 7:42

Andrew

5,4601 gold badge31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hamdi Baligh Over a year ago

Thank you for the reponse, this seems the right approach, but one more question, how can I inject the partial view in the page, I mean what shall I put in // inject you partial view on the page ? Sorry I am new to jquery ..

Andrew Over a year ago

No problem, will edit my answer. You can do it with the .html() function of jQuery: api.jquery.com/html

Hamdi Baligh Over a year ago

also there is a little problem url: $("#yourFormId").attr("href") should be url: $("#yourFormId").attr("action") you can edit the answer for someone who has the same question :)

Andrew Over a year ago

You can also put in the url in your javascript and remove the form, then you don't need this statement at all. But that's a personal preference.

Collectives™ on Stack Overflow

ASP.NET MVC 4 Partial View Post Method on a form

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related