我已經能夠使用DotNet Highcharts從數據庫中提取條形圖。我已經修改它以基於我閱讀的關於部分視圖的內容來使用視圖模型。我需要能夠在渲染局部視圖時傳遞一個id。每當我嘗試獲取局部視圖渲染時,我只會得到空白,空白加上一個單獨的分號,或者將void轉換爲對象或將匿名轉換爲對象。如何渲染HighCharts的部分視圖並在MVC中傳遞參數?
這裏是我的控制器:
public ActionResult ManaProduction(int deckid = 0)
{
var query = string.Format("Select C.* from Cards C Left Join CardDecks CD ON CD.CardID = C.CardID Where DeckID = {0}", deckid);
var cardlist = db.Cards.SqlQuery(query).ToList();
var red = cardlist.Where(g => g.ProducesRedMana == true).Count();
var blue = cardlist.Where(g => g.ProducesBlueMana == true).Count();
var green = cardlist.Where(g => g.ProducesGreenMana == true).Count();
var white = cardlist.Where(g => g.ProducesWhiteMana == true).Count();
var black = cardlist.Where(g => g.ProducesBlackMana == true).Count();
var colorless = cardlist.Where(g => g.ProducesColorlessMana == true).Count();
Highcharts chart = new Highcharts("chart")
.InitChart(new DotNet.Highcharts.Options.Chart { DefaultSeriesType = ChartTypes.Column })
.SetTitle(new Title { Text = "Mana Production" })
.SetXAxis(new XAxis { Categories = new[] { "Red", "Blue", "Green", "White", "Black", "Colorless" } })
.SetYAxis(new YAxis
{
Min = 0,
Title = new YAxisTitle { Text = "Mana Count" }
})
.SetLegend(new Legend
{
Layout = Layouts.Vertical,
Align = HorizontalAligns.Left,
VerticalAlign = VerticalAligns.Top,
X = 100,
Y = 70,
Floating = true,
BackgroundColor = new BackColorOrGradient(System.Drawing.ColorTranslator.FromHtml("#FFFFFF")),
Shadow = true
})
.SetTooltip(new Tooltip { Formatter = @"function() { return ''+ this.y +': '+ this.x +' mana'; }" })
.SetPlotOptions(new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0,
ColorByPoint = true,
//Colors = [ "red", 'blue', 'green', 'gray', 'black', 'gray']
}
})
.SetSeries(new[]
{
//new Series { Name = "Mana", Data = new Data(new object[] { blue, black, green, white, colorless, red }) },
new Series { Name = "Mana", Data = new Data(new[]
{
new Point { Y = red, Color = System.Drawing.Color.DarkRed },
new Point { Y = blue, Color = System.Drawing.Color.DeepSkyBlue },
new Point { Y = green, Color = System.Drawing.Color.ForestGreen },
new Point { Y = white, Color = System.Drawing.Color.Wheat },
new Point { Y = black, Color = System.Drawing.Color.Black },
new Point { Y = colorless, Color = System.Drawing.Color.Gray }
}
)},
});
var vm = new ViewDeck();
vm.ManaGraph = chart;
return View(vm);
這裏是我的視圖模型:
public class ViewDeck
{
public DotNet.Highcharts.Highcharts ManaGraph { get; set; }
public Deck Deck { get; set; }
//OTHER PROPERTIES
public ViewDeck()
{ }
}
這裏有一些事情我曾經試圖讓局部視圖來渲染:
@{Html.RenderAction("ManaProduction", "Deck", new { deckid = Model.Deck.DeckID });}
@{Html.RenderPartial("ManaProduction", new { deckid = Model.Deck.DeckID });}
@Html.Partial("ManaProduction", new {deckid = Model.Deck.DeckID});
任何援助將不勝感激。
編輯 - 這裏是我的局部視圖代碼:
@model Login.Models.ViewDeck
@{
ViewBag.Title = "Mana Production";
}
@(Model.ManaGraph)
這裏是我想的局部視圖添加到視圖:
@model Login.Models.ViewDeck
@{
ViewBag.Title = "Details";
}
<h2> @Html.DisplayFor(model => model.Deck.Title)</h2>
<fieldset>
<legend>Deck</legend>
<a href="@Url.Action("Edit", "Deck", new { id = Model.Deck.DeckID })" class="sublink"> <img src="@Url.Content("~/Content/themes/base/images/icons/edit.png") " style="border:none" /> Deck Details</a>
<a href="@Url.Action("Search", "Deck", new { deckid = Model.Deck.DeckID })" class="sublink"> <img src="@Url.Content("~/Content/themes/base/images/icons/add.png") " style="border:none" />Cards to Deck</a>
<a href="@Url.Action("BasicLand", "Deck", new { deckid = Model.Deck.DeckID })" class="sublink"> <img src="@Url.Content("~/Content/themes/base/images/icons/add.png") " style="border:none" />Basic Lands to Deck</a>
<a href="@Url.Action("Delete", "Deck", new { deckid = Model.Deck.DeckID })" class="sublink"> <img src="@Url.Content("~/Content/themes/base/images/icons/delete.png") " style="border:none" /> Deck</a><br />
<div id="tabs">
<ul>
<li><a href="#tabs-1">Overview</a></li>
<li><a href="#tabs-2">Description</a></li>
<li><a href="#tabs-3">View Cards</a></li>
<li><a href="#tabs-4">Deck Stats</a></li>
<li><a href="#tabs-5">Comments</a></li>
</ul>
<div id="tabs-1">
<hr />TOTAL CARDS IN DECK: @Html.DisplayFor(model => model.CardCount) || RATING @Html.DisplayFor(model => model.Deck.Rating) out of 5 <hr />
<div class="section group">
<div class="col span_1_of_2"> <div id='pie_container'>
@(Model.Chart)</div></div>
<div class="col span_1_of_2"> CREATURES(@(Model.CreatureCount))<br />
@foreach (var item in Model.Creatures)
{
@item<br />
}
<br />PLANESWALKERS(@(Model.PlaneswalkerCount))<br />
@foreach (var item in Model.Planeswalkers)
{
@item<br />
}
<br />INSTANTS(@(Model.InstantCount))<br />
@foreach (var item in Model.Instants)
{
@item<br />
}
<br />SPELLS(@(Model.SpellCount))<br />
@foreach (var item in Model.Spells)
{
@item<br />
}
<br />LANDS(@(Model.LandCount))<br />
@foreach (var item in Model.Lands)
{
@item<br />
}</div></div>
</div>
<div id="tabs-2">
<div class="display-field">
<b>Description:</b> @Html.DisplayFor(model => model.Deck.Description)
</div>
</div>
<div id="tabs-3">
@foreach (var item in Model.CardList) {
<div class="section group">
<div class="col span_1_of_2">
<a href="@Url.Action("Details", "Card", new { id = item.CardID })"> <img src ="@Url.Content(item.ImageUrl)" style="width:50%; border:none;" alt="image" /></a>
</div>
<div class="col span_1_of_2">
<a href="@Url.Action("Delete", "CardDeck", new { cardid = item.CardID, deckid = Model.Deck.DeckID })"> <img src="@Url.Content("~/Content/themes/base/images/icons/delete.png") " style="border:none" />
<br />Remove Card</a>
</div>
</div>
}
</div>
<div id="tabs-4">
<hr />
Wins: @(Model.Deck.Wins)<br />
Losses: @(Model.Deck.Loss)
<hr />
<ul>
<li><a href="@Url.Action("ManaProduction", "Deck", new {deckid = Model.Deck.DeckID})">Mana Production</a></li>
</ul>
@Html.Partial("ManaProduction", Model)
更新我的回答,請嘗試了這一點 – Jakotheshadows
請看到我的最新評論我的回答 – Jakotheshadows