C# 通过ajax渲染局部视图
我有一个仪表板视图。在此仪表板中，我要渲染多个局部视图。我开始这个练习只是为了学习。事实上，我不确定我做错了什么。这是我的密码： 我的仪表板控制器：C# 通过ajax渲染局部视图,c#,ajax,asp.net-mvc,asp.net-mvc-4,razor,C#,Ajax,Asp.net Mvc,Asp.net Mvc 4,Razor,我有一个仪表板视图。在此仪表板中，我要渲染多个局部视图。我开始这个练习只是为了学习。事实上，我不确定我做错了什么。这是我的密码： 我的仪表板控制器： public ActionResult DashboardIndex() { return View(); } public ActionResult DebitAndCreditExpensesPV() { DashboardMode
public ActionResult DashboardIndex()
{
return View();
}
public ActionResult DebitAndCreditExpensesPV()
{
DashboardModel objGet = new DashboardModel();
DashboardViewModel objVM = new DashboardViewModel();
DateTime date = new DateTime();
objVM.StartDate = new DateTime(date.Year, date.Month, 1);
objVM.EndDate = objVM.StartDate.AddMonths(1).AddDays(-1);
objVM.ExpenseType = objGet.GetExpensesByDebitAndCredit(objVM.StartDate, objVM.EndDate);
return PartialView(objVM);
}
@model GPI.ViewModel.DashboardViewModel
@{
ViewBag.Title = "DashboardIndex";
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
@{
Html.RenderPartial("DebitAndCreditExpensesPV");
}
</div>
<div class="col-md-8"></div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: "get",
url: "/Dashboard/DebitAndCreditExpensesPV",
data: {
'startDate': $('#StartDate').val(),
'endDate': $('#EndDate').val()
},
dataType: 'json',
success: function () {
alert('success');
},
error: function () {
alert('failure');
}
});
});
</script>
@model GPI.ViewModel.DashboardViewModel
<div class="row">
<div class="col-sm-4 col-md-12">
<div class="stat-panel">
<div class="stat-row">
<div class="stat-cell bg-pa-purple padding-sm">
<div class="col-xs-6">
<div class="text-xs" style="margin-bottom:5px;">
Debit EXPENSES
</div>
<div style="width:100%;display:inline-block;margin-bottom:-2px;position:relative;">
<span class="text-xlg">
<span class="text-lg text-slim">₹</span>
<strong>@Model.ExpenseType.TotalDebits</strong>
</span>
</div>
</div>
<div class="col-xs-6">
<div class="text-xs" style="margin-bottom:5px;">
Credit EXPENSES
</div>
<div style="width:100%;display:inline-block;margin-bottom:-2px;position:relative;">
<span class="text-xlg">
<span class="text-lg text-slim">₹</span>
<strong>@Model.ExpenseType.TotalCredits</strong>
</span>
</div>
</div>
</div>
</div>
<div class="stat-row">
<div class="stat-counters bordered no-border-t text-center">
<div class="stat-cell col-xs-12 padding-sm">
<div class="input-daterange input-group" id="datepicker">
@Html.TextBoxFor(m => m.StartDate,"{0:d}", new { @class = "input-sm form-control" })
<span class="input-group-addon">to</span>
@Html.TextBoxFor(m => m.EndDate, "{0:d}", new { @class = "input-sm form-control" })
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@model GPI.ViewModel.DashboardViewModel
借方费用
₹
@Model.ExpenseType.totaldebitis
信贷费用
₹
@Model.ExpenseType.TotalCredits
@TextBoxFor（m=>m.StartDate，“{0:d}”，新的{@class=“input sm form control”}）
到
@TextBoxFor（m=>m.EndDate，“{0:d}”，新的{@class=“input sm form control”}）
@Model.ExpenseType.totaldebitis中得到了“object null reference”异常
我想知道为什么第二个断点没有执行。如果执行此断点，则无法获得此异常。请告诉我哪里出错。在RenderPartial
方法中，您正在调用debiandCreditExpenseSPV
部分视图。此视图被强类型化到您的仪表板视图模型
，并且您在视图中使用了此模型的不同属性（例如：Model.ExpenseType.totaldebitis
）
但是在索引视图中，没有将任何模型对象传递给RenderPartial
方法。如果在此方法中未传递任何对象，它将尝试使用父视图（索引）的模型。在本例中，索引视图没有任何模型，因此局部视图现在拥有的模型本质上是NULL。您正试图访问NULL的ExpenseType
属性，这就是您获得异常的原因
即使您修改了索引视图以通过模型，您也要做两次。一次是通过RenderPartial
，另一次是在document ready
事件上通过ajax调用debiandecreditexpensespv
方法。也许你可以摆脱RenderPartial
调用
因此，在索引视图中，添加一个div来显示ajax调用的结果
<div id="divDebitAndCredit"></div>
现在在上面的代码中，您正试图将startDate和endDate发送到action方法。因此，更新您的操作方法以接受这些
public ActionResult DebitAndCreditExpensesPV(DateTime? startDate,DateTime? endDate)
{
DashboardViewModel objVM = new DashboardViewModel();
DateTime date = DateTime.Now;
if(startDate!=null)
{
objVM.StartDate = startDate.Value;
}
else
{
objVM.StartDate = new DateTime(date.Year, date.Month, 1);
}
if(endDate!=null)
{
objVM.EndDate = endDate.Value;
}
else
{
objVM.EndDate = objVM.StartDate.AddMonths(1).AddDays(-1);
}
objVM.ExpenseType = new ExpenseList { TotalCredits = 45.00, TotalDebits = 634.00 };
return PartialView(objVM);
}
但是startDate
和endDate
输入字段是局部视图的一部分。因此，当您在index视图的ready事件中调用ajax时，这些字段将不会成为页面的一部分。您可以将局部视图保留在div中，并将DashboardViewModel对象传递给局部视图
@model DashboardViewModel
<div id="divDebitAndCredit">
@{ Html.RenderPartial("DebitAndCreditExpensesPV",Model) }
</div>
由于未将模型传递给分部，因此会出现null引用异常。（模型为null
因此Model.ExpenseType
作为例外抛出请注意Html.RenderPartial（）
不调用控制器方法（为此，您需要Html.RenderAction（）
）您的ajax调用将导致500个内部服务器错误，因为该方法返回一个视图，但您将返回类型指定为dataType:'json'，
@StephenMuecke，所以我应该如何将模型传递给partial，而ajax中的dataType将是html
？至少您需要public ActionResult DashboardIndex（）{var model=new DashboardViewModel（）；return View（model）；}
-始终将视图返回到模型。但是DashboardIndex
还应具有初始化ExpenseType
-public DashboardIndex（）{ExpenseType=new ExpenseList（）；}
（否则，您还必须在GET方法中初始化属性ExpenseType
，是的，日期类型必须是“html”
。您也将数据传递给方法（开始日期
和结束日期public ActionResult DebitAndCreditExpensesPV(DateTime? startDate,DateTime? endDate)
{
DashboardViewModel objVM = new DashboardViewModel();
DateTime date = DateTime.Now;
if(startDate!=null)
{
objVM.StartDate = startDate.Value;
}
else
{
objVM.StartDate = new DateTime(date.Year, date.Month, 1);
}
if(endDate!=null)
{
objVM.EndDate = endDate.Value;
}
else
{
objVM.EndDate = objVM.StartDate.AddMonths(1).AddDays(-1);
}
objVM.ExpenseType = new ExpenseList { TotalCredits = 45.00, TotalDebits = 634.00 };
return PartialView(objVM);
}
@model DashboardViewModel
<div id="divDebitAndCredit">
@{ Html.RenderPartial("DebitAndCreditExpensesPV",Model) }
</div>
public ActionResult Index()
{
var objVM = new DashboardViewModel();
DateTime date = DateTime.Now;
objVM.StartDate = new DateTime(date.Year, date.Month, 1);
objVM.EndDate = objVM.StartDate.AddMonths(1).AddDays(-1);
objVM.ExpenseType = new ExpenseList { TotalCredits = 45.00, TotalDebits = 634.00 };
return View(objVM);
}