2012-07-04 79 views
2

我有一個頁面,左側是資產的菜單列表,當您單擊資產時,右側將顯示一個表單以編輯資產。編輯資產後,我需要能夠刷新資產列表,以便名稱中的任何更改都顯示在菜單列表中。如何從控制器刷新@ html.Action

這是我

</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( 「資產」)調用創建的列表。 這裏是資產

@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腳本提交。

回答

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> 

請讓我知道你是否有任何疑問。

+0

很感謝。只是一個小問題,你爲什麼要將隨機參數添加到資產url的末尾? –

+0

@DavidKethel。這是一個Ajax請求。在IE瀏覽器中,如果URL相同,它將採用瀏覽器緩存的響應(在調試模式下),以避免這種情況。 –

+0

你現在如何在.net Core中執行此操作,不支持@ Html.Action。從我收集你不能做視圖組件的Ajax請求。 –