2013-07-01 31 views
1

如何根据控制器呈现局部视图?如何根据当前页面中的控制器返回部分视图

So..I需要渲染取决于值已张贴的局部视图:

<script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
          $("#GetReport").click(function() { 
           $("form[name=StatsForm]").submit(); 

          }); 
         }); 
    </script> 



<% Html.RenderPartial("InterStats"); %> //this is wrong i need it to render the partial depending on selection and only after the $("#GetReport").click 

控制器:

/// <summary> 
     /// POST /Stats/Index 
     /// </summary> 
     /// <param name="form"></param> 
     /// <returns></returns> 
     [AcceptVerbs(HttpVerbs.Post)] 
     public ActionResult Index(FormCollection form) 
     { 
      // Deal with the form 
      var manufacturerId = Convert.ToInt32(form["manufacturerId"]); 
      var reportId = Convert.ToInt32(form["reportId"]); 
      var categoryId = Convert.ToInt32(form["categoryId"]); 
      var retailerId = Convert.ToInt32(form["retailerId"]); 
      var countryId = Convert.ToInt32(form["countryId"]); 
      var regionId = Convert.ToInt32(form["regionId"]); 
      var manufacturerWidgetId = (form["ManufacturerWidgetId"]); 
      var startDate = new DateTime(1, 1, 1, 0, 0, 0, 0); 
      var endDate = new DateTime(1, 1, 1, 0, 0, 0, 0);  

      var reportName = _reportRepository.GetReport(reportId); 


      switch (reportName.Code) 
      { 
       case "INTER": 
        return RedirectToAction("InterStats", 
             new 
             { 
              manufacturerId = manufacturerId, 
              countryId = countryId, 
              startDate = "2013-01-01", 
              endDate = "2013-01-31" 

             }); 
        break; 
       case "CUMLEADS": 
        return RedirectToAction("LeadStats", 
             new 
             { 
              manufacturerId = manufacturerId, 
              countryId = countryId, 
              categoryId = categoryId, 
              startDate = startDate.ToString("yyyy-MM-dd"), 
              endDate = endDate.ToString("yyyy-MM-dd") 
             }); 
        break; 
       case "IMP": 

        break; 
      } 

      return View(); 


     } 




    /// </summary> 
    /// <returns></returns> 
    /// [JsonpFilter] 
    [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)] 
    public ActionResult InterStats(int manufacturerId, int countryId, DateTime startDate, DateTime endDate) 
    { 

     //Get all manufacturerwidgets for manufacturer 
     var manufacturerWidget = _manufacturerWidgetsRepository.GetManufacturerWidgetByManufacturerAndCountry(manufacturerId, countryId); 
     var interReportJson = new InterReportJson(); 
     var interRecordList = new List<InterRecord>(); // a list of my anonymous type without the relationships 
     interReportJson.InterRecordList = new List<InterRecord>(); 
     var count = 1; 
     foreach (var mw in manufacturerWidget) 
     { 
      var widgetName = mw.Description; 

      //Get the product stats data 
      var imps = _productStatsRepository.GetSumImpressionsProductStatsForManufacturerCountryDate(
       mw.Id, countryId, startDate, endDate); 


      var clicks = _productStatsRepository.GetSumClicksProductStatsForManufacturerCountryDate(
       mw.Id, countryId, startDate, endDate); 

      float ctr = 0; 
      if (imps != 0 && clicks != 0) 
      { 
       ctr = ((clicks/(float)imps) * 100); 
      } 



      // Create the data for the report 
      var interRecord = new InterRecord 
      { 
       WidgetName = widgetName, 
       Impressions = imps, 
       Interactions = clicks, 
       Ctr = ctr, 
       Count = count 
      }; 




      interReportJson.InterRecordList.Add(interRecord); 

      count++; 
     } 

     interReportJson.Counter = count; 




     return PartialView(interReportJson); 
    } 

目前没有<%Html.RenderPartial ( “InterStats”); %>我的部分在新窗口中打开,并且由于在表单提交后没有任何数据,因此它失败。而且它可能不是局部的“InterStats”这可能是部分“LeadsStats”

编辑

我在做与AJAX如下:

<script type="text/javascript"> 

      $("#GetReport").click(function() { 


       var manufacturerId = $("#manufacturerId > option:selected").attr("value"); 
       var countryId = $("#countryId > option:selected").attr("value"); 
       var startDate = $("#startDate").val(); 
       var endDate = $("#endDate").val(); 

       //var manufacturerId = 241; 
       //var countryId = 230; 
       //     var startDate = '2013-01-01'; 
       //     var endDate = '2013-01-31'; 

       var theUrl = "/ProductStats/Parameters/" + manufacturerId + "/" + countryId + "/" + startDate + "/" + endDate; 

       alert(theUrl); 

       $.ajax({ 
        type: "POST", 
        //contentType: "application/json; charset=utf-8", 
        url: theUrl, 
        data: { 'manufacturerId': manufacturerId, 'countryId': countryId, 'startDate': startDate, 'endDate': endDate }, 
        dataType: "json", 
        success: function (data) { 


         //see this http://stackoverflow.com/questions/11472947/how-to-format-my-json-data-for-stack-column-chart-in-highcharts 


         var widgetNameArray = []; 

         var impressionsArray = []; 

         var intsArray = []; 

         for (var i = 0; i < data.length; i++) { 

          var item1 = data[i]; 
          //only display on graph if not 0 
          if (item1.Impressions > 0) { 


           var widgetCategories = item1.WidgetName; 

           //put into an array 
           widgetNameArray.push(widgetCategories); 

           var imps = item1.Impressions; 

           impressionsArray.push(imps); 

           var ints = item1.Interactions; 
           intsArray.push(ints); 
          } 
         } 


         // Create the chart 
         $('#container').highcharts({ 
          chart: { 
           type: 'column' 
          }, 
          title: { 
           text: 'Inter Chart ' + startDate + ' to ' + endDate 
          }, 
          xAxis: { 
           categories: widgetNameArray, 
           labels: { 
            rotation: -45, 
            align: 'right', 
            style: { 
             fontSize: '13px', 
             fontFamily: 'Verdana, sans-serif' 
            } 
           } 
          }, 
          yAxis: { 
           min: 0, 
           title: { 
            text: 'Impressions/Interactions' 
           }, 
           stackLabels: { 
            enabled: false, 
            style: { 
             fontWeight: 'bold', 
             color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
            } 
           } 
          }, 
          legend: { 
           align: 'right', 
           x: -100, 
           verticalAlign: 'top', 
           y: 20, 
           floating: true, 
           backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
           borderColor: '#CCC', 
           borderWidth: 1, 
           shadow: false 
          }, 
          tooltip: { 
           formatter: function() { 
            return '<b>' + this.x + '</b><br/>' + 
         this.series.name + ': ' + this.y + '<br/>'; 
           } 
          }, 
          plotOptions: { 
           bar: { 
            dataLabels: { 
             enabled: true 
            } 
           } 
          }, 
          series: [{ 
           name: 'Impressions', 
           data: impressionsArray 
          }, { 
           name: 'Interactions', 
           data: intsArray 
          }] 
         }); 




         var table = document.getElementById("usertable"); 
         var tabledata = ""; 

         tabledata += "<tr>"; 
         tabledata += "<th>Widget Name</th>"; 
         tabledata += "<th>Impressions</th>"; 
         tabledata += "<th>Interactions</th>"; 
         tabledata += "<th>CTR</th>"; 
         tabledata += "</tr>"; 



         for (var i = 0; i < data.length; i++) { 

          var item = data[i]; 

          tabledata += "<tr>"; 
          tabledata += "<td>" + item.WidgetName + "</td>"; 
          tabledata += "<td>" + item.Impressions + "</td>"; 
          tabledata += "<td>" + item.Interactions + "</td>"; 
          tabledata += "<td>" + item.Ctr.toFixed(2) + "%</td>"; 
          tabledata += "</tr>"; 

         } 


         table.innerHTML = tabledata; 

         $("th").css("background-color", "#3399FF"); 
         $("tr:even").css("background-color", "#eeeeee"); 
         $("tr:odd").css("background-color", "#ffffff"); 


        } 
       } 
       ); 


      }); 

     </script> 

但这只是为了一个工作该报告作为表格/ chrt的格式根据报告的不同而有所不同,所以我们根据报告ID来单独显示它们。

我希望清楚我需要做什么,请问是否。

谢谢!

+1

那么...有什么问题?你已经展示了很多代码,但是我不知道你在问什么,在哪里挣扎。再一次,你已经展示了你所尝试过的东西,而不是你被卡住的地方。也许考虑让你的问题更清楚。 – Sam

回答

-1

山姆感谢您的输入和遗憾它WASN牛逼不清楚什么我需要做的。

我实际上想根据用户从下拉列表中选择哪个报告来选择部分视图。

所以在视图中我使用了.change让我们知道什么时候该报告已被选定:

<script type="text/javascript"> 
     //<![CDATA[ 

    $(function() { 

     $("#selectReport").hide(); 
     var manufacturerId; 

     $("select#manufacturerId").change(function() { 
      manufacturerId = $("#manufacturerId > option:selected").attr("value"); 
      $("#selectReport").show(); 

     }); 


     $("select#reportId").change(function() { 
      var reportId = $("#reportId > option:selected").attr("value"); 

      var theUrl = "/ReportStats/GetReport/" + reportId + "/" + manufacturerId; 

      $.ajax({ 
       url: theUrl, 
       success: function (data) { 
        $('#ajaxOptionalFields').html(data); 
       }, 
       error: function() { 
        alert("an error occured here"); 
       } 
      }); 
     }); 
    }); 

     //]]> 
    </script> 

在我把一个case语句控制器,所以我知道这报道我在:

//这里我们decinding这部分将要看到的这些报告(所以这Ajax调用将被解雇......

switch (report.Code) 
      { 
       case "INTER": 
        ViewData["InterStats"] = true; 
        break; 
       case "CUMLEADS": 
        ViewData["CumLeadsStats"] = true; 
        break; 
      } 

,并在视图中我把用这个来决定WH if语句部分ICH报告将显示:

<% if (Convert.ToBoolean(ViewData["InterStats"])) 
    { %> 
<% Html.RenderPartial("InterReport"); %> 
<% } 
    else if (Convert.ToBoolean(ViewData["CumLeadsStats"])) 
    { %> 
<% Html.RenderPartial("CummulativeReport"); %> 
<% } %> 

我不知道这是在做什么,我需要的一个非常糟糕的方式,但它似乎工作。

+0

看起来你已经弄清楚了,这么好的工作!至于你可能已经尝试的其他选择 - 可能为单独的报告提供了单独的视图,并且控制器选择了不同的视图。我并没有冷静下来,网站上的礼仪就是在你发表评论时留下评论,所以没有人会发表评论。在可能的情况下,您应该将您的答案标记为正确答案,以便人们不会继续访问此页面来回答您的问题。 – Sam

1

您或者需要调用AJAX方法并传入必要的数据以便能够完成所需的响应。您可以执行GET或POST。在查询字符串上放置键值对,将POST键中的键值对放入POST正文中。你可以看到这个jQuery AJAX文档。 看起来你不得不做AJAX或回传你的代码,因为它需要用户输入。

我建议像...

<div id="reportDiv"> 
    <!-- dynamic content will be populated here after user makes some selection, etc.. --> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#GetReport").click(function() { 
     if (selectionDictatesThatReportBeShown) { 
      // Make AJAX call and put response html in the reportDiv 
      $('#reportDiv').load('/SomeController/SomeAction?key1=value1&key2=value2'); 
     } 

     // optionally do this? 
     $("form[name=StatsForm]").submit(); 
     }); 
    }); 
</script> 
相关问题