ajax - 我如何在我的 asp.net mvc Web 应用程序中使用 Ajax.beginform 更新两个 DOM 元素

Question

我有以下 ajax.actionlink ：-

<div id ="link">
@Ajax.ActionLink("Add New Answer", "Create", "Answer",
        new { questionid = Model.QuestionID },
          new AjaxOptions
          {

              HttpMethod = "Get",
              UpdateTargetId = "link",
              InsertionMode = InsertionMode.InsertAfter,
              LoadingElementId = "progress"

                        })
                        </div>

上面的链接将重新运行以下包含 Ajax.Actionlink 的 _answer 部分视图：-

 @using (Ajax.BeginForm("Create", "Answer", new AjaxOptions
{
    HttpMethod = "Post",
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "incrementanswer",
}))

 {
     <div id = "returnedquestion">
     @Html.ValidationSummary(true)

    <fieldset> 
        <legend>Answer here</legend> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Description) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Description) 
            @Html.ValidationMessageFor(model => model.Description) 
        </div> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.IsRight) 
        </div> 
        <div class="editor-field"> 
             @Html.DropDownList("IsRight", String.Empty) 
            @Html.ValidationMessageFor(model => model.IsRight) 
        </div>  
    </fieldset> 
     <input type= "hidden" name = "questionid" value = @ViewBag.questionid>
     <input type= "hidden" name = "assessmentid" value = @ViewBag.assessmentid>
     <input type="submit" value="Add answer" />
 </div>
 }
 </div>

当前单击提交按钮后，“UpdateTargetId =”incrementanswer”将使用提交结果进行更新，但问题是我还需要删除当前的 _answer 部分视图（当前包含我插入的值的视图点击提交后仍然会显示ajax.beginform)

Answer 1

在包装器 div 中加载您的部分视图

<div id="partialWrapper">
 @Html.partial("yourpartial")
</div>

声明一个OnSuccess事件处理程序

@using (Ajax.BeginForm("Create", "Answer", new AjaxOptions
{
    HttpMethod = "Post",
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "incrementanswer",
    OnSuccess="removePartial"
}))

定义 removePartial

<script>
 function removePartial(){
   $("#partialWrapper").remove();
  }
</script>