我有一个页面,左侧是资产的菜单列表,当您点击资产时,右侧会出现一个表单来编辑该资产。我需要能够在编辑资产后刷新资产列表,以便名称中的任何更改也会显示在菜单列表中。
这是我的页面
</head>
<body>
<div id="leftHandMenu">
<h2>assets</h2>
@Ajax.ActionLink("Create Asset", "CreateAsset", new AjaxOptions() { UpdateTargetId = "FormContainer", InsertionMode = InsertionMode.Replace })
@Html.Action("Assets")
</div>
<div id="FormContainer">
</div>
</body>
</html>
使用@html.Action(&#34; Assets&#34;)调用创建的资产列表。 以下是资产列表的视图
@model IList<CasWeb.Models.DataContext.Asset>
@if (Model != null && Model.Any())
{
<ul>
@foreach (var asset in Model)
{
<li> @Ajax.ActionLink(asset.Name, "EditAsset", new { id = asset.Id }, new AjaxOptions() { UpdateTargetId = "FormContainer", InsertionMode = InsertionMode.Replace }) </li>
}
</ul>
}else
{
<h1> no assets</h1>
}
这是我的编辑资产视图
@using System.Collections
@model CasWeb.Models.DataContext.Asset
<script type="text/javascript">
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#FormContainer').html(result);
}
});
}
return false;
});
});
</script>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<fieldset>
<legend>Asset</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ModelId)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.ModelId, new SelectList((IEnumerable)ViewData["AssetModels"], "Id", "Model"))
@Html.ValidationMessageFor(model => model.ModelId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.SizeId)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.SizeId, new SelectList((IEnumerable)ViewData["AssetSizes"], "Id", "Size"))
@Html.ValidationMessageFor(model => model.SizeId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.TypeId)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.TypeId, new SelectList((IEnumerable)ViewData["AssetTypes"], "Id", "Type"))
@Html.ValidationMessageFor(model => model.TypeId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.DeptId)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.DeptId, new SelectList((IEnumerable)ViewData["Depts"], "Id", "Name"))
@Html.ValidationMessageFor(model => model.DeptId)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
这是我的控制器
[ChildActionOnly]
public PartialViewResult Assets()
{
var assets = _assetRepo.GetAll();
return PartialView(assets);
}
public PartialViewResult EditAsset(Guid id)
{
SetUpViewDataForComboBoxes();
var asset = _assetRepo.Get(id);
return asset == null
? PartialView("NotFound")
: PartialView("EditAsset", asset);
}
[HttpPost]
public PartialViewResult EditAsset(Asset asset)
{
if (ModelState.IsValid)
{
_assetRepo.Update(asset);
return PartialView("EditAssetSuccess");
}
SetUpViewDataForComboBoxes();
return PartialView("EditAsset", asset);
}
我希望能够在保存之后刷新控制器中的EditAsset post方法中的资产视图,因为这是更可测试的,但从我可以告诉我可能需要在成功回调中执行此操作编辑表单java脚本提交。
答案 0 :(得分:2)
对于Edit Assest,使用Ajax表单并调用以下方法OnSuccess事件。您还需要在页面加载时调用以下方法。
$.get("/ControllerName/Assets", { random: '@DateTime.Now.Ticks' }, function (response) {
$("#ListOfAssestDiv").html(response);
});
对于显示组件列表,我的意思是(@ Html.Action(“Assets”))放入另一个div。所以你的代码就像这样
</head>
<body>
<div id="leftHandMenu">
<h2>assets</h2>
@Ajax.ActionLink("Create Asset", "CreateAsset", new AjaxOptions() { UpdateTargetId = "FormContainer", InsertionMode = InsertionMode.Replace })
<div id="ListOfAssestDiv">
@Html.Action("Assets")
</div>
</div>
<div id="FormContainer">
</div>
</body>
</html>
如果您有任何疑问,请与我们联系。