HTML渲染犯规在局部视图 [英] html doesnt render in partial view
问题描述
以下是code，我使用渲染HTML视图。
@ {
布局= NULL;
}
Following is the code that i am using to render a html view. @{ Layout = null; }
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#divChart").load('http://localhost/abcd.Portal/BarChart.html');
});
</script>
<div style="width: 100%;" id="divChart"></div>
HTML，我试图加载
HTML that I am trying to load
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script>
debugger;
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
$.ajax({
url: 'http://localhost/abcd.Portal/Dashboard/GetData',
type: 'GET',
data: '',
cache: false,
dataType: 'text',
async: true,
error: function (xhr) {
//alert('Error: ' + xhr.statusText);
},
success: function (result) {
debugger;
result = eval(JSON.parse(result));
x.domain(result.map(function (d) { return d.letter; }));
y.domain([0, d3.max(result, function (d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(result)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function (d) { return y(d.frequency); })
.attr("height", function (d) { return height - y(d.frequency); });
}
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
</body>
我没有得到任何错误，但我的看法是不渲染。我试图呈现一个D3条形图。任何建议我要去的地方错了。
I get no errors but my view is not rendering. I am trying to render a d3 bar chart. Any suggestion where I am going wrong.
我有我的加载的局部视图的父母。现在，如果我写的部分中HTML code我认为它给错误。于是，我试着加载HTML文件来代替。
I have a parent which loads my partial view. Now if i write the html code inside the partial i view it gives error. So, I tried loading the html file instead.
推荐答案
这是不使用jQuery加载局部视图的方式，用一个动作吧。
This is not the way to load partial view using jquery, use an action for it.
创建一个行动，这将返回局部视图：
Create an action which will return the partial view:
public ActionResult BarChart()
{
return View();
}
和jQuery的：
$(document).ready(function () {
debugger;
$("#divChart").load('@Url.Action("BarChart","ControllerName")');
});
这篇关于HTML渲染犯规在局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
