![](/img/trans.png)
[英]Rendering a view with HtmlHelper and Partial Page in ASP.Net MVC3
[英]Rendering partial view in ASP.Net MVC3 Razor using Ajax
我希望實現的基本功能是在選擇下拉列表項時更新表的內容。 當用戶進行新選擇並從數據庫中檢索新信息並重新填充表時,這將更新。
值得注意的是,我希望.change()使用的DropDownListFor不包含在AjaxForm中,而是出現在頁面的其他地方(不可否認的是另一種形式)
為了做到這一點,我看了這個問題: 在ASP.Net MVC3 Razor中動態渲染局部視圖,使用Ajax調用Action ,它可以很好地按照我想做的方式進行。
到目前為止,我有一個控制器方法,用於處理為部分視圖填充自定義視圖模型:
[HttpPost]
public ActionResult CompanyBillingBandDetails(int id = 0)
{
var viewModel = new BillingGroupDetailsViewModel();
var billingGroupBillingBands =
_model.GetAllRecordsWhere<BillingGroupBillingBand>(x => x.BillingGroupId == id).ToList();
foreach (var band in billingGroupBillingBands)
{
viewModel.BillingBands.Add(band.BillingBand);
}
return PartialView("BillingGroupDetailsPartial", viewModel);
}
ViewModel我希望填充每個調用:
public class BillingGroupDetailsViewModel
{
public List<BillingBand> BillingBands { get; set; }
}
我使用的強類型模型作為局部視圖的模型
public class BillingBandsObject
{
public int BillingBandId { get; set; }
public int RangeFrom { get; set; }
public int RangeTo { get; set; }
public Decimal Charge { get; set; }
public int BillingTypeId { get; set; }
public bool Delete { get; set; }
}
它填充並返回的局部視圖:
@model xxx.xxx.DTO.Objects.BillingBandsObject
<tr>
<td>
@Html.DisplayTextFor(x => x.RangeFrom)
</td>
</tr>
<tr>
<td>
@Html.DisplayTextFor(x => x.RangeTo)
</td>
</tr>
<tr>
<td>
@Html.DisplayTextFor(x => x.Charge)
</td>
</tr>
頁面此部分的Razor代碼:
<table>
<thead>
<tr>
<th>
Range From
</th>
<th>
Range To
</th>
<th>
Charge
</th>
</tr>
</thead>
<tbody>
@using (Ajax.BeginForm("CompanyBillingBandDetails", new AjaxOptions() { UpdateTargetId = "details", id = "ajaxform" }))
{
<div id="details">
@Html.Action("CompanyBillingBandDetails", new { id = 1 })
</div>
}
</tbody>
</table>
最后我從Darin的回答中直接提升了這個功能:
$(function () {
$('#billinggrouplist').change(function () {
// This event will be triggered when the dropdown list selection changes
// We start by fetching the form element. Note that if you have
// multiple forms on the page it would be better to provide it
// an unique id in the Ajax.BeginForm helper and then use id selector:
var form = $('#ajaxform');
// finally we send the AJAX request:
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function (result) {
// The AJAX request succeeded and the result variable
// will contain the partial HTML returned by the action
// we inject it into the div:
$('#details').html(result);
}
});
});
});
目前我已經遇到了一些錯誤,目前我面臨的是:
“執行處理程序'System.Web.Mvc.HttpHandlerUtil + ServerExecuteHttpHandlerAsyncWrapper'的子請求時出錯。”
但是,我覺得我對整個問題的理解可能缺乏。
任何幫助贊賞!
此錯誤表示在呈現子視圖時出現異常。 可能與您的數據有關的東西,即。 NulLReferenceException
。
只需附加調試器並設置為在拋出異常時中斷。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.