2013-07-01 32 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> 
相關問題