Partial view on button click

问题

I have Controller:

public ActionResult Index(string Activites)
{
    var item2 = (from o in frh.Dates orderby o.Date1 select o.Date1).ToArray();

    int lenght = item2.Count();

    string[] data = new string[lenght];
    DateTime[] data3 = new DateTime[lenght];
    object[] data2 = new object[lenght];
    double?[] last = new double?[lenght];

    // liste des mois -- string 
    for (int i = 0; i < lenght; i++)
    {
        data[i] = item2[i].ToString("dd/MM/yyyy");

        //if (data[i].Equals(Dates))
        //{ break; }
        //if (data[i] == Dates) break;
    }

    //list des mois -- datetime
    for ( var l = 0; l < lenght; l++)
    {
        data3[l] = item2[l];
        //  if (data3[l].Equals(Dates)) break;
        // if (data3[k].ToString("dd/MM/yyyy") == Dates) break;
    }

    //calcul de productivité 
    // changement ???
    var items = (from x in frh.productivites
                 where x.Activité == Activites
                 select new { x.delta_, x.tempstot_, x.DateID });


    var j = 0;

    foreach (var a in data3)
    {
        var sumd = items.Where(c => c.DateID == a).Select(c => c.delta_).Sum();
        var sumt = items.Where(c => c.DateID == a).Select(c => c.tempstot_).Sum();
        var prod = sumd / sumt;
        last[j] = prod;
        j++;
        sumd = 0;
        sumt = 0;
        prod = 0;
    }

    data2 = last.Cast<object>().ToArray();

    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
    .SetXAxis(new XAxis
    {
        Categories = data
    })
    .SetYAxis(new YAxis
    {
        Title = new YAxisTitle { Text = "Productivité " },
        PlotLines = new[]
        {
            new YAxisPlotLines
            {
                Value = 0,
                Width = 1,
                Color = ColorTranslator.FromHtml("#808080")
            }
        }
    })
    .SetTitle(new Title
    {
        Text = Activites,
        X = -20
    })
    .SetSubtitle(new Subtitle
    {
        Text = "Décembre 2012 - Juin 2013",
        X = -20
    })
    .SetSeries(new Series
    {
        Name = "ODR", 
        Data = new Data(data2)
    });

    return PartialView(chart);
}

and Partial View :

@model DotNet.Highcharts.Highcharts
@(Model)   

@section Scripts {
    @Scripts.Render("~/bundles/HighChart")
}

and view :

@{
    ViewBag.Title = "Index";
}

<html>
    <body>
        @using (Html.BeginForm("Index", "Graphe"))
        {
        <table style="width: 100%;" border="1">
            <tbody>
                <tr aria-atomic="False" class="alt">
                    <td>date début :</td>
                    <td><input value="01/12/2012" type="text"  disabled/></td>
                    <td style="width: 20%; position:absolute ">&nbsp;&nbsp;&nbsp;&nbsp</td>
                </tr>
                <tr>
                    <td>date fin :</td>
                    <td><select id="Dates" name="Dates"  ><option>Selectionnez --</option></select></td>
                    <td><input id="date" type="checkbox" /> </td>
                </tr>
                <tr class="alt">
                    <td>Activité : </td>
                    <td><select id="Activites" name="Activites"  ><option>Selectionnez --</option></select></td>
                    <td><input id="activite" type="checkbox" /> </td>    
                </tr>
                <tr>
                    <td>Responsable:</td>
                    <td><select id="Responsables" name="Responsables">
                        <option>Selectionnez --</option></select></td>
                    <td><input id="Responsable" type="checkbox" /> </td>
                </tr>
                <tr style="height : 30%">
                    <td style="width: 20%">&nbsp;&nbsp;&nbsp;&nbsp</td>
                </tr>
                <tr>
                    <td style="width: 20%; position:absolute "></td>
                    <td><input type="submit" value="Afficher" id="ButtonSubmit"/></td>
                    <td><input class="button" id="ButtonReset" type="button" value="Annuler"  /></td>
                </tr>
            </tbody>
        </table>  
        }
    </body>
</html>

What I want is to show partial View on button click ; I need also to pass parameters (selected values) from view to controller for filtering the collection rendered in the partial view, How could I do that ?

回答1:

what I see in your controller is a mix of methods. I would create a partial view method

public PartialViewResult GetChart(int id)
{
    Model model = (build your model);
    return PartialView("_PartialViewName", Model);
}

in your view

<div class="Content"></div>

then in your javascript

$('.btnSubmit').on('click', function(){
    $.ajax({
        url: "@(Url.Action("GetChart", "Controller"))",
        type: "POST",
        cache: false,
        async: true,
        data: { data: 'fieldName' },
        success: function (result) {
            $(".Content").html(result);
        }
    });
});

you can send whatever data you need to through the data just data: 'data', data1: 'data1', etc. Hopefully this helps.

来源：https://stackoverflow.com/questions/18847735/partial-view-on-button-click

标签

ajax

asp.net-mvc-4

partial-views

asp.net-mvc-partialview