2

我有一个页面，左侧是资产的菜单列表，当您单击资产时，右侧会出现一个表单来编辑该资产。我需要能够在编辑资产后刷新资产列表，以便名称的任何更改也出现在菜单列表中。

这是我的页面

 </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("Assets") 调用创建的资产列表。这是资产列表的视图

 @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 的成功回调中执行此操作脚本提交。

4

1 回答 1

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>

如果您有任何疑问，请告诉我。

于 2012-07-05T05:08:07.120 回答